【28】DOM（节点的创建、添加、删除、替换、克隆、document对象、documentFragment对象）

1 节点（元素）的创建、添加、删除、替换、克隆

1.1 创建元素节点

新创建的元素需添加至DOM结构中，页面上才能渲染出来。

document.createElement('标签名'); //返回新创建的元素对象

1.2 添加子节点

① 在最后添加子节点

父元素.appendChild(新的子元素); 

② 指定位置添加子节点

父元素.insertBefore(新的子元素, 旧的子元素); //新的子元素插入到旧的子元素之前

1.3 删除子节点

父元素.removeChild(要删除的元素);

1.4 替换子节点

父元素.replaceChild(新的子元素，旧的子元素); //新的替换掉旧的

1.5 克隆节点

//方法返回克隆好的元素，参数默认为false（浅克隆：只克隆元素本身），另一参数为true（深度克隆：元素及其后代和文本内容都可以被克隆）
元素.cloneNode(); 

2 document对象

属性：
document.all                获取文档中所有的元素，只读
document.body               获取body元素，只读
document.documentElement     获取html元素，只读
document.lastModified        获取文档的最后一次修改时间，只读
document.title              读写页面标题，可读可写

方法：
document.write()                    输出内容到页面
document.getElementById()            通过ID名获取元素
document.getElementsByTagname()       通过标签名获取元素
document.getElementsByClassname()     通过类名获取元素
document.getElementsByName()          通过name属性值获取元素
document.querySelector()             通过选择器获取第一个满足条件的元素
document.querySelectorAll()          通过选择器获取所有满足条件的元素
document.creatElement()              创建一个元素节点
document.appendChild()               给document追加一个子元素
document.insertBefore()              在给document中的指定位置添加一个子元素
document.removeChild()               删除document中的指定子元素
document.replaceChild()              替换document中的指定子元素
document.cloneNode()                 克隆一个document节点              

3 documentFragment对象

3.1 创建documentFragment 对象

document.createDocumentFragment(); //返回一个 documentFragment 类型的对象

3.2 documentFragment 对象的特点

1）documentFragment 也是一类节点， nodeType 是 11，它并不是元素，通常作为其他节点的一个临时的容器。

2）可以给 documentFragment 对象添加子节点，documentFragment 节点也可以作为其他节点（元素）的子节点。

3）documentFragment 不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会导致性能等问题。

5.3 documentFragment 对象的应用

1）如果连续给一个元素添加多个子元素，可以先把子元素添加到 documentFragment 对象中，最后把 documentFragment 对象添加到父元素中，减少浏览器渲染次数。

2）利用 documentFragment 实现对一组元素进行倒序排列。