选项卡，dom基础和几个方法

1.选项卡

<div class="wrapper">
         <button class="active">姓名</button>
         <button>年龄</button>
         <button>住址</button>
         <div class="content" style="display:block">张三</div>
         <div class="content">18</div>
         <div class="content">南极</div>
 </div>

     var div = document.getElementsByTagName('div');
       var btn = document.getElementsByTagName('button');
       var div = document.getElementsByClassName('content');
       
      for(var i=0;i<btn.length;i++)
       {
         (function(n){
            btn[n].onclick=function(){ for(var j=0;j<btn.length;j++)
           {
               btn[j].className="";
               div[j].style.display="none";
           }
           this.className="active";
           div[n].style.display="block";
        }
         })(i)
       }

选项卡 .wrapper div{
 width:100px;
 height:100px;
 border:1px solid red;
 display:none;
}
.active{
    background-color:yellow;
} 

2.

 返回元素e的第n层元素祖先节点
     var p=document.getElementsByTagName('p')[0];
    function retParent(elem,n){
       while(n && elem)
       {
           elem=elem.parentElement;
           n--;
       }
       return elem;
    }
    封装myChildren功能解决浏览器的不兼容问题
   var div = document.getElementsByTagName('div')[0];
   function myChildren(e){
      var obj=[];
      var child=e.childNodes;
      var len=child.length;
      for(var i=0;i<len;i++)
      {
          if(child[i].nodeType==1)
          {
              obj.push(child);
          }
      }
      return obj;
   }
  封装hasChildren方法不能使用children,有子元素节点返回true没有返回false
   var div = document.getElementsByTagName('div')[0];
function hasChildren(e){
  var child=e.childNodes;
  var len=child.length;
  for(var i=0;i<len;i++)
  {
      if(child[i].nodeType==1)
      {
          return true;
      }
      
  }
  return false;
}
 封装函数返回e的第n个兄弟节点，n为正返回后面的兄弟元素节点，n为负返回前面的n为0返回自己
 function retSibling(e,n)
 {
     while(n && e)
     {
         if(n>0)
         {
            if(e.nextElementSibling)
            {
                e=e.nextElementSibling;
            }else                           //解决nextElementSibling不兼容问题
            {
                for(e=e.nextSibling;e && e.nodeType!=1;e=e.nextSibling);
            }
            n--;
         }else{
            if(e.previousElementSibling)
            {
                e=e.previousElementSibling;
            }else
            {
                for(e=e.previousSibling;e && e.nodeType!=1;e=e.previousSibling);
            }
            n++;
         }
     }
     return e;
 }

3.    //  封装insertAfter方法类似insertBefore  -->实现思想 找到他的下一个兄弟节点，利用insertBefore插进去

	<div>
    <em></em>
    <span></span>
    <i></i>
</div>

 <script type="text/javascript">
  Element.prototype.insertAfter=function(targetNode,afterNode){
      var beforeNode=afterNode.nextElementSibling;
       if(beforeNode == null){
           this.appendChild(targetNode);
       }else{
        this.insertBefore(targetNode,beforeNode);
       }
      
     }
   var div = document.getElementsByTagName('div')[0];
   var p = document.createElement('p');
   var span = document.getElementsByTagName('span')[0];

 </script>

以上相关知识

1.DOM定义了表示和修改文档所需的方法，DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合，也有人称DOM是对Html以及xml的标准编程接口

2.document代表整个文档（不叫元素，自成一个节点，是html的父级）

3.document.getElementById()元素id在ie8以下的浏览器不区分id大小写,而且也返回匹配name属性的元素（就是name的名字也在里面也可以返回）

4.getElementsByTagName()标签名

5. getElementsByName()只有部分标签name可生效（表单，表单元素，img ,iframe）

6.getElementsByClassName()类名ie8和ie8以下版本没有，可以多个class一起

7.querySelector()css选择器，在ie7和以下版本没有，选择单个

8.querySelectorAll()css选择器在ie7和以下版本没有  ，选择全部   这两个css选择器致命缺点实时性差，不能实时更新

二.遍历节点树 (任何情况都兼容)

1.parentNode --->父节点最顶端的parentNode为#doucment

2.childNodes -->子节点们

3.firstChild-->第一个子节点

4.lastChild-->最后一个子节点

5.nextSibling-->后一个兄弟结点previousSibling-->前一个兄弟节点

三，基于元素节点树的遍历（除了children都是ie9以下不兼容）

1.parentElememt ->返回当前元素的父节点节点

2.children->只返回当前元素的元素子节点

3.node.childElementCount (求的是子元素节点的个数)==== node.children.length当前元素节点的子元素的个数

4.firstElementChild ->返回的是第一个元素节点

5.lastElementChild->返回的是最后一个元素节点

6.nextElementSibling / previousElementSibling->返回后一个，前一个兄弟元素节点

四.节点的四个属性

  1.nodeName :元素的标签名，以大写形式表示，只读（只能读取，不能写入）

  2.nodeValue :Text（文本）节点或Comment（注释）节点的文本内容，可读写

3.nodeType ：该节点的类型，只读 ---->  返回下面节点类型的数字

4.attributes :Element（属性）节点的属性集合  （可以更改属性值）

 hasChildNodes看他有没有孩子节点

节点的类型  元素节点  ----1    属性节点（例如class  id等） ----2  文本节点----3  注释节点---8 doucment---9    documentFragment ---11

增删改查

1.document.createElement();--> 创建元素节点

2.document.createTextNode() -->创建文本节点

3.document.createComment()-->创建注释节点

4.doucment.createDocumentFragment(); -->创建文档碎片节点

插: parentNode.appendChild(); 剪切过来插进去

 parentNode.insertBefore(a,b);把a插入b的前面

删

Parent.removeChild(); 这个删除会有返回值

child.remove() -->直接删除不会有返回值

替换

Parent.replaceChild(new,origin)拿新的元素去替换旧的 相当于剪切出来了

七，Element节点的一些属性

innerHtml 能改变里面的html内容 想要取值就div.innerHtml ---给他赋值的话他会把里面的东西覆盖，里面也可以写css

 如果想要追加就div.innerHtml += “456”;

innerText(火狐不兼容)/textContent(老版本ie不好使)-->可以取和写他的文本内容 

八，element节点的一些方法

1.div.setAttribute(‘class’,’demo’)div上就会被设置一个class=“demo”;      2.ele.getAttribute(‘id’);可以取id值