一、DOM的增删改查

- DOM的新增

- 方法一

1. innerHTML

        var oDiv = document.querySelector('.a') ;
        oDiv.innerHTML = '<p>666</p>'

- 方法二

1. 创建一个文本节点 createTextNode()
2. 创建标签节点 createElement()
3. 插入 （1）在最后面插入 appendChild() 在指定的元素前面插入
   （2）insertBefore(要插入的元素 , 指定的元素)

        // 1 创建一个标签  createElement
        var oP = document.createElement('p') ;
        console.log(oP);

        // 2 创建一个文本节点
        var oText = document.createTextNode('666');
        console.log(oText);

        // 3 添加子元素  把文本插入标签中
        oP.appendChild(oText) ;

        // 4 把p插入div中
        oDiv.appendChild(oP)

        // 同一个标签只能操作一次 --- 标签是对象，对象都有唯一的地址
        // oDiv.appendChild(oP)

        // oDiv.innerHTML = oP ;   // 无法解析？

- 两种方法的区别

1. oP 在创建标签的时候，是一个对象
2. innerHTML 只能解析字符串

- DOM的删除

1. remove() 删除自己和所有的子元素

 var oDiv = document.querySelector(".a")
        // oDiv.remove()

2. removeChild() 删除指定的子元素

        var oP = document.querySelector("p")
        oDiv.removeChild(oP)

3. innerHTML = "" 删除所有的子元素

- DOM的替换

1. 替换子元素 replaceChild(new , old)

        var oDiv = document.querySelector('.a') ;
        var oSpan = document.querySelector('span') ;

        var oStrong = document.createElement('strong') ;
        oStrong.innerHTML = '888'

        oDiv.replaceChild(oStrong , oSpan)

- DOM的查找

- 查找父元素

1. parentNode

- 查找子元素

1. node 节点 ：注释，换行，标签，文本都是节点
2. 节点集合： NodeList (伪数组)
3. 标签 HTMLCollection
4. childNodes 子节点 --- 包含所有的文本，换行，标签，注释等
5. children 子元素 --- 只包含标签
6. firstElementChild 第一个子元素标签
7. lastElementChild 最后一个子元素标签
8. firstChild 第一个子节点
9. lastChild 最后一个字节点

- 查找兄弟元素

1. previousElementSibling 前一个标签兄弟
2. nextElementSibling 后一个标签兄弟元素
3. previousSibling 前一个兄弟节点
4. nextSibling 后一个兄弟节点

- 节点的克隆

• cloneNode() 克隆节点，默认只复制标签
• cloneNode(true) 克隆节点，包含子元素

- 重绘和回流

• 重绘：重新绘画 比如颜色的改变会引发页面重绘
• 回流: 比如插队 display:none /block

1. 回流比引发重绘,但重绘不一定引发回流
2. 回流的代价大于重绘
3. 重绘和回流是无法避免的
4. 这个问题只能优化,不能完全解决
5. 任何的DOM操作都会引发回流

- 文档碎片

-fragment

• 创建

 var fragment = document.createDocumentFragment();

        // 给页面上添加100个p标签
        for(var i = 0;i<100;i++){
            var oP = document.createElement("p");
            oP.innerHTML = i;
            fragment.appendChild(oP)
        }
        document.body.appendChild(fragment)