遍历DOM精简实现

标签: JavaScript JavaScript DOM

在不用框架/库(jQuery/mootools)前提下,用比较精简代码实现遍历DOM树。

 1 function travel(node, fn){
 2     var next = node.firstChild;
 3     while ((node = next)) {
 4         fn && fn(node);
 5         next = node.firstChild || node.nextSibling;
 6         while (!next && (node = node.parentNode)){
 7             next = node.nextSibling;
 8         }
 9     }
10 }
11 //打印出所有的p标签
12 travel(document.body, function(node){
13     if(node.nodeName.toLowerCase() == 'p'){ 
14         console.log(p);
15     }
16 });
17 //模拟getElementsByTagName
18 function getElementsByTagName(node, tagName){
19     var  i = 0,
20          result, 
21          elements = [], 
22          everyTag = !tagName || (tagName === '*');
23 
24     !everyTag && (tagName = tagName.toLowerCase()); 
25     travel(node, function(node){
26         if(node.nodeType === 1 && everyTag 
27                || node.nodeName.toLowerCase() === tagName){
28             elements[i++] =  node;
29         }
30     });
31 
32     result = elements.slice(0);//拷贝一份
33     elements = null;//因travel函数形成一个闭包引用到elements,所以应该将elements设置为null,防止内存泄露
34     return result;
35 }
留言板
comments powered by Disqus