dom继承树，dom基本操作

一.dom继承树

dom结构树---原型继承关系

document.proto-->HTMLDocument.prototype-->Document.prototype-->Node.prototype-->EventTarget.prototype-->Object.prototype

二.dom继承规则

1. getElementById方法定义在Document.prototype上，即Element节点上不能使用
2. getElementsByName方法定义在HTMLDocument.prototype上，即非html中的document不能使用(xml document,Element)
3. getElementsByTagName方法定义在Document.prototype和Element.prototype上

//html

    


//js
var div = document.getElementsByTagName('div')[0];
var span = div.getElementsByTagName('span')[0];

4. HTMLDocument.prototype定义了一些常用的属性，body,head分别指代HTML文档中的标签。
   document.body-->
   document.head-->
5. Document.prototype上定义了documentElement属性，指代文档的根元素，在HTML文档中，他总是指代元素。
   document.documentElement-->
6. getElementsByClassName、querySelectorAll、querySelector在Document.prototype,Element.prototype类中均有定义

三.dom基本操作

1. 增

• document.createElement();创建元素节点
• document.createTextNode();创建文本节点
• document.createComment();创建注释节点
• document.createDocumentFragment();

2. 插

• PARENTNODE.appendChild();插入子节点。
  已存在的节点进行插入别的位置，实际上是先剪切，再插入要插入的位置。
  任何一个元素节点都有此方法，类似于push
• PARENTNODE.insertBefore(a, b);由a与b的父元素调用，将a元素插入到b元素之前

3. 删

• parent.removeChild();相当于剪切下来
• child.remove();

4. 替换

• parentNode.replaceChild(new, origin);

四.Element相关属性，方法

1. Element节点的一些属性

• innerHTML
  可取可写
  div.innerHTML;取出div元素之间的内容
  div.innerHTML=xxxxxxx;可以直接写入内容，覆盖。
• innerText(火狐不兼容)/textContent(老版本IE不好使）
  div.innerText;只取文本标签，也可写入覆盖。

2. Element节点的一些方法

• ele.setAttribute();设置属性
  div.setAttribute('class','demo');
  -->
  ...
• ele.getAttribute();获取行间属性值
  
  ...
  
  div.getAttribute('id');
  --->"only"