DOM节点操作
DOM节点操作
1. 节点概述
节点的三个基本属性：
- 节点类型nodeType
- 节点名称nodeName
- 节点值nodeValue
- 元素节点 nodeType为1（实际开发中的主要操作）
- 属性节点 nodeType为2
- 文本节点 nodeType为3（文本节点包含文字、空格、换行等）
2. 节点层级
利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
2.1 父级节点
node.parentNode
- parentNode属性可以返回某节点的最近一个父节点
- 如果指定的节点没有父节点，则返回nill
2.2 子节点
1.parentNode.childNodes // 标准
parentNode.childNode返回包含指定节点的子节点的集合，该集合为即时更新的集合。
注：
- 返回值里包含了所有的节点，包括元素节点、文本节点等
- 如果只想获得里面的元素节点，则需要专门处理。所以这种情况下不建议使用childNodes
// 只想获得里面的元素节点的处理
var eg = document.querySelector('ol');
for(var i = 0;i < ol.childNodes.length;i++) {
if (ol.childNodes[i].nodeType == 1) {
// 这样就可以选出元素节点
......
}
}
2.parentNode.children // 非标准
parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点。虽然它是非标准，但是得到了各个浏览器的支持，因而可以放心使用。
3.parentNode.firstChild
parentNode.firstChild返回第一个子节点，找不到返回null。返回值里包含了所有的节点，包括元素节点、文本节点等。
4.parentNode.lastChild
parentNode.lastChild返回最后一个节点，找不到返回null。返回值里包含了所有的节点，包括元素节点、文本节点等。
5.parentNode.firstElementChild
parentNode.firstElementChild返回第一个子元素节点，找不到返回null。
6.parentNode.lastElementChild
parentNode.lastElementChild返回最后一个子元素节点，找不到返回null。
注：5、6方法存在兼容性问题，ie9以上才支持。
由于firstChild和lastChild包含其他节点，而firstElementChild和lastElementChild又有兼容性问题，所以获取第一个子元素节点或最后一个子元素节点的解决方法为：
- 如果想要第一个子元素节点，可以使用parentNode.children[0]
- 如果想要最后一个子元素节点，可以使用parentNode.children[parentNode.children.length-1]
2.3 兄弟节点
1.node.nextSibling
nextSibling返回当前元素的下一个兄弟节点，找不到返回null。返回值里包含了所有的节点，包括元素节点、文本节点等。
2.node.previousSibling
previousSibling返回当前元素上一个兄弟节点，找不到返回null。返回值里包含了所有的节点，包括元素节点、文本节点等。
3.node.nextElementSibling
nextElementSibling返回当前元素下一个兄弟元素节点，找不到返回null。
4.node.previousElementSibling
previousElementSibling返回当前元素上一个兄弟元素节点，找不到返回null。
注：方法3、4存在兼容性问题，ie9以上才支持。
解决兼容性问题的方法：
function getNextElemrntSibling(element) {
var el = element;
while (el = el.nextSibling) {
// 元素节点nodeType为1
if (el.nodeType === 1) {
return el;
}
}
return null;
}
3. 创建节点
document.createElement('tagName');
该方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以这种方法也称为动态创建元素节点。
4. 添加节点
1.node.appendChild(child)
该方法将一个节点添加到指定父节点的子节点列表末尾，类似于css里的after伪元素。
2.node.insertBefore(child, 指定元素) // 指定元素为parentNode.children[x]
该方法将一个节点添加到父节点的指定子节点前面，类似于css里的before伪元素。
5. 删除节点
node.removeChild(child)
该方法从DOM中删除一个子节点，返回删除的节点。
6. 复制节点(克隆节点)
node.cloneNode()
该方法返回调用该方法的节点的一个副本。
注：
- 如果括号参数为空或者false，则是浅拷贝，只克隆复制节点本身，不克隆里面的子节点。
- 如果括号参数为true，则为深度拷贝，会复制节点本身以及里面所有的子节点。
7. 三种动态创建元素的区别
- document.write()
- element.innerHTML()
- document.createElement()
区别：
- document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面重绘。
- element.innerHTML()是将内容写入某个DOM节点，不会导致页面全部重绘。它创建多个元素时效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂。
- document,createElement()创建多个元素效率稍低一点点，但是结构更清晰。
总结：不同浏览器下，innerHTML效率要比createElement高。
对于element.innerHTML()的使用：
// 1.拼接字符串的方法，这种方法会使创建元素时效率降低，不要使用
var eg = document.querySelector('.inner');
for (var i = 0; i <= 100; i++) {
eg.innerHTML += '<div>例子</div>';
}
// 2.数组形式拼接
var arr = [];
for (var i = 0; i <= 100; i++) {
arr.push('<div></div>');
}
eg.innerHTML = arr.join(''); // join()方法用于把数组中的所有元素放入一个字符串
