前言：

html為document搭建了一棵DOM樹，這棵樹就是有一系列Node節(jié)點所構(gòu)成的。他為我們定義了文檔的結(jié)構(gòu)。

Node類型：

Node.ELEMENT_NODE(1);      //元素節(jié)點較常用
Node.ATTRIBUTE_NODE(2);    //屬性節(jié)點較常用
Node.TEXT_NODE(3);          //文本節(jié)點較常用
Node.CDATA_SECTION_NODE(4);
Node.ENTITY_REFERENCE_NODE(5);
Node.ENTITY_NODE(6);
Node.PROCESSING_INSTRUCTION_NODE(7);
Node.COMMENT_NODE(8);
Node.DOCUMENT_NODE(9);   //文檔節(jié)點較常用
Node.DOCUMENT_TYPE_NODE(10);
Node.DOCUMENT_FRAGMENT_NODE(11);
Node.NOTATION_NODE(12);

相關(guān)函數(shù)：

1、取得節(jié)點：

 document.getElementById('element');
 document.getElementsByTagName('element');         返回類數(shù)組對象
 document.getElementsByName('element');            返回類數(shù)組對象
 document.getElementsByClassName('className')      返回類數(shù)組對象,IE7及以下并不支持；
 document.querySelectorAll('class' | 'element')    返回類數(shù)組對象

2、遍歷節(jié)點

 查找子節(jié)點：element.childNodes        返回類數(shù)組對象
 查找第一個子節(jié)點：element.firstChild
 查找最后一個子節(jié)點：element.lastChild
 查找父元素：element.parentNode
 查找前一個兄弟元素： element.previousSibling
 查找后一個兄弟元素： element.nextSibling

3、獲取節(jié)點信息

 獲取元素或者屬性節(jié)點的標(biāo)簽名稱：elementNode.nodeName
 獲取文本節(jié)點的內(nèi)容：    textNode.nodeValue;
 獲取并設(shè)置元素節(jié)點的內(nèi)容(可能會包含HTML標(biāo)簽)：  elementNode.innerHTML
 獲取并設(shè)置元素節(jié)點的純文本內(nèi)容：element.innerText(IE) | element.textContent(FF) 
 獲取屬性節(jié)點的值：      attrNode.getAttribute(AttrName);
 設(shè)置屬性節(jié)點的值：      attrNode.setAttribute(AttrName,AttrValue);
 獲取節(jié)點的類型：        node.nodeType;
  元素節(jié)點： 1；
  屬性節(jié)點： 2；
  文本節(jié)點： 3；
  文檔節(jié)點： 9；
  注釋節(jié)點： 8；

4、操作節(jié)點

 創(chuàng)建元素節(jié)點：       document.createElement('element');
 創(chuàng)建文本節(jié)點：       document.createTextNode('text');
 創(chuàng)建屬性節(jié)點：       document.createAttribute('attribute');
 刪除節(jié)點：               node.remove();
 刪除子節(jié)點：           parentNode.removeChild(childNode);
 插入節(jié)點：               parentNode.appendChild(childNode);  //插入到父節(jié)點的尾部
                             parentNode.insertBefore(newNode,existingNode)  //插入到已存在節(jié)點的前面；
 克隆節(jié)點：               node.cloneNode([true])     //傳入true為深度復(fù)制
 替換節(jié)點：               parentNode.replaceChild(newNode,oldNode);

相關(guān)拓展：

1、由于IE低版本瀏覽器和其他瀏覽器在處理DOM中存在不兼容，因此要做一些簡單的封裝處理。

 //=================function getElementChildren(element) {   var children = [],   oldChildNodes = element.childNodes;   for(var i=0, len=oldChildNodes.length; i<len; i+=1) {     if(oldChildNodes[i].nodeType == 1) {        children.push(oldChildNodes[i]);     }   } return children;} //==================function getElementNext(element) {   var next = element.nextSibling || null;     if(next) {       if(next.nodeType == 1) {          return next;       } else {          return arguments.callee(next);       }     } else {     throw new Error("下一個兄弟元素不存在！");     }} //======================function getElementPrev(element) {   var prev = element.previousSibling || null;   if(prev) {     if(prev.nodeType == 1) {       return prev;     } else {       return arguments.callee(prev);     }   } else {     throw new Error("上一個兄弟元素不存在！");   }} 

2、操作DOM元素的樣式
 

//=========================function getElementStyle(element,styleName) {   if(typeof getComputedStyle != 'undefined') {     return getComputedStyle(element,null)[styleName];   } else {     return element.currentStyle[styleName];   }} //==========================function addClass(element,className) {   element.className += className;} //==========================function removeClass(element,removeClassName) {   var classStr = element.className;   element.className = classStr.replace(removeClassName,'').split(//s+/).join(' ').replace(/^/s+/,'').replace(//s+$/,'');}

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。