前端知识点分享3--DOM操作

首先先要知道我们必须要明白的节点类型的值
1---元素类型
2---元素的属性类型
3--元素的值类型
4--cdata注释类型
8--注释
9--文档类型

操作节点属性
nodeType
nodeName
nodeValue
parentNode

常规跨浏览器的原声dom选择器
在操作节点的时候注意各浏览器对空文本节点的处理，ie是忽略的（childNodes）
一、document.getElementById()    根据Id获取元素节点
二、document.getElementsByName()    根据name获取元素节点
三、document.getElementsByTagName()    根据HTML标签名获取元素节点，注意getElements***的选择器返回的是一个NodeList对象，能根据索引号选择其中1个，可以遍历输出。

h5新增dom选择器
document.getElementsByClassName()    根据class获取元素节点

类css选择器
document.querySelector()
document.querySelectorAll()

文档结构和遍历
    1、parentNode    获取该节点的父节点    
    2、childNodes    获取该节点的子节点数组注意低版本的处理
    3、firstChild    获取该节点的第一个子节点
    4、lastChild    获取该节点的最后一个子节点
    5、nextSibling    获取该节点的下一个兄弟元素
    6、previoursSibling    获取该节点的上一个兄弟元素
    7、nodeType    节点的类型，9代表Document节点，1代表Element节点，3代表Text节点，8代表Comment节点，11代表DocumentFragment节点
    8、nodeVlue    Text节点或Comment节点的文本内容
    9、nodeName    元素的标签名(如P,SPAN,#text(文本节点),DIV)，以大写形式表示

H5新增的节点识别，统一文本节点处理（IE9之前不会返回节点的文本节点，这样会对firstChild以及childNodes属性的使用产生影响--摘自javascript高级程序设计）
    1、firstElementChild        第一个子元素节点
    2、lastElementChild        最后一个子元素节点
    3、nextElementSibling        下一个兄弟元素节点
    4、previousElementSibling    前一个兄弟元素节点
    5、childElementCount        子元素节点个数量
  h5还新增document.createNodeIterator document.createTreeWalker(相比nodeIterator 更加高级，不仅仅只有nextNode,previosNode还包括parentNode,nextSibling,previousSibiling,firstNode,lastNode)

javascript操作DOM节点的属性
   
    getAttribute();  
    setAttribute();

    1、innerText、textContent    innerText与textContent的区别，当文本为空时，innerText是""，而textContent是undefined
    2、innerHTML和outHTML
 //注意火狐浏览器不支持innerText，但是所有的浏览器基本都支持textContent
outHTML是包含所操作节点本身
innerHTMl所操作节点内部的html元素

创建，插入，删除节点
    document.createTextNode()    创建一个文本节点
新建文档碎片有利于提高性能，减少对文档的重排
    document.createDocumentFragment();
创建一个元素节点
document.createElement()   
在节点后面插入一个新的节点
document.appendChild();
document. insertBefore();
removeChild();    由父元素调用，删除一个子节点
replaceChild()    //删除一个子节点，并用一个新节点代替它，第一个参数为新建的节点，第二个节点为被替换的节点