Dom继承树，Element相关

一、dom继承树
1、dom结构树:

2、dom基本操作：
查：
<1>getElementById方法定义在Document.prototype上，即Element节点上不能使用。
<2>getElementByName方法定义在HTMLDocument.prototype上，即非HTMLdocument不能使用（xmldocument，element）。
<3>getElementByTagName方法定义在Document.prototype和Element.prototype上。
<4>HTMLDocument.prototype定义了一些常用属性，body，head分别指文档中得标签。
<5>Document.prototype上定义了documentElement属性，指代文档的根元素HTML文档中，他总是指代元素。
<6>getElementsByClassName、querySelectAll、querySelector在Document.prototype，Element.prototype类中均有定义。

增：
附：将创建好的div加入容器:document.body.appendChild（div);
<1>创建一个元素节点（标签）如：div，代码：var div = document.createElement(‘div’);
<2>创建一个文本节点，代码如：var text = document.createTextNode(‘小雷’);
<3>创建一个注释节点，代码如：var comment = document.createComment(‘this is comment’);
<4>创建一个文档碎片节点，document.createDocumentFragment();

插：
<1>appendChild(),如：
var div = document.getElementByTagName(‘div’)[0];
var span = document.createTextNode(‘span’);
div.appendChild(text);
附：appendChild(),其实与push()很类似。且为剪切操作。
<2>insertBefore(a,b),如：
div.insertBefore(strong,span);//意义：div insert strong before span,即在div作为父级的前提下，
在span之前插入strong。

删：
<1>parent.removeChild();
如:div.removeChild(i); //其实是剪切
<2>child.remove();
如:i.remove();//真正的删除

替换：
<1>parent.replaceChild(new,orgin);

二、Element节点
1、Element节点的一些属性
<1>innerHTML
div.innerHTML //改变div里面的html内容
如：取：div.innerHTML
写入（覆盖）：div.innerHTML = ‘123’;
追加：div.innerHTML += ‘456’;
<2>innerText（或互不兼容）/textContent（老版本IE不好使）
如： 写入（覆盖）：div.innerText = ‘123’;
2、Element节点的一些方法
<1>ele.setAttribute();
如：div.setAttribute(‘class’,‘demo’); //即给div加上一个class等于demo
<2>ele.getAttribute();
如：div.getAttribute(‘class’); //即从div取出class的值
附：dom.className可以读写class，如：div.className="adsa"或div.id=“ayfga”。
附：在 HTML DOM 中，Element 对象表示 HTML 元素。Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。