js总结 （6） DOM操作 节点元素 遍历树

DOM，主要用来修改HTML的标准编程接口，可以用来修改各种html标签内容 和属性 样式。

查找：

document： 整个文档。 

document.getElementsByTagName

document.getElementById

document.getElementsByClassName

   遍历节点：

var div=document.getElementsByClassName('con')[0];

div.parentNode-> 父节点  (最顶端的parentNode为#document);
遍历元素：

div.children 遍历所有的子元素（孙子就不算）这就是一个对象，可以.length属性

获取节点类型：div.firstElementChild.nodeType

 

.......................总结............................

     节点                   元素节点

div.parentNode;      div.parentElement;
.childNodes                 .children
.firstchild;                    .firstElementChild;
.lastchild;                     .lastElementchild;
.nextSibling;                .nextElementSibling;
.previousSibling          .prevElementSibling;

节点的类型

元素节点 —— 1
属性节点 —— 2
文本节点 —— 3
注释节点 —— 8
document —— 9
DocumentFragment —— 11
获取节点类型 nodeType

 习题

  1. 封装函数，返回元素e的第n层祖先元素

var strong=document.getElementsByTagName('strong')[0];
    
    function retparent(elem,n) {
      
    while(elem && n){
       
        elem = elem.parentElement;
        n--;

      }
        return elem;
    } 
    retparent(strong,4);

2.遍历元素节点树

 1. 这个方法只能查到 儿子节点

var div=document.getElementsByTagName('div')[0];
    var arr=[];
    arr.push(div.children);

 2.儿子孙子一起遍历

    var div=document.getElementsByTagName('div')[0];
    var child = div.firstChild;

  while(child != div.lastChild){  //判断是否是最后一个
    if(child.nodeType == 1){      //判断是不是元素节点
        console.log( child );
    }
    child = child.nextSibling;
}

3. 兼容性  一起遍历

var div=document.getElementsByTagName('div')[0];
var child = div.firstElementChild;     //这是返回第一个元素节点  next就是下一个 孙子也可以返回

while(child){
    console.log( child );
    child = child.nextElementSibling;
}

var s=div.firstElementChild;
for (var i = 0 ; i <div.children.length; i++) {

    console.log(s);
    s=s.nextElementSibling;
}

3.查找e的第n个兄弟元素。

    var strong=document.getElementsByTagName('strong')[0];
      function retSibling(e,n) {
        while(e && n){
            if(n>0){
                e=e.nextElementSibling;
                n--;

            }else{
                e=e.previousElementSibling;
                n++;

            }
        }
          return e;
        }  

 4.封装函数insertAfter() 类似于  insertBefore()

var i=document.getElementsByTagName('i')[0];
    var p=document.getElementsByTagName('p')[0];
    var div=document.getElementsByTagName('div')[0];

    Element.prototype.insertAfter = function(targetNode,OriginNode) {

         var afterS=OriginNode.nextElementSibling;
        if (afterS==null) {
             this.appendChild(targetNode);
        }else{
        this.insertBefore(targetNode,afterS);}

    };

5. 将目标节点内的节点顺序逆序

    var p=document.getElementsByTagName('p')[0];
    var div=document.getElementsByTagName('div')[0];
    function reverse(a) {
         for (var i =a.children.length-2; i >=0; i--) 
         {
            a.appendChild(a.children[i])
  }
    }
 

 

创建

var div = document.createElement('div');
        div.style.background="red";
        div.style.width="100px";
        div.style.height="100px";
        document.body.appendChild(div);