【DOM】DOM中节点之间关系api（通过节点之间关系查询节点的api）

---

节点指针（通过节点之间关系查询节点的api）

关系图谱

image.png

父关系api

parentNode：

每个节点都有一个parentNode属性，它表示元素的父节点。Element的父节点可能是Element，Document或DocumentFragment

子节点.parentNode

parentElement：

返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element，如果不是，则返回null

子节点.parentNode

子关系api

childNodes

返回一个即时的NodeList，表示元素的子节点列表，子节点可能会包含文本节点，注释节点等。childNodes子节点列表集合（只读属性 有兼容性问题 ）

父节点.childNodes

例子（子节点可能会包含文本节点，注释节点等）

    
    
11111
    
22222
    
3333
    
44444

    

image.png

从截图中可以看出 这段代码中ul的子节点有9个，这说明使用childNodes获取的节点包括了文本节点和元素节点
childNodes 在低版本的ie 浏览器下获取的节点只包括元素节点，这就导致了兼容性问题！
如何解决兼容性？？
根据子节点的nodeType属性值判断

for (var i=0; i

children

一个即时的HTMLCollection，子节点都是Element，IE9以下浏览器不支持。children子节点列表集合（只读属性 推荐使用 ）

父节点.children

例子

    
    
11111
    
22222
    
3333
    
44444

image.png

从截图中可以看出 这段代码中ul的子节点有4个，子节点都是Element

firstChild和lastChild

Node.firstChild 只读属性返回父节点的第一个子节点（node包括Element，text，注释节点；），如果节点是无子节点，则返回 null。
Node.lastChild 只读属性返回父节点的最后一个子节点（node包括Element，text，注释节点；），如果没有子节点，则返回 null。

firstElementChild和 lastElementChild （与上一个的区别就是获取的是Element而不是node）

ParentNode.firstElementChild 只读属性，返回对象的第一个孩子 Element, 如果没有子元素，则为null。
ParentNode.lastElementChild 只读属性返回对象的最后一个孩子Element ，如果没有子元素，则返回null。
推荐使用

总结
firstChild 、lastChild 和childNodes同样的存在兼容性问题，在低版本ie浏览器中只能获取到元素节点

兄弟关系api

previousSibling和nextSibling（获取的是node包括元素节点，文本节点，注释节点）

previousSibling：节点的前一个节点，如果该节点是第一个节点，则为null。
nextSibling：节点的后一个节点，如果该节点是最后一个节点，则为null。

previousElementSibling和nextElementSibling（获取的是元素节点）

返回前一个元素节点，前一个节点必须是Element，注意IE9以下浏览器不支持
返回后一个元素节点，后一个节点必须是Element，注意IE9以下浏览器不支持
推荐使用