今天在掘金上看到一篇文章配乓，里面給出了一個(gè)試題，用廣度優(yōu)先查找實(shí)現(xiàn)一個(gè)dom結(jié)構(gòu)的查詢惠毁，并輸出tag和類犹芹。dom結(jié)構(gòu)如下：
<div class="container">
<section class="sidebar">
<ul class="menu"></ul>
</section>
<section class="main">
<article class="post"></article>
<p class="copyright"></p>
</section>
</div>
一時(shí)手癢，趕緊寫了如下的廣度優(yōu)先代碼：
function search(className){
var obj = document.querySelector(className)
//廣度優(yōu)先
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])
}
既然寫了廣度優(yōu)先鞠绰，順便把深度優(yōu)先寫了吧羽莺。。與廣度優(yōu)先相比洞豁，只需重寫searchItem方法即可.
function search(className){
var obj = document.querySelector(className)
//深度優(yōu)先
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)
}
