美文网首页
广度优先查找和深度优先查找的js实现

广度优先查找和深度优先查找的js实现

作者: David三人行 | 来源:发表于2017-04-18 21:08 被阅读49次

今天在掘金上看到一篇文章,里面给出了一个试题,用广度优先查找实现一个dom结构的查询,并输出tag和类。dom结构如下:

<div class="container">
        <section class="sidebar">
            <ul class="menu"></ul>
        </section>
        <section class="main">
            <article class="post"></article>
            <p class="copyright"></p>
        </section>
    </div>

一时手痒,赶紧写了如下的广度优先代码:

function search(className){
    var obj = document.querySelector(className)
    //广度优先
    var searchItem = function(arr){
        if(arr.length==0)return
        var newarr = []
        for(var i=0,l=arr.length;i<l;i++){
            var item = arr[i]
            getTag(item)
            var children = item.children
            if(children&&children.length>0){
                newarr = newarr.concat(Array.prototype.slice.call(children,0))
            }
        }
        searchItem(newarr)
    }
    //输出元素的tag和类
    function getTag(obj){
        console.log(obj.tagName+' .'+obj.className)
    }
    searchItem([obj])
}

既然写了广度优先,顺便把深度优先写了吧。。与广度优先相比,只需重写searchItem方法即可.

function search(className){
    var obj = document.querySelector(className)
    //深度优先
    var searchItem = function(obj){
        if(!obj)return 
        getTag(obj)
        var children = obj.children
        if(children&&children.length>0){
            for(var i=0,l=children.length;i<l;i++){
                searchItem(children[i])
            }
        }
        
    }
    //输出元素的tag和类
    function getTag(obj){
        console.log(obj.tagName+' .'+obj.className)
    }
    searchItem(obj)
}

相关文章

网友评论

      本文标题:广度优先查找和深度优先查找的js实现

      本文链接:https://www.haomeiwen.com/subject/hvpqzttx.html