今日笔记----Dom！！！

Dom:

• 基于元素节点树得遍历：
• ParentElement:返回当前元素的父元素节点【ie不兼容】 Child:只返回当前元素的元素子节点
  Node.childElementCount === node.children.length当前元素节点的子元素节点个数（iE不兼容）
  FirstElementChild—返回的是第一个元素节点（IE不兼容）
  lastElementChild—返回的是最后一个元素节点（IE不兼容）
  nextElementSibling/previousElenmentSibling—返回后一个/前一个兄弟元素节点（iE不兼容）

节点的类型:

节点的类型	num
元素节点	1
属性节点	2
文本节点	3
注释节点	8
Document	9
DcumentFragment	11

获取节点类型 nodeTYpe

节点的四个属性	描述
nodeName	元素的标签名，以大写形式表示，只读
nodeValue	Text节点或Comment节点的文本内容，可读写
Node Type	该节点的类型，只读
attributes	 Element节点的属性集合
节点的一个方法	node.hasChildNodes()

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、querySlector在Document.prototype,Element.prototype类中均有定义

增：
Document.createElement();---------创建一个元素节点
Document.createTextNode();-------创建文本节点
Document.createCommen();--------创建注释节点
Document.createDocumentFragment();

插：
PARENTNODE.appendChild();-----增加子节点
PARNTNODE.insertBefore（a,b）;在某个元素前面添加一个标签

删：
Parent.removeChild();------删除子节点
Child.remove();------剪切标签

替换:
Parent.replaceChild(new,origin);----拿新的还老的
setAttribute();-----设置行间属性的值
getAttribute();-----取行间属性的值

insertafter封装：

<script>
		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 i = document.getElementsByTagName('i')[0];
		  var span = document.getElementsByTagName('span')[0];
		  var p = document.createElement('p');
</script>