相信很多初學前端的小伙伴，學了html, css, js之后，欣喜之余還有一絲小傲嬌，沒有想到那些大佬們口中又 提到了DOM樹。
你兩眼一抹黑，年輕人總是要接受社會的愛(du)護(da)。
DOM 是 Document Object Model（文檔對象模型）的縮寫。
為了那些被dom支配的日子，為了祖國的大好河山，為了下半輩子的幸福....
所以我們來談談什么是dom.
舉個例子
我們日常生活中，經常會遇到一些寫文檔的工作，寫一個論文 .docx 等等。我們可以改文本的字號，添加標題，增加內容，改變頁眉頁腳……
但在我們初期寫html頁面時，一旦代碼確定，那么頁面的整體顯示就會確定下來！打開瀏覽器瀏覽你的頁面，內心細膩的你，發現一處<p>我喜歡吃藕！</p>，但你明明想寫的是"我喜歡吃"。那我們怎么辦呢？我們吭哧吭哧的回到你的html文件，改了那段文本標簽。
你想，我要是能在瀏覽頁面時像寫.docx 那樣隨便改文檔就好了。正在你冥思苦想之際......
大佬們已經幫你想好了！
當你的服務器把html網頁發送給用戶時，用戶的瀏覽器會解析你的html代碼，生成dom樹，css則會生成css規則樹。有了這兩個樹，你的瀏覽器就可以渲染(生成整個頁面)了！所有最終呈現的頁面都是由我們的瀏覽器渲染生成的，這也是為什么我們在檢查頁面時(f12),對內容的修改會直接反應到頁面上。因為它來到咱們這里，長什么樣已經不是它可以控制的了。
你為她畫了曉妝，你為她添了晚妝。
這個dom樹有一個根節點<html>標簽，由這個根，你的每一個<meta>標簽，<p>標簽，<title>,<h1>等等，以及他們的文本內容，在上面生長，我們可以很輕松的在這顆樹上定位到他們的位置！這是給門牌號啊。這是數據的結構啊。
可上面說的明明是文檔對象！
程序員都知道。對象就是 對象數據 ➕ 對象函數
dom對象，在樹形結構中，我們可以輕松定位到對應的標簽位置，文本位置！
同時給大家提供了對這個結構修改-內容修改的內置函數，這也是對象模型的核心！
"W3C 文檔對象模型（DOM）是中立於平台和語言的接口，它允許程序和腳本動態地訪問、更新文檔的內容、結構和樣式。”
由DOM提供其他編程語言對於底層數據控制的支持。
- 可通過 JavaScript （以及其他編程語言）對 HTML DOM 進行訪問。
提供了哪些方法呢？無非就是，四大計算機古典名著《增》《刪》《改》《查》。
- getElementById() 返回帶有指定 ID 的元素。
- getElementsByTagName() 返回包含帶有指定標簽名稱的所有元素的節點列表（集合/節點數組）。
- getElementsByClassName() 返回包含帶有指定類名的所有元素的節點列表。
.etc
這就跟js聯系到了一起吧！有木有？
我們先看一個簡單的例子。
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() { document.getElementById("p1").innerHTML = "我喜歡吃";
}
</script>
</head>
<body>
<p id="p1">我喜歡吃藕</p>
<button type="button" onclick="myFunction()">試一試</button>
<script>
</script>
<p>上面的段落被一段腳本改變了。</p>
</body>
</html>
呃呃呃，有了dom給你的文本定位，你拿到了p1家的門鑰匙，月黑風高，你偷走了p1的藕……
id的添加是為了更好的定位，正是有了dom對象，這段js可以利用dom對象的方法，對dom樹的內容進行修改。
於是乎我們可以在頁面上通過js修改任何東西了。包括文本內容，層疊樣式。
基於dom，利用js編程，我們可以讓用戶"動態的修改頁面內容"，這使得網頁更加靈活。
所以建議學習的順序是學完js再對底層的dom有一個理解。
參考文檔：
W3school DOM
文章會隨時改動，要到博客園里看偶。一些網站會爬取本文章，但是可能會有出入。
https://www.cnblogs.com/asmurmur/