节点
1、父级节点
| 名称 | 代码 | 说明 |
|---|---|---|
| 父节点 | node.parentNode |
parentNode 属性可返回某节点的父节点，注意是 最近的一个父节点 如果指定的节点没有父节点则返回null |
2、子节点
| 名称 | 代码 | 说明 |
|---|---|---|
| 所有子节点 | parentNode.childNodes(标准) |
parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。 注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。 如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes |
| 子元素节点 | parenNode.children(非标准) |
parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回 (这个使我们重点掌握的) |
| 第1个子节点 | parentNode.firstChild |
firstChild 返回第一个子节点，找不到则分会null。同样，也是包含所有的节点。 |
| 最后1个子节点 | parentNode.lastChild |
lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。 |
| 第1个子元素节点 | parentNode.firstElementChild |
firstElementChild 返回第一个子元素节点，找不到则返回null |
| 最后1个子元素节点 | parentNode.lastElementChild |
lastElementChild 返回最后一个子元素节点，找不到则返回null |
3、兄弟节点
| 名称 | 代码 | 说明 |
|---|---|---|
| 下一个兄弟节点 | node.nextSibling |
node.nexySibling 返回当前元素的下一个兄弟节点，找不到则返回null。 |
| 上一个兄弟节点 | node.previousSibling |
node.previousSibling 返回当前元素上一个兄弟节点，找不到则返回null。 |
| 下一个兄弟元素节点(有兼容性问题) | node.nextElementSibling |
node.nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null |
| 上一个兄弟元素节点(有兼容性问题) | node.previousElementSibling |
node.previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null |
注意：nextElementSibling 和 previousElementSibling 有兼容性问题， IE9 以上才支持。
问：如何解决兼容性问题？
答：自己封装一个兼容性的函数
function getNextElementSibling(element){
var el = element;
while (el = el.nextSibling){
if (el.nodeType === 1){
return el;
}
return null;
}
}
4、创建节点
| 名称 | 代码 | 说明 |
|---|---|---|
| 创建节点 | document.createElement('tagName') |
document.createElement ( ) 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也成为 动态创建元素节点 |
| 创建文本节点 | document.createTextNode(text) |
createTextNode() 可创建文本节点 |
5、添加节点
| 名称 | 代码 | 说明 |
|---|---|---|
| 末尾添加 | node.appendChild(child) |
node.appendChild ( ) 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 css 里面的 after 伪元素 |
| 指定添加 | node.insertBefore(child,指定元素) |
node.insertBefore ( ) 方法将一个节点添加到父节点的指定子节点前面。类似于 css 里面的 before 伪元素 |
6、删除节点
| 名称 | 代码 | 说明 |
|---|---|---|
| 删除节点 | node.removeChild(child) |
从node节点中删除一个子节点，返回删除的节点 |
7、复制(克隆)节点
| 名称 | 代码 | 说明 |
|---|---|---|
| 复制节点 | node.cloneNode() |
返回调用该方法的节点的一个副本。也成为了克隆节点/拷贝节点 |
注意：
- 如果括号参数为 空或者为false，则是 浅拷贝，即只克隆复制节点本身，不可隆里面的子节点。
- 如果括号参数为 true，则是 深度拷贝，会复制节点本身以及里面所有的子节点。