您的位置：首页 > 其它

dom 层次遍历-仿underscore

2014-08-13 17:05 218 查看

经常在面试题中看到dom层次遍历，自己尝试着用underscore的式的方法写了个，试着还可以用。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title></head>
<body>
<div id="par">

  <div id="first">
<p id="first1">
<span id="first11"><span id="first111"></span></span>
</p>
</div>
<div id="two">
<p id="two1">
<span id="two11"></span>
</p>
<p id="two2"></p>
</div>
<div id="three">
<p id="three1">
<span id="three11"></span>
</p>
</div>
</div>

<script
type="text/javascript">
var par=document.getElementById('par');
(function (){

  var _=function(){};

  this._=_;

  function searchN(e,n){
var arr=[],
eles,
level=0;
if(!n){
n=1;}
if(e && e.nodeType==1){
arr.push(e);}
else {
return null;}
while(arr.length!=0){
if(n==level){return arr;}
len=arr.length;

while(len--){

e=arr.shift();

eles=e.childNodes;

for (var i = 0,length=eles.length; i < length; i++)
{
if(eles[i] && eles[i].nodeType==1){arr.push(eles[i]);}
};
}

level++;
}
return false;
}
_.searchN=searchN;
}).call(this);


console.log(_.searchN(par,2));

</script>
</body>
</html>

(function (){

       var _=function(){};

       this._=_;//挂载

       function searchN(e,n){

            var arr=[],

               eles,

               level=0;

            if(!n){

               n=1;}

            if(e && e.nodeType==1){

            arr.push(e);}

            else {

            return null;}

            while(arr.length!=0){

            if(n==level){return arr;}

                  len=arr.length;



                  while(len--){//len记录每一层节点的个数



                  e=arr.shift();//每次取出一个，直至该层所有的孩子被取出。



                  eles=e.childNodes;//得到每一层的所有孩子节点，这个地方也可以用e.children



                  for (var i = 0,length=eles.length; i < length; i++) {

                        if(eles[i] && eles[i].nodeType==1){arr.push(eles[i]);}//将孩子节点暂存数组中

                  };

                  }



                  level++;//当每一层节点遍历结束，层数加1

            }

            return false;

         }

         _.searchN=searchN;

  }).call(this);

文章来源：http://www.youjobit.com/news/index.php?id=89

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航