1.什么是DOM

DOM的全稱是Document Object Model 文檔對象模型，DOM就是針對HTML和XML提供的一個(gè)API。就是說為了能以編程的方法操作這個(gè)HTML的內(nèi)容（比如添加某些元素、修改元素的內(nèi)容、刪除某些元素），我們把這個(gè)HTML看做一個(gè)對象樹（DOM樹），它本身和里面的所有東西，比如<div></div>這些標(biāo)簽都看做一個(gè)對象，每個(gè)對象都叫做一個(gè)節(jié)點(diǎn)（node），節(jié)點(diǎn)可以理解為DOM中所有Object的父類。

2. DOM有什么用

為了操作HTML中的元素，比如說我們要通過JS吧這個(gè)網(wǎng)頁的標(biāo)題改了，直接這樣就可以了：

document.title = 'how to cook';

這個(gè)API使得在網(wǎng)頁被下載到瀏覽器之后改變網(wǎng)頁的內(nèi)容成為可能。

3. ducument

當(dāng)瀏覽器下載到一個(gè)網(wǎng)頁，通常是HTML，這個(gè)HTML就叫document（這也是DOM樹種的一個(gè)node），document通常是整個(gè)DOM樹的根節(jié)點(diǎn)。這個(gè)document包含了標(biāo)題、URL等屬性，可以直接在JS中訪問到。
在一個(gè)瀏覽器窗口中可能有多個(gè)document，例如iframe加載的頁面，每一個(gè)都是一個(gè)document。
在JS 中，可以通過document訪問其子節(jié)點(diǎn)（其實(shí)任何節(jié)點(diǎn)都可以），如：

document.body;
document.getElementById('xxx');

4. BOM

BOM是Browser Object Model 瀏覽器對象類型
剛才說過DOM是為了操作文檔出現(xiàn)的接口，那BOM顧名思義其實(shí)就是為了控制瀏覽器的行為而出現(xiàn)的接口。
瀏覽器可以做什么？
比如跳轉(zhuǎn)到另一個(gè)頁面、前進(jìn)、后退等，程序還可能需要獲取屏幕的大小之類的參數(shù)。
所以BOM就是為了解決這些事情出現(xiàn)的接口。不如我們要讓瀏覽器跳轉(zhuǎn)到另一個(gè)頁面，只需要

location.href="http://www.xxxxx.com";
這個(gè)location就是BOM里的一個(gè)對象。

5. window

window也是BOM的一個(gè)對象，除去編程意義上的“兜底對象”之外，通過這個(gè)對象可以獲取窗口位置、確定窗口大小、彈出對話框等等。例如我要關(guān)閉當(dāng)前窗口：

window.close();

DOM是為了操作文檔出現(xiàn)的API，document是其的一個(gè)對象；

BOM是為了操作瀏覽器出現(xiàn)的API，window是其的一個(gè)對象。

6.進(jìn)階

• JavaScript不能真正改變DOM，它僅僅是改變呈現(xiàn)內(nèi)容，當(dāng)你刷新的時(shí)候就會(huì)發(fā)現(xiàn)一切都被還原了。
• 但是你可以把這些改變用請求的方式傳遞非后端語言接口，由后端語言比如PHP Python Java Node等來進(jìn)行后續(xù)的操作，他們接到你的請求后去修改服務(wù)器數(shù)據(jù)，這樣改變就生成了。
• 但是用戶的交互，比如彈窗、滑過變色的等等根本梅西要讓服務(wù)器也跟著摻和，因?yàn)榻换ブ皇菚簳r(shí)的，用完了還要變成默認(rèn)的，不需要保存到服務(wù)器，只要保證交互的時(shí)候有反饋就行了。
• 這就是前端。

• HTML表達(dá)靜態(tài)結(jié)構(gòu)（網(wǎng)頁有哪些元素，每個(gè)元素代表什么意義，元素包含了什么內(nèi)容）
• CSS呈現(xiàn)美化（元素的顏色、形狀、布局）
• JavaScript負(fù)責(zé)動(dòng)態(tài)交互（操作DOM，使用Ajax進(jìn)行異步刷新，與服務(wù)器交互）