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，返回自己

  function retSibling(e, n){
        var n = n || 0;
        if(n === 0) {
              return e;
        }
        while(e && n != 0) {
              if(n > 0) {
                    if(e.nextElementSibling){ // 如果不是ie浏览器
                          e = e.nextElementSibling;
                    }else { // 如果是ie浏览器
                          e = e.nextSibling;
                          while(e && e.nodeType != 1) {
                                e=e.nextSibling;
                    }
             }
             n–;
        }else {
              if(e.previousElementSibling) {
                   e = e.previousElementSibling;
              }else {
                    e = e.previousSibling;
                    while(e && e.nodeType != 1) {
                    e=e.previousSibling;
                    }
             }
             n++;
             }
        }
        return e;
  }

JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

posted @ 2018-11-22 14:34  Panda-Q  阅读(486)  评论(0)  编辑  收藏  举报