JavaScript's depth-first and breadth-first traversal of DOM nodes

This article introduces JavaScript to depth-first and breadth-first traversal of DOM nodes. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The tree structure of HTML is as above

Depth-first traversal

Depth-first for the tree Traversal, the execution result should be as follows:

Using recursive method

 var arr=[];
    //深度优先
    function traversalDFSDOM (rootDom) {
        if(!rootDom)return;
        if(rootDom.children.length==0){
            arr.push(rootDom)//没有孩子节点，表示是个叶子节点，将节点push到数组中
            return;
        }
        arr.push(rootDom)//非孩子节点，在每次遍历它的孩子节点之前先把它push到数组中
        for(var i=0;i<rootdom.children.length><p>The result is as follows</p>
<p style="text-align: center;"><img src="/static/imghw/default1.png" data-src="https://img-blog.csdn.net/20180405023706585?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xYWTIyNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" class="lazy" alt=""></p>
<p>( The script tag is written outside the body, but when executed, the browser will put it into the body and become the last element)<br></p>
<h5 id="Use-a-non-recursive-method">Use a non-recursive method</h5>
<pre class="brush:php;toolbar:false"> //深度优先非递归
    function traversalDFSDOM(rootDom) {
        if(!rootDom)return;
        var stack=[]
        var node = rootDom;
        while(node!=null){
            arr.push(node);
            if(node.children.length>=0){
                for(let i=node.children.length-1;i>=0;i--)
                    stack.unshift(node.children[i]);
            }
            node = stack.shift()
        }
    }
    traversalDFSDOM(bodyDom)

Non-recursive Mainly adopt the process of simulating the queue:

and so on. It should be noted that the loop of i needs to start from node.children.length-1 to 0

Breadth-first traversal

The result of breadth-first traversal of the DOM tree should be as follows

Use recursion

var stack=[bodyDom];//bodyDom是遍历的根节点
    function traversalBFSDOM (count) {
        count = count || 0;
        if (stack[count]) {
            var children = stack[count].children;
            for (let i = 0; i <pre class="brush:php;toolbar:false">traversalBFSDOM(0)

Use non-recursion Method

    function traversalBFSDOM (rootDom) {
        if(!rootDom)return;
        arr.push(rootDom)
        var queue = [rootDom];
        while(queue.length){
            var node = queue.shift();
            if(!node.children.length){
                continue;
            }
            for(var i=0;i<node.children.length><p> Mainly adopts the first-in-first-out idea and traverses the child nodes under each node in sequence. </p>
<p>The running results are as follows:</p>
<p style="text-align: center;"><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/297/941/277/1539247690616429.png" class="lazy" title="1539247690616429.png" alt="JavaScripts depth-first and breadth-first traversal of DOM nodes"    style="max-width:90%"  style="max-width:90%"></p>
<p>Learning is a process, learn to learn deeply</p>
<p>Summary: The above is the entire content of this article, I hope It can be helpful to everyone’s study. For more related tutorials, please visit <a href="http://www.php.cn/course/list/17.html" target="_blank">JavaScript Video Tutorial</a>! </p>
<p>Related recommendations: </p>
<p class="art_xg"><a href="http://www.php.cn/" target="_blank">php public welfare training video tutorial</a></p>
<p><a href="http://www.php.cn/js-tutorial.html" target="_blank">JavaScript graphic tutorial</a></p>
<p><a href="http://www.php.cn/course/26.html" target="_blank">JavaScriptOnline Manual</a></p></node.children.length>

The above is the detailed content of JavaScript's depth-first and breadth-first traversal of DOM nodes. For more information, please follow other related articles on the PHP Chinese website!