遍历一个DOM树

Posted 沿着路走到底

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了遍历一个DOM树相关的知识,希望对你有一定的参考价值。

写一个函数遍历 DOM 树,分别用深度优先和广度优先

PS:注意回顾 “Node 和 Element 和区别”

<div id="box">
        <p>hello <b>world</b></p>
        <img src="https://www.baidu.com/img/flexible/logo/pc/result.png"/>
        <!-注释->
        <ul>
            <li>a</li>
            <li>b</li>
        </ul>
    </div>

1

 

深度优先的结果 `<div> <p> "hello" <b> "world" <img> 注释 <ul> <li> "a" <li> "b"`

广度优先的结果 `<div> <p> <img> 注释 <ul> "hello" <b> <li> <li> "world" "a" "b"`

/**
 * @description 遍历 DOM tree
 */

/**
 * 访问节点
 * @param n node
 */
func

以上是关于遍历一个DOM树的主要内容,如果未能解决你的问题,请参考以下文章

遍历Dom树

JavaScript之DOM-4 文档结构和遍历(节点树元素树文档的遍历)

jquery遍历总结(转)

使用 jQuery Mobile 遍历 HTML DOM 树

childNodes遍历DOM节点树

JS遍历DOM 节点树的实现