遍历HTML DOM 树

<!-- NodeIterator -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>aaa</title>
</head>
<body>
<div id="app" class="a">
    <p class="b"><b class="c">hello</b>hello</p>
    <ul class="d">
        <li class="e">1</li>
        <li class="f">2</li>
        <li class="g">3</li>
        <li class="h">4</li>
    </ul>
</div>
</body>
</html>


    let app = document.getElementById('app');
    let app2 = document.createNodeIterator(app, NodeFilter.SHOW_ELEMENT, null, false);//显示元素节点(参数许多，可以改变)
    let node = app2.nextNode();
    while (node != null) {
        alert(node.className);
        node = app2.nextNode();
    }

2、TreeWalker ( 和上面方法大致相似 )

可以在不同方向上遍历DOM结构

parentNode(); ==遍历到节点的父节点

fristChild(); ==遍历到节点的第一个子节点

lastChild(); ==遍历到当前节点的最后一个节点

nextSibling(); ==遍历到当前节点的同辈节点

previousSibling(); ==遍历到当前节点的上一个同辈节点