dom继承树，dom基本操作

dom结构树

document -->HTMLDocument.prototype-->Document.prototype
document.body --> ~~
document.head --> ~
document.documentElement-->--

dom基本操作

1.getElementByID方法定义在Document.prototype上，即Element节点上不能使用
2.getElementByName方法定义在HTMLDocument.prototype上，即非html中的document不能使用（xml document Element）
3.getElementByTagName方法定义在Document.prototype和Element.prototype上
4.HTMLDocument.prototype定义了一下常用的属性，body，head，分别指代HTML文档中的标签
5.Document.prototype上定义了documentElement属性，指代文档的根元素，在HTML文档中，他总是指代元素
6.getElementByClassName，querySelectorAll , querySelector在Document.prototype, Element.prototype类中均有定义

• 封装函数，返回元素e的第n层祖先元素节点

      
                
                      
                
       

function retParent(elem,n){
      while(elem&n){
          elem = elem.parentElement;
          n --;
      }
     return elem;
}
var i = document.getElementByTagName('i')[0];

• 封装函数,返回元素e的第n个兄弟元素节点，n为正，返回后面的兄弟元素节点，n为负，返回前面的，n为0，返回自己。

    
    

    
    
    


function retSibling(e,n){
    while(e&&n){
       if(n>0){
          e = e.nextElementSibling;
          n --;
        }else{
          e = e.previousElementSibling;
          n ++;
        }
      }
      return e;
  }

增
document.createElement();创建元素
document.createTextNode();创建文本
document.createComment();创建注释
document.createDocumentFragment();
插
parentNode.appendChild();剪切
parentNode.insertBefore(a,b);insert a before ba在b前面

    
    
    
  
i 和strong是后加的  span和 div是原始的  被选的
var div = document.getElementByTagName('div')[0];
var span = document.getElementByTagName('span')[0];
div.appendChild(span);
var strong = document.createtElement('strong');
var i = document.createElement('i');
div.insertBefore(strong,span);
div.insertBefore(i,strong);

删
parent.removeChild();剪切
child.remove();删除
替换
parent.replaceChild(new,origin);

• Element节点的一些属性
  innerHTML获取内容 或者写入东西覆盖原本的内容 div.innerHTML = "123";
  innerText(火狐不兼容)/textContent(老版本IE不好使)
  Element节点的一些方法
  ele.setAttribute('class','example');为元素设置行间属性
  div.setAttribute('id','only')
  ele.getAttribute();
  div.getAttribute('id'); -->only
• 如果要改的话 直接div.className='' div.id=''

     hehe

var  a = document.getElementByTagName('a')[0];
a.onclick = function(){
   console.log(this.getAttribute('data-log'));
}





var  all = document.getElementByTagName('*');
for (var i = 0 ; i

• 封装函数insertAfter(); 功能类似insetBefore();

    
    
    

Element.prototype.insertAfter = 
function(targetNode,  afterNode){
var beforeNode = afterNode.nextElementSibling;
      if(beforeNode == null){
        this.appendChild(targetNode);
       }else{
       this.insertBefore(targetNode,beforeNode);
      }
}
var b = document.getElementsByTagName('b')[0];
var div = document.getElementsByTagName('div')[0];
var span = document.getElementsByTagName('span')[0];
var p = document.createElement('p');