作者：Fadeoc Khaos
鏈接：https://www.zhihu.com/question/34219998/answer/58211568
來源：知乎
著作權(quán)歸作者所有廷痘，轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)侦啸。
1 什么是 DOM
你可以把 DOM 看成節(jié)點
上圖是一個 html 文件，也就是網(wǎng)頁的結(jié)構(gòu)。
html 標(biāo)簽是一個節(jié)點（Node）佳遂。
head、title、body、p 標(biāo)簽都是節(jié)點至非。
嵌套其他節(jié)點的節(jié)點叫做父節(jié)點。
被嵌套的節(jié)點叫做子節(jié)點糠聪。
同一個父節(jié)點下的節(jié)點叫做兄弟節(jié)點荒椭。
父親的父親以及上溯十八代祖宗叫做祖先節(jié)點。
兒子的兒子以及子子孫孫無窮匱也叫做后代節(jié)點舰蟆。
2 DOM 有什么用
通過 DOM 你可以改變網(wǎng)頁趣惠。
你可以使用 Javascript 語言來操作 DOM 以改變網(wǎng)頁。
為了改變網(wǎng)頁身害，你必須告訴 Javascript 改變哪一個節(jié)點味悄。這就是操作 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">在一個網(wǎng)頁中按下 F12塌鸯，你的瀏覽器會打開控制臺（Console）侍瑟，你輸入
在一個網(wǎng)頁中按下 F12，你的瀏覽器會打開控制臺（Console）界赔，你輸入
varx=document.querySelector("p");alert(x);
第一行就是使用 Javascript 訪問 document 節(jié)點丢习，然后訪問節(jié)點中的第一個 P 節(jié)點，將這個節(jié)點傳遞給變量 x淮悼。等一下咐低？什么是 document 節(jié)點？ Html 文件里沒這個標(biāo)簽巴嘈取见擦？整個 Html 文件就是 document 節(jié)點。
第二行通過 alert(x) 使瀏覽器彈出上面紅圈內(nèi)的內(nèi)容羹令，提示 x 是一個 html段落對象鲤屡，p 就是段落，p 的類型就是對象福侈。
如果你再輸入
x.innerHTML = "第一次成功的改變了DOM"
就會改變 P 內(nèi)的內(nèi)容酒来。
如果你為以上內(nèi)容綁定一個鼠標(biāo)動作（事件），比如 onclick （鼠標(biāo)點擊事件）：
varx=document.querySelector("p");x.onclick=function(){x.innerHTML="第一次成功的改變了DOM";}
也就是點擊 P 元素的時候會調(diào)用這個 Javascript 函數(shù)肪凛，將 P 內(nèi)的文字改變堰汉。
既然點擊可以對 DOM 進(jìn)行改變，那么舉一反三伟墙，所有的事件都可以翘鸭，劃過，滾動等等戳葵。
既然點擊可以讓 P 元素有所反饋就乓，那么舉一反三，就可以讓所有的元素都根據(jù)事件進(jìn)行反饋。
當(dāng)你在知乎的搜索欄輸入數(shù)據(jù)時生蚁，Javascript 捕獲到了你的輸入時間噩翠，對服務(wù)器使用異步查詢，動態(tài)顯示搜索結(jié)果守伸。
當(dāng)你向下滑動時绎秒，Javascript 捕獲到了你滑動的距離，根據(jù)距離的大小來判斷是否改變 DOM尼摹，進(jìn)而讓頂部的導(dǎo)航欄跟隨瀏覽器窗口滾動见芹，免得你回頭去找。
當(dāng)你點擊修改按鈕時蠢涝，Javascript 捕獲到了這個按鈕的鼠標(biāo)點擊事件玄呛，反饋了一個可編輯的答案給你。
這回懂了和二？操作 DOM 可以讓你更改網(wǎng)頁的交互方式徘铝。所有網(wǎng)頁的交互都依賴這種 DOM 技術(shù)，即使不用 Javascript惯吕，也可以使用其他語言來操作 DOM惕它。DOM 是一顆樹，樹枝和樹葉都做了編號废登，你告訴一個腳本淹魄，一個函數(shù)去尋找哪一個枝干的哪一個葉子，對這個葉子做什么改變堡距。
3 怎么學(xué)習(xí) DOM
練習(xí)甲锡，練習(xí)，練習(xí)羽戒。
document.getElementById("wonb")缤沦，訪問 id 為 wonb 的節(jié)點。
document.getElementsByClassName("yesninb")易稠，訪問 class 為 yesninb 的節(jié)點缸废。注意，class 在 DOM 中允許出現(xiàn)多次（廢話這就是 class 存在的意義）驶社，因此哪怕只有一個 class 為 yesninb 的節(jié)點企量，返回的也是一個數(shù)組。
既然是數(shù)組衬吆，如果你將它傳遞給 var y，那么你訪問這唯一的該死的節(jié)點時绳泉，就要使用 y[0]逊抡，而不是 y，因為 y 代表的是數(shù)組而不是它其中的元素。
4 如果你看懂了
你可以隨便搜索一下 DOM冒嫡，結(jié)合自己的 html 文件練習(xí)一下操作常用 DOM 節(jié)點的方式拇勃。
W3C 等入門網(wǎng)站介紹了常用的 DOM 方法。
多做孝凌》脚兀看一個方法，實踐一下蟀架。
5 如果你看不懂
去學(xué) HTML 瓣赂， 以及 Javascript 的前三章。
6 進(jìn)階
Javascript 不能夠真正改變 DOM片拍，它僅僅是改變呈現(xiàn)內(nèi)容煌集，當(dāng)你刷新的時候就會發(fā)現(xiàn)我靠這怎么他媽的什么都還原了。
但是你可以把這些改變傳遞給服務(wù)器捌省，由后端比如 PHP 來進(jìn)行后續(xù)的操作苫纤， PHP 可以改變底層數(shù)據(jù)。
用戶的交互比如彈窗等等根本沒必要讓服務(wù)器也跟著摻和纲缓，why? 因為交互只是暫時的卷拘，用完了，還要變成默認(rèn)的祝高，不需要你保存到服務(wù)器栗弟，只要保證你點擊的時候有反饋就行了。
這就是前端褂策。
HTML 表達(dá)靜態(tài)結(jié)構(gòu)（有哪些元素横腿，每個元素代表什么意義，而不是內(nèi)容）
CSS 呈現(xiàn)美化（元素的顏色斤寂，形狀耿焊，布局）
Javascript 負(fù)責(zé)動態(tài)交互（操作 DOM，使用 Ajax 進(jìn)行異步刷新遍搞，與服務(wù)器交互）
