1.什么是DOM
DOM的全稱是Document Object Model 文檔對象模型，DOM就是針對HTML和XML提供的一個API。就是說為了能以編程的方法操作這個HTML的內(nèi)容（比如添加某些元素、修改元素的內(nèi)容、刪除某些元素），我們把這個HTML看做一個對象樹（DOM樹），它本身和里面的所有東西，比如<div></div>這些標(biāo)簽都看做一個對象，每個對象都叫做一個節(jié)點（node），節(jié)點可以理解為DOM中所有Object的父類。
2. DOM有什么用
為了操作HTML中的元素，比如說我們要通過JS吧這個網(wǎng)頁的標(biāo)題改了，直接這樣就可以了：
document.title = 'how to cook';
這個API使得在網(wǎng)頁被下載到瀏覽器之后改變網(wǎng)頁的內(nèi)容成為可能。
3. ducument
當(dāng)瀏覽器下載到一個網(wǎng)頁，通常是HTML，這個HTML就叫document（這也是DOM樹種的一個node），document通常是整個DOM樹的根節(jié)點。這個document包含了標(biāo)題、URL等屬性，可以直接在JS中訪問到。
在一個瀏覽器窗口中可能有多個document，例如iframe加載的頁面，每一個都是一個document。
在JS 中，可以通過document訪問其子節(jié)點（其實任何節(jié)點都可以），如：
document.body;
document.getElementById('xxx');
4. BOM
BOM是Browser Object Model 瀏覽器對象類型
剛才說過DOM是為了操作文檔出現(xiàn)的接口，那BOM顧名思義其實就是為了控制瀏覽器的行為而出現(xiàn)的接口。
瀏覽器可以做什么？
比如跳轉(zhuǎn)到另一個頁面、前進(jìn)、后退等，程序還可能需要獲取屏幕的大小之類的參數(shù)。
所以BOM就是為了解決這些事情出現(xiàn)的接口。不如我們要讓瀏覽器跳轉(zhuǎn)到另一個頁面，只需要
location.href="http://www.xxxxx.com";
這個location就是BOM里的一個對象。
5. window
window也是BOM的一個對象，除去編程意義上的“兜底對象”之外，通過這個對象可以獲取窗口位置、確定窗口大小、彈出對話框等等。例如我要關(guān)閉當(dāng)前窗口：
window.close();
DOM是為了操作文檔出現(xiàn)的API，document是其的一個對象；
BOM是為了操作瀏覽器出現(xiàn)的API，window是其的一個對象。
6.進(jìn)階
- JavaScript不能真正改變DOM，它僅僅是改變呈現(xiàn)內(nèi)容，當(dāng)你刷新的時候就會發(fā)現(xiàn)一切都被還原了。
- 但是你可以把這些改變用請求的方式傳遞非后端語言接口，由后端語言比如PHP Python Java Node等來進(jìn)行后續(xù)的操作，他們接到你的請求后去修改服務(wù)器數(shù)據(jù)，這樣改變就生成了。
- 但是用戶的交互，比如彈窗、滑過變色的等等根本梅西要讓服務(wù)器也跟著摻和，因為交互只是暫時的，用完了還要變成默認(rèn)的，不需要保存到服務(wù)器，只要保證交互的時候有反饋就行了。
- 這就是前端。
- HTML表達(dá)靜態(tài)結(jié)構(gòu)（網(wǎng)頁有哪些元素，每個元素代表什么意義，元素包含了什么內(nèi)容）
- CSS呈現(xiàn)美化（元素的顏色、形狀、布局）
- JavaScript負(fù)責(zé)動態(tài)交互（操作DOM，使用Ajax進(jìn)行異步刷新，與服務(wù)器交互）
