遍历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(); ==遍历到当前节点的上一个同辈节点

秒客网

遍历HTML DOM 树

相关文章