遍历 DOM

<html> = document.documentElement
<body> = document.body
<head> = document.head
子节点：childNodes，firstChild，lastChild

childNodes 集合列出了所有子节点，包括文本节点。

            
                for (let i = 0; i < document.body.childNodes.length; i++) {
                    alert( document.body.childNodes[i] ); // Text, DIV, Text, UL, ..., SCRIPT
                }

firstChild 和 lastChild 属性是访问第一个和最后一个子元素的快捷方式。

            
                elem.childNodes[0] === elem.firstChild
                elem.childNodes[elem.childNodes.length - 1] === elem.lastChild

这里还有一个特别的函数 elem.hasChildNodes() 用于检查节点是否有子节点。

DOM 集合：childNodes 看起来就像一个数组。但实际上它并不是一个数组，而是一个集合 —— 一个类数组的可迭代对象。这个性质会导致两个重要的结果：

我们可以使用 for..of 来迭代它：集合是可迭代的（提供了所需要的 Symbol.iterator 属性）。

            
                for (let node of document.body.childNodes) {
                    alert(node); // 显示集合中的所有节点
                }

无法使用数组的方法，因为它不是一个数组：

            
                alert(document.body.childNodes.filter); // undefined（这里没有 filter 方法！）

集合的性质所得到的第一个结果很不错。第二个结果也还可以忍受，因为如果我们想要使用数组的方法的话，我们可以使用 Array.from 方法来从集合创建一个“真”数组：

            
                alert( Array.from(document.body.childNodes).filter ); // function

兄弟节点和父节点
兄弟节点（sibling）是指有同一个父节点的节点。

        
            //<body> 的父节点是 <html>
 alert( document.body.parentNode === document.documentElement ); // true
 
 // <head> 的后一个是 <body>
 alert( document.head.nextSibling ); // HTMLBodyElement
 
 // <body> 的前一个是 <head>
 alert( document.body.previousSibling ); // HTMLHeadElement

纯元素导航：这些链接和上面提到过的类似，只是在词中间加了 Element

children —— 仅那些作为元素节点的子代的节点。
firstElementChild，lastElementChild —— 第一个和最后一个子元素。
previousElementSibling，nextElementSibling —— 兄弟元素。
parentElement —— 父元素。

parentElement 属性返回的是“元素类型”的父节点，而 parentNode 返回的是“任何类型”的父节点。这些属性通常来说是一样的：它们都是用于获取父节点。
唯一的例外就是 document.documentElement：

        
            alert( document.documentElement.parentNode ); // document
            alert( document.documentElement.parentElement ); // null

因为根节点 document.documentElement（）的父节点是 document。但 document 不是一个元素节点，所以 parentNode 返回了 document，但 parentElement 返回的是 null。
让我们修改上面的一个示例：用 children 来替换 childNodes。现在它只显示元素：

        
            <html>
<body>
<div>Begin</div>
<ul>
<li>Information</li>
</ul>
<div>End</div>
<script>
for (let elem of document.body.children) {
alert(elem); // DIV, UL, DIV, SCRIPT
}
</script>
...
</body>
</html>

总结

给定一个 DOM 节点，我们可以使用导航（navigation）属性访问其直接的邻居。

对于所有节点：parentNode，childNodes，firstChild，lastChild，previousSibling，nextSibling。
仅对于元素节点：parentElement，children，firstElementChild，lastElementChild，previousElementSibling，nextElementSibling。