常用dom方法封装

// 封装一个方法能够在元素后面插入dom元素 （在原型链上编程）

 

<div>
    <span></span>
    <p></p>
    <strong></strong>
    <i></i>
    <address></address>
</div>

　　

 

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 strong=document.getElementsByTagName('strong')[0];
var p=document.getElementsByTagName('p')[0];
var ul=document.createElement('ul');

div.appendChild(ul)
Element.prototype.insertAfter=function(targetNode,afterNode){
　　var beforeNode=afterNode.nextElementSibling;
　　if(beforeNode==null){
　　　　this.appendChild(targetNode)
　　}else{
　　　　this.insertBefore(targetNode,beforeNode);
　　} 
}

var li=document.createElement('li');
div.insertAfter(li,strong)

 

// 遍历元素节点树（在原型链上编程）

var a=[];
Element.prototype.allElements=function(){
          
          var dom=this
          for(var i=0;i<dom.children.length;i++){
              a.push(dom.children[i])
              if(dom.children[i].hasChildNodes()){
                  // console.log(this.children[i].children[i])

                   dom.children[i].allElements();
              }
               
               
          }
       return a;

    }

console.log(div.allElements())