在不用框架/库(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 }