DOM（一）——簡介

最近快要去找實習了，準備複習一波DOM，同時整理一下資料，希望對大家也有幫助。

DOM是什麼？

document object model又稱爲DOM，意思是文檔模型。我們編寫的HTML都是通過構造一顆樹的層次結構（DOM Tree），然後通過呈現樹（Render Tree）使之可視化的。
瀏覽器在加載HTML文檔時，會先解析這一層次結構並創建一顆節點對象樹，從而模擬這些標記文本的封裝方式。
DOM的目的是使用JavaScript操作（刪除、添加、替換、創建或修改事件）當前文檔。

---

爲什麼JavaScript可以操作DOM？

典型DOM樹中的所有節點對象都繼承了JavaScript中的Node屬性和方法（所有的節點對象類型都繼承自Node）。
Node繼承自Object.prototype。
節點對象類型共有18種，我們常用來操作（要記住）的是前三種。

//這段代碼可以查詢所有的節點類型
<script>
    for(var key in Node){
        console.log(key,'='+Node[key])
    }
</script>

ELEMENT_NODE =1
ATTRIBUTE_NODE =2
TEXT_NODE =3
CDATA_SECTION_NODE =4
ENTITY_REFERENCE_NODE =5
ENTITY_NODE =6
PROCESSING_INSTRUCTION_NODE =7
COMMENT_NODE =8
DOCUMENT_NODE =9
DOCUMENT_TYPE_NODE =10
DOCUMENT_FRAGMENT_NODE =11
NOTATION_NODE =12
DOCUMENT_POSITION_DISCONNECTED =1
DOCUMENT_POSITION_PRECEDING =2
DOCUMENT_POSITION_FOLLOWING =4
DOCUMENT_POSITION_CONTAINS =8
DOCUMENT_POSITION_CONTAINED_BY =16
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC =32

節點對象所具有的屬性與方法使我們通過JavaScript操縱DOM成爲了可能。

---

節點屬性和方法、文檔方法、元素對象屬性

按照重要（常用）程度，我對節點、文檔以及元素對象的屬性和方法進行了歸納。

節點屬性

• childNodes
• nodeType
• nodeValue
• firstChild
• lastChild
• nextSibling
• nodeName
• parentNode
• previousSibling

節點方法

• appendChild()
• cloneNode()
• removeChild()
• replaceChild()
• hasChildNodes()
• insertBefore()
• contains()
• compareDocumentPosition()
• isEqualNode()

文檔方法

• document.createElement()
• document.createTextNode()

元素對象屬性

• innerHTML
• outerHTML
• innerText
• outerText
• textContent
• firstElementChild
• lastElementChild
• children
• nextElementChild
• previousElementChild
  

  ---