什么是DOM？
通過 JavaScript偏瓤，您可以重構(gòu)整個HTML文檔椰憋。您可以添加厅克、移除、改變或重排頁面上的項目橙依。要改變頁面的某個東西证舟，JavaScript就需要對HTML文檔中所有元素進行訪問的入口。這個入口窗骑，連同對HTML 元素進行添加女责、移動、改變或移除的方法和屬性创译，都是通過文檔對象模型來獲得的（DOM）抵知。在 1998 年，W3C 發(fā)布了第一級的 DOM 規(guī)范软族。這個規(guī)范允許訪問和操作 HTML 頁面中的每一個單獨的元素刷喜。所有的瀏覽器都執(zhí)行了這個標(biāo)準(zhǔn)，因此立砸，DOM 的兼容性問題也幾乎難覓蹤影了掖疮。DOM 可被 JavaScript 用來讀取、改變 HTML颗祝、XHTML 以及 XML 文檔浊闪。
Node 層次
節(jié)點彼此都有等級關(guān)系。HTML 文檔中的所有節(jié)點組成了一個文檔樹（或節(jié)點樹）螺戳。HTML 文檔中的每個元素规揪、屬性、文本等都代表著樹中的一個節(jié)點温峭。樹起始于文檔節(jié)點，并由此繼續(xù)伸出枝條字支，直到處于這棵樹最低級別的所有文本節(jié)點為止凤藏。
下面這個圖片表示一個文檔樹（節(jié)點樹）：
[圖片上傳失敗...(image-c5c31a-1514108580305)]
文檔樹（節(jié)點數(shù)）
請看下面這個HTML文檔：
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
上面所有的節(jié)點彼此間都存在關(guān)系奸忽。除文檔節(jié)點之外的每個節(jié)點都有父節(jié)點。舉例揖庄，<head> 和 <body> 的父節(jié)點是 <html> 節(jié)點栗菜，文本節(jié)點 "Hello world!" 的父節(jié)點是 <p> 節(jié)點。大部分元素節(jié)點都有子節(jié)點蹄梢。比方說疙筹，<head> 節(jié)點有一個子節(jié)點：<title> 節(jié)點。<title> 節(jié)點也有一個子節(jié)點：文本節(jié)點 "DOM Tutorial"禁炒。當(dāng)節(jié)點分享同一個父節(jié)點時而咆，它們就是同輩（同級節(jié)點）。比方說幕袱，<h1> 和 <p>是同輩暴备，因為它們的父節(jié)點均是 <body> 節(jié)點。節(jié)點也可以擁有后代们豌，后代指某個節(jié)點的所有子節(jié)點涯捻，或者這些子節(jié)點的子節(jié)點，以此類推望迎。比方說障癌，所有的文本節(jié)點都是 <html>節(jié)點的后代，而第一個文本節(jié)點是 <head> 節(jié)點的后代辩尊。節(jié)點也可以擁有先輩涛浙。先輩是某個節(jié)點的父節(jié)點，或者父節(jié)點的父節(jié)點对省，以此類推蝗拿。比方說，所有的文本節(jié)點都可把 <html> 節(jié)點作為先輩節(jié)點蒿涎。
通過 JavaScript哀托，您可以重構(gòu)整個 HTML 文檔。您可以添加劳秋、移除仓手、改變或重排頁面上的項目。
要改變頁面的某個東西玻淑，JavaScript 就需要獲得對 HTML 文檔中所有元素進行訪問的入口嗽冒。這個入口，連同對 HTML 元素進行添加补履、移動添坊、改變或移除的方法和屬性，都是通過文檔對象模型來獲得的（DOM）箫锤。
Javascript主要是利用HTML DOM去獲得贬蛙、改變雨女、創(chuàng)建HTML元素，從而達到美化頁面阳准、操作頁面元素的目標(biāo)氛堕。因此，在Javascript中最常見的就是各種各樣的HTML DOM元素以及它們各自的屬性野蝇。除了這些DOM元素外讼稚，Javascript有自己的對象，例如數(shù)組绕沈。
簡單說锐想，可以認(rèn)為Javascript主要是操縱HTML DOM。兩者是不一樣的七冲。
Javascript是語言痛倚，DOM是可以在各種語言中（不僅js，php也有的）動態(tài)修改文檔的模型澜躺。
下面單獨拉出JavaScript與DOM的關(guān)系給大家詳解
JavaScript與瀏覽器的工作
1.瀏覽器獲取并加載你的頁面蝉稳，從上至下解析它的內(nèi)容。
遇到JavaScript時掘鄙，瀏覽器會解析代碼耘戚，檢查它的正確性，然后執(zhí)行代碼操漠。
瀏覽器還會建立一個HTML頁面的內(nèi)部模型（DOM）收津。
2.JavaScript繼續(xù)執(zhí)行，使用DOM檢查頁面浊伙、完成修改撞秋、從頁面接受事件，或者要求瀏覽器從Web服務(wù)器獲取其它數(shù)據(jù)嚣鄙。
JavaScript如何與頁面交互吻贿？
JavaScript是代碼，HTML是標(biāo)記哑子，完全不同的東西
怎么讓它們交互呢舅列？
答案是使用文檔對象模型（Docunment Object Model，簡稱DOM）卧蜓。
DOM的妙處在于：它能夠在所有瀏覽器上提供一種一致的方式帐要，通過代碼訪問HTML的結(jié)構(gòu)和內(nèi)容。
1弥奸、在瀏覽器加載一個頁面時榨惠，瀏覽器會解析HTML，并創(chuàng)建文檔的一個內(nèi)部模型，其中包含HTML標(biāo)記的所有元素冒冬。
2伸蚯、JavaScript可以與DOM交互（JavaScript使用DOM創(chuàng)建或刪除元素等等）
document是一個反映HTML的對象，通過調(diào)用document的方法改變DOM的狀態(tài)简烤，也就是改變HTML頁面
3、JavaScript修改了DOM時摇幻，瀏覽器會隨著動態(tài)更新頁面横侦。
