1、DOM中的所有節點都繼承自Node類型，IE9之前將DOM節點作為COM對象來實現；每個DOM節點都有一個nodeType屬性來表明節點類型，總共有12個類型：
1 Node.ELEMENT_NODE 2 Node.ATTRIBUTE_NODE 3 Node.TEXT_NODE 4 Node.CDATA_SECTION_NODE 5 Node.ENTITY_REFERENCE_NODE 6 Node.ENTITY_NODE 7 Node.PROCESSING_INSTRUCTION_NODE 8 Node.COMMENT_NODE 9 Node.DOCUMENT_NODE 10 Node.DOCUMENT_TYPE_NODE 11 Node.DOCUMENT_FRAGMENT_NODE 12 Node.NOTATION_NODE
其中，1、2、3、9、10、11最常用，要確定某種元素類型可以使用以下方法：
elementNode.nodeType === Node.ELEMENT_NODE // 非IE,IE9以下無法訪問Node類型 elementNode.nodeType === 1 // 所有瀏覽器
2、以下方法返回的都是原生的NodeList對象
1 elementNode.childNodes 2 document.getElementsByName() 3 document.getElementsByClassName() 4 document.getElementsByTagName() //返回HtmlCollection對象，與NodeList類似，多了一個namedItem('name')方法 5 document.getElementsByTagNameNS()
NodeList是一種類數組對象，有length屬性，但並不是Array的實例，訪問NodeList中的節點對象可使用item方法或[]語法。每次訪問NodeList對象實際上都是重新進行一次查詢，因此通常可以將NodeList轉化為數組對象。
1 function nl2array(nodeList){ 2 var array = null; 3 try{ 4 array = Array.prototype.slice.call(nodeList, 0);// FF 5 }catch(){ 6 array = []; 7 for (var i = 0, len = nodeList.length; i < len; i++){ 8 array.push(nodeList[i]); 9 } 10 } 11 return array; 12 }
3、操作DOM節點有以下的方法：
1 // appendChild 講解點添加到末尾，若該節點已在DOM結構中，則將其重新放置 2 var node = elementNode.appendChild(newNode); 3 node === newNode; // true 4 var node2 = elementNode.appendChild(otherNode.firstChild); 5 node2 === elementNode.lastChild; // true 6 node2 === otherNode.firstChild; // false
1 //insertBefore,將節點插入到某一節點前面 2 var node = elementNode.insertBefore(newNode, null); 3 node === elementNode.lastChild; // true 4 var node2 = elementNode.insertBefore(newNode, elementNode.firstChild); 5 node2 === elementNode.firstChild;// true
1 // replaceNode 使用新節點替換舊子節點，返回被替換節點 2 var node = elementNode.replaceChild(newNode, elementNode.lastChild);
1 // removeChild,想要刪除某節點必須通過該節點的父級元素 2 var node = elementNode.removeChild(elementNode.firstChild); 3 elementNode.parentNode.removeChild(elementNode);
1 //cloneNode，該方法只會復制元素中的html特性， 2 //IE中有一bug，他會復制元素的事件處理程序，在使用該方法時最好將事件處理程序去掉 3 var node = elementNode.cloneNode(true); 4 node.childNodes.length > 0 // true 5 var node1 = elementNode.cloneNode(false); 6 node1.childNodes.length === 0 //false
4、document對象是HTMLDocument類型的實例，所有瀏覽器中都可以訪問HTMLDocument類型的構造函數和原型。document中訪問子節點有如下快捷方式：
1 document.documentElement // 指向<html>元素 2 document.body // 指向body元素 3 document.doctype //指向<!DOCTYPE>的引用，IE8之前將該元素當做Node.COMMENT_NODE類型，IE9、FF、Chrom將該元素作為document的第一個子節點 4 document.head || document.getElementsByTagName('head') //HTML5中新加的屬性
5、document.getElementById('id')，IE8及較早版本中不區分id的大小寫；IE7及早期版本中有bug:
1 <input type="text" name="element" /> 2 <div id="element"></div> 3 // 元素a擁有name與某元素b的id重復，且在a在b之前，則調用該方法會返回a元素 4 document.getElementById('element'); // input元素
6、所有HTML元素都是HTMLElement類型的實例，繼承自Element類，比如：HTMLBodyElement、HTMLFormElement、HTMLFrameElement等，除IE外的瀏覽器都可以訪問這些類型的構造函數及原型。IE中將comment節點作為element類型的派生類，因此調用document.getElementsByTagName('*')會將comment節點一並返回。
7、html元素有Attribute（特性）跟Property（屬性）的區分。
操作特性的方法主要有getAttribute()、setAttribute()、removeAttribute()，這三個方法可以操作以HTMLElement類型屬性形式定義的特性(id、class、title、lang、dir)，和自定義屬性。如：<div id="element" myAttr="myself"></div> element.getAttribute("myAttr")。
屬性是指該元素作為javascript對象，除以上特性外一切可以通過點語法訪問的屬性，如innerHTML、nodeType等。
特性可以出現在html元素聲明中，屬性不可以(出了也沒用)；特性可以通過css屬性選擇符語法來查詢元素，屬性不可以
8、element.attributes屬性是一個NamedNodeMap對象，與NodeList類似。該屬性返回所有在element中聲明的特性，IE中會返回所有可能的特性，但在聲明的特性中有一個specified屬性，該屬性為true則為以聲明特性。
9、IE9之前不會解析文本之間的空白節點，如下：
1 <ul id="mylist"> 2 <li>li1</li> 3 <li>li2</li> 4 <li>li3</li> 5 </ul> 6 mylist.childNodes === 3; //IE8 7 mylist.childNodes === 7; //FF
如果只想訪問元素子節點可以使用如下api：
1 childElementCount //返回子元素節點個數 2 firstElementChild //第一個元素子節點 3 lastElementChild //最后一個元素子節點 4 previousElementSibling //前一個兄弟元素 5 nextElementSibling //后一個兄弟元素 6 children //返回所有的元素子節點