节点
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,则是 深度拷贝,会复制节点本身以及里面所有的子节点。