顺序遍历DOM结构可以使用NodeIterator和TreeWalker。注:IE不支持DOM遍历。

DOM遍历是深度优先的DOM结构遍历,移到的方向至少有两个(取决于遍历类型)。如下所示:

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <p>
            <b>Hello</b>
            world!
        </p>
    </body>
</html>

其DOM树结构如下所示:

0003-DOM遍历

任何节点都可以作为遍历的根节点。假设以<body>为根节点,第一步就是访问<p>元素,然后再访问<p>元素后面的节点。此次遍历不会访问到<html>、<head>元素,也不会到达不属于<body>元素子树的任何节点。而以document为根节点的遍历则可以访问文档中的全部节点。

下图是对以document为根节点的DOM树进行深度优先遍历的顺序图:

0003-DOM遍历

此遍历访问的第一个节点是document,最后一个是"world!"文本节点。从最后一个文本节点“world!"开始,可反向遍历到DOM树的顶端。NodeIterator和TreeWalker都是以这种方式进行遍历的。

相关文章: