Web前端的知识之旅哟——DOM的基础练习代码

上一篇介绍了一下DOM的一些基础的知识,这里我整理了一些有关上一篇知识点的一些封装函数。

1.遍历元素节点树


1. function retChild(node) {
2.       var child = node.childNodes,
3.             len = child.length;
4.       for(var i = 0; i < len; i++){
5.             if(child[i].nodeType === 1) {
6.                   console.log(child[i]);
7.                   child[i].hasChildNodes() && retChild(child[i]);
8.             }
9.       }
10. }  
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

2.封装函数,返回元素e的第n层父节点


1. function retParent(e, n) {
2.       var n = n || 0; // 进行简单的容错检测
3.       if(n === 0) {
4.             return e;
5.       }
6.       for(var i = 0; e && i < n; i++) {
7.             e = e.parentNode;
8.       }
9.       return e;
10. }  
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

3.封装函数,返回元素e的第n个兄弟元素节点,如果n为正,返回后面的兄弟元素节点,n为负,返回前面的,n为0,返回自己


1. function retSibling(e, n){
2.       var n = n || 0;
3.       if(n === 0) {
4.             return e;
5.       }
6.       while(e && n != 0) {
7.             if(n > 0) {
8.                   if(e.nextElementSibling){ // 如果不是ie浏览器
9.                         e = e.nextElementSibling;
10.                   }else { // 如果是ie浏览器
11.                         e = e.nextSibling;
12.                         while(e && e.nodeType != 1) {
13.                               e=e.nextSibling;
14.                   }
15.            }
16.            n–;
17.       }else {
18.             if(e.previousElementSibling) {
19.                  e = e.previousElementSibling;
20.             }else {
21.                   e = e.previousSibling;
22.                   while(e && e.nodeType != 1) {
23.                   e=e.previousSibling;
24.                   }
25.            }
26.            n++;
27.            }
28.       }
29.       return e;
30. }  
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

4.封装函数,实现children功能,最好哎原型链上编程


1. Element.prototype.getChildren() {
2.       var child = this.childNodes,
3.             len = child.length,
4.       obj = {
5.             ‘length’: 0,
6.             ‘push’: Array.prototype.push
7.       }
8.       for(var i = 0; i < len; i++){
9.             if(child[i].nodeType === 1) {
10.                   obj.push(child[i]);
11.             }
12.       }
13.       return obj;
14. }  
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

5.封装是否有元素子节点的方法


1. Element.prototype.hasChildren = function () {
2.       var child = this.childNodes,
3.             len = child.length;
4.       for( var i = 0; i < len; i++){
5.             if(child[i].nodeType == 1) {
6.                   return true;
7.             }
8.       }
9.       return false;
10. }  
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

上面的代码都是我自己写的,可能有些地方不是最优的解法,大家看看就好~