遍历dom树

根节点

1. document.documentElement返回文档对象( document )的根元素
2. document.head( 标签 )
3. document.body( 标签 )

遍历节点

父节点：parentNode
子节点：childNodes
子元素节点：children
前一个兄弟节点：previousSibling
后一个兄弟节点：nextSibling
第一个子节点：firstChild
第一个子元素节点：firstElementChild
最后一个子节点：lastChild( 可以是任何类型的节点 )
最后一个子元素节点：lastElementChild
返回一个节点的根元素：ownerDocument

节点信息

节点类型：nodeType( 返回一个数字值 )
节点名字：nodeName( 元素节点返回大写 )
节点内容：nodeValue

html代码:

    <!-- 深度为4 -->
    <div class="container">
        <div>
            <div></div>
            <ul>
                <li>hi</li>
                <li></li>
            </ul>
        </div>
    </div>

js代码：打印第n层所有节点

    let container = document.getElementsByClassName('container')[0]
        let result = []
        let index = 0
        function domTree(child,n){
            index++
            for(let i = 0;i<child.length;i++){
                if(index==n){
                result.push(child[i])
            }
                
                if(child[i].children.length>0){
                    domTree(child[i].children,n)
                }
            }
            
        }
        domTree(document.body.children,2)
        console.log(result);