作者：Fadeoc Khaos
鏈接：https://www.zhihu.com/question/34219998/answer/58211568
來源：知乎
著作權歸作者所有，轉載請聯系作者獲得授權。
1 什么是 DOM
你可以把 DOM 看成節點
上圖是一個 html 文件，也就是網頁的結構。
html 標簽是一個節點（Node）。
head、title、body、p 標簽都是節點。
嵌套其他節點的節點叫做父節點。
被嵌套的節點叫做子節點。
同一個父節點下的節點叫做兄弟節點。
父親的父親以及上溯十八代祖宗叫做祖先節點。
兒子的兒子以及子子孫孫無窮匱也叫做后代節點。
2 DOM 有什么用
通過 DOM 你可以改變網頁。
你可以使用 Javascript 語言來操作 DOM 以改變網頁。
為了改變網頁，你必須告訴 Javascript 改變哪一個節點。這就是操作 DOM。
比如：
<img src="https://pic3.zhimg.com/68e595aab9f7119ebc8db7d346f87ec2_b.jpg" data-rawwidth="818" data-rawheight="575" class="origin_image zh-lightbox-thumb" width="818" data-original="https://pic3.zhimg.com/68e595aab9f7119ebc8db7d346f87ec2_r.jpg">在一個網頁中按下 F12，你的瀏覽器會打開控制臺（Console），你輸入
在一個網頁中按下 F12，你的瀏覽器會打開控制臺（Console），你輸入
varx=document.querySelector("p");alert(x);
第一行就是使用 Javascript 訪問 document 節點，然后訪問節點中的第一個 P 節點，將這個節點傳遞給變量 x。等一下？什么是 document 節點？ Html 文件里沒這個標簽啊？整個 Html 文件就是 document 節點。
第二行通過 alert(x) 使瀏覽器彈出上面紅圈內的內容，提示 x 是一個 html段落對象，p 就是段落，p 的類型就是對象。
如果你再輸入
x.innerHTML = "第一次成功的改變了DOM"
就會改變 P 內的內容。
如果你為以上內容綁定一個鼠標動作（事件），比如 onclick （鼠標點擊事件）：
varx=document.querySelector("p");x.onclick=function(){x.innerHTML="第一次成功的改變了DOM";}
也就是點擊 P 元素的時候會調用這個 Javascript 函數，將 P 內的文字改變。
既然點擊可以對 DOM 進行改變，那么舉一反三，所有的事件都可以，劃過，滾動等等。
既然點擊可以讓 P 元素有所反饋，那么舉一反三，就可以讓所有的元素都根據事件進行反饋。
當你在知乎的搜索欄輸入數據時，Javascript 捕獲到了你的輸入時間，對服務器使用異步查詢，動態顯示搜索結果。
當你向下滑動時，Javascript 捕獲到了你滑動的距離，根據距離的大小來判斷是否改變 DOM，進而讓頂部的導航欄跟隨瀏覽器窗口滾動，免得你回頭去找。
當你點擊修改按鈕時，Javascript 捕獲到了這個按鈕的鼠標點擊事件，反饋了一個可編輯的答案給你。
這回懂了？操作 DOM 可以讓你更改網頁的交互方式。所有網頁的交互都依賴這種 DOM 技術，即使不用 Javascript，也可以使用其他語言來操作 DOM。DOM 是一顆樹，樹枝和樹葉都做了編號，你告訴一個腳本，一個函數去尋找哪一個枝干的哪一個葉子，對這個葉子做什么改變。
3 怎么學習 DOM
練習，練習，練習。
document.getElementById("wonb")，訪問 id 為 wonb 的節點。
document.getElementsByClassName("yesninb")，訪問 class 為 yesninb 的節點。注意，class 在 DOM 中允許出現多次（廢話這就是 class 存在的意義），因此哪怕只有一個 class 為 yesninb 的節點，返回的也是一個數組。
既然是數組，如果你將它傳遞給 var y，那么你訪問這唯一的該死的節點時，就要使用 y[0]，而不是 y，因為 y 代表的是數組而不是它其中的元素。
4 如果你看懂了
你可以隨便搜索一下 DOM，結合自己的 html 文件練習一下操作常用 DOM 節點的方式。
W3C 等入門網站介紹了常用的 DOM 方法。
多做?？匆粋€方法，實踐一下。
5 如果你看不懂
去學 HTML ， 以及 Javascript 的前三章。
6 進階
Javascript 不能夠真正改變 DOM，它僅僅是改變呈現內容，當你刷新的時候就會發現我靠這怎么他媽的什么都還原了。
但是你可以把這些改變傳遞給服務器，由后端比如 PHP 來進行后續的操作， PHP 可以改變底層數據。
用戶的交互比如彈窗等等根本沒必要讓服務器也跟著摻和，why? 因為交互只是暫時的，用完了，還要變成默認的，不需要你保存到服務器，只要保證你點擊的時候有反饋就行了。
這就是前端。
HTML 表達靜態結構（有哪些元素，每個元素代表什么意義，而不是內容）
CSS 呈現美化（元素的顏色，形狀，布局）
Javascript 負責動態交互（操作 DOM，使用 Ajax 進行異步刷新，與服務器交互）
