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 实现对一组元素进行倒序排列。