DOM對(duì)象

1. DOM 簡(jiǎn)介

DOM （Document Object Model）是 W3C 的標(biāo)準(zhǔn)，是指文檔對(duì)象模型（樹結(jié)構(gòu)）逝淹。

DOM 定義了訪問和操作 HTML 文檔的標(biāo)準(zhǔn)方法兵钮。通過它俏橘，可以訪問HTML文檔的所有元素睡榆。

2. HTML DOM 樹

3. DOM 節(jié)點(diǎn)

根據(jù) W3C 的 HTML DOM 標(biāo)準(zhǔn)卵牍，HTML 文檔中的所有內(nèi)容都是節(jié)點(diǎn)(NODE)：

• 文檔節(jié)點(diǎn)：整個(gè)文檔（document對(duì)象）
• 元素節(jié)點(diǎn)：每個(gè) HTML 元素（element 對(duì)象）
• 文本節(jié)點(diǎn)：HTML 元素內(nèi)的文本（text對(duì)象）
• 屬性節(jié)點(diǎn)：每個(gè) HTML 屬性（attribute對(duì)象）
• 注釋節(jié)點(diǎn)：注釋（comment對(duì)象）

畫dom樹是為了展示文檔中各個(gè)對(duì)象之間的關(guān)系瓮栗，用于對(duì)象的導(dǎo)航削罩。這里只需要記住 Document 對(duì)象和 Element 對(duì)象即可瞄勾。

4. DOM 查找

直接查找

// 根據(jù)標(biāo)簽名獲取標(biāo)簽合集
const div1 = document.getElementsByTagName("div"); // div1 div2 div3 div4 div5 (元素集合 HTMLCollection)
const div2 = document.querySelectorAll("div"); // div1 div2 div3 div4 div5 (節(jié)點(diǎn)集合 NodeList)

// 根據(jù)class屬性獲取
const div3 = document.getElementsByClassName("div"); // div1 div2 (元素集合 HTMLCollection)
const div4 = document.querySelectorAll(".div"); // div1 div2 (節(jié)點(diǎn)集合 NodeList)

// 根據(jù)id屬性值獲取
const div5 = document.getElementById("div"); // div3 (一個(gè)標(biāo)簽)
const div6 = document.querySelectorAll("#div"); // div3 (節(jié)點(diǎn)集合 NodeList)

// 根據(jù)name屬性值獲取
const div7 = document.getElementsByName("div"); // div4 div5 (節(jié)點(diǎn)集合 NodeList)

// 根據(jù)標(biāo)簽名獲取標(biāo)第一個(gè)
const div8 = document.querySelector("div"); // div1 (一個(gè)標(biāo)簽)

間接查找

parentElement　　　　　　　//父節(jié)點(diǎn)標(biāo)簽元素
children　　　　  　　　　 //所有子標(biāo)簽
firstElementChild　　　　 //第一個(gè)子標(biāo)簽元素
lastElementChild　　　　  //最后一個(gè)子標(biāo)簽元素
nextElementtSibling　　  //下一個(gè)兄弟標(biāo)簽元素
previousElementSibling  //上一個(gè)兄弟標(biāo)簽元素

// 示例:
var ele1=document.getElementsByTagName("a")[0];
var ele2=ele1.parentElement;
console.log(ele2);

5. DOM 操作

// 創(chuàng)建節(jié)點(diǎn)
var divEle = document.createElement("div");
var pEle = document.createElement("p");
var aEle = document.createElement("a");

// 添加節(jié)點(diǎn)
document.body.appendChild(divEle);  // 將上面創(chuàng)建的div元素加入到body的尾部
document.body.insertBefore(pEle, divEle);  // 在body下，將p元素添加到div元素前面

//替換節(jié)點(diǎn)
document.body.replaceChild(aEle, pEle);  // 在body下弥激，用a元素替換p元素

//設(shè)置文本節(jié)點(diǎn)
aEle.innerText = "在干嘛"
divEle .innerHTML = "<p>在干嘛<p/>"

//設(shè)置屬性
divEle .setAttribute("class","list"); // 給div元素加上class='list'屬性

//獲取class值
divEle.className // 獲取div元素上的class

// 設(shè)置style樣式
divEle.style.color = "red"; // 把div元素的color樣式設(shè)置成red
divEle.style.margin = "10px"
divEle.style.width = "10px"
divEle.style.left = "10px"
divEle.style.position = "relative"

6. DOM 事件

HTML 4.0 的新特性之一是有能力使 HTML 事件觸發(fā)瀏覽器中的動(dòng)作（action）进陡，比如當(dāng)用戶點(diǎn)擊某個(gè) HTML 元素時(shí)啟動(dòng)一段 JavaScript。下面是一個(gè)屬性列表微服，這些屬性可插入 HTML 標(biāo)簽來定義事件動(dòng)作趾疚。

常用事件：

onclick        當(dāng)用戶點(diǎn)擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。
ondblclick     當(dāng)用戶雙擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄以蕴。

onfocus        元素獲得焦點(diǎn)糙麦。  //練習(xí)：輸入框
onblur         元素失去焦點(diǎn)。  //應(yīng)用場(chǎng)景：用于表單驗(yàn)證丛肮，用戶離開某個(gè)輸入框時(shí)赡磅，代表已經(jīng)輸入完了，我們可以對(duì)它進(jìn)行驗(yàn)證宝与。
onchange       域的內(nèi)容被改變焚廊。//應(yīng)用場(chǎng)景：通常用于表單元素,當(dāng)元素內(nèi)容被改變時(shí)觸發(fā)，（三級(jí)聯(lián)動(dòng)）

onkeydown      某個(gè)鍵盤按鍵被按下习劫。//應(yīng)用場(chǎng)景: 當(dāng)用戶在最后一個(gè)輸入框按下回車按鍵時(shí)咆瘟，表單提交。
onkeypress     某個(gè)鍵盤按鍵被按下并松開诽里。
onkeyup        某個(gè)鍵盤按鍵被松開袒餐。
onload         一張頁(yè)面或一幅圖像完成加載。
onmousedown    鼠標(biāo)按鈕被按下须肆。
onmousemove    鼠標(biāo)被移動(dòng)匿乃。
onmouseout     鼠標(biāo)從某元素移開。
onmouseover    鼠標(biāo)移到某元素之上豌汇。
onmouseleave   鼠標(biāo)從元素離開

onselect       文本被選中。
onsubmit       確認(rèn)按鈕被點(diǎn)擊泄隔。

7. DOM 優(yōu)化

DOM 操作都是代價(jià)昂貴的操作拒贱，它會(huì)導(dǎo)致 WEB 應(yīng)用程序的 UI 反應(yīng)遲鈍。所以佛嬉，應(yīng)當(dāng)盡可能減少這類過程的發(fā)生逻澳。

// 不緩存 DOM 查詢結(jié)果
for (let i = 0; i < document.getElementsByTagName("div").length; i++) {
    // 每次循環(huán)，都會(huì)計(jì)算length暖呕，頻繁進(jìn)行 DOM 查詢
}

// 緩存 DOM 查詢結(jié)果
const div = document.getElementsByTagName("div");
const length = div.length;
for (let i = 0; i < length; i++) {
    // 只進(jìn)行一次 DOM 查詢
}

將頻繁的 DOM 操作改成一次性操作：

var el = document.getElementById('mydiv');

// 未優(yōu)化前的DOM操作斜做，會(huì)導(dǎo)致三次重排
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
el.style.padding = '5px';

// 優(yōu)化后的DOM操作，只會(huì)一次重排
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';

BOM 對(duì)象

BOM（Browser Object Model）是指瀏覽器對(duì)象模型湾揽，可以對(duì)瀏覽器窗口進(jìn)行訪問和操作瓤逼。
使用 BOM笼吟，開發(fā)者可以移動(dòng)窗口、改變狀態(tài)欄中的文本以及執(zhí)行其他與頁(yè)面內(nèi)容不直接相關(guān)的動(dòng)作霸旗。
使 JavaScript 有能力與瀏覽器"對(duì)話"贷帮。

1. window 對(duì)象

window對(duì)象是客戶端JavaScript最高層對(duì)象之一，由于window對(duì)象是其它大部分對(duì)象的共同祖先诱告，在調(diào)用window對(duì)象的方法和屬性時(shí)撵枢，可以省略window對(duì)象的引用。例如：window.document.write()可以簡(jiǎn)寫成：document.write()精居。

• 所有瀏覽器都支持 window 對(duì)象锄禽。它表示瀏覽器窗口；
• 概念上講：一個(gè)html文檔對(duì)應(yīng)一個(gè)window對(duì)象靴姿；
• 功能上講：控制瀏覽器窗口的沃但；
• 使用上講：window對(duì)象不需要?jiǎng)?chuàng)建對(duì)象，直接使用即可空猜；
• 所有 JavaScript 全局對(duì)象绽慈、函數(shù)以及變量均自動(dòng)成為 window 對(duì)象的成員；
• 全局變量是 window 對(duì)象的屬性辈毯。全局函數(shù)是 window 對(duì)象的方法坝疼。

window對(duì)象方法：

alert()            顯示帶有一段消息和一個(gè)確認(rèn)按鈕的警告框。
confirm()          顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對(duì)話框谆沃。
prompt()           顯示可提示用戶輸入的對(duì)話框钝凶。

open()             打開一個(gè)新的瀏覽器窗口或查找一個(gè)已命名的窗口。
close()            關(guān)閉瀏覽器窗口唁影。
setInterval()      按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式耕陷。
clearInterval()    取消由 setInterval() 設(shè)置的 timeout。
setTimeout()       在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式据沈。
clearTimeout()     取消由 setTimeout() 方法設(shè)置的 timeout哟沫。

2. Navigator 對(duì)象

Navigator 對(duì)象包含有關(guān)瀏覽器的信息。

const ua = navigator.userAgent;
// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36

3. Screen 對(duì)象

Screen 對(duì)象包含有關(guān)客戶端顯示屏幕的信息锌介。

console.log(screen); // Screen {availWidth: 1920, availHeight: 1040, width: 1920, height: 1080, colorDepth: 24, …}
console.log(screen.width); // 1920
console.log(screen.height); //1080

4. Location 對(duì)象

Location 對(duì)象包含有關(guān)當(dāng)前 URL 的信息嗜诀。

Location 屬性：

// 獲取完整的url
location.href;   // "https://www.baidu.com/?id=123&num=456"

// 跳轉(zhuǎn)到指定頁(yè)面（可以返回上一個(gè)頁(yè)面）
location.;

// 獲取url的協(xié)議部分
location.protocol;  // "https:"

// 獲取url的主機(jī)名和端口
location.host; // "www.baidu.com"

// 獲取url的查詢部分（問號(hào) ? 之后的部分）
location.search; // "?id=123&num=456"

Location 方法：

// 重新加載頁(yè)面，即刷新
location.reload();  

// 載入一個(gè)新的文檔,跳轉(zhuǎn)到指定頁(yè)面（可以返回上一個(gè)頁(yè)面）
location.assign("https://www.baidu.com/");

// 跳轉(zhuǎn)到指定頁(yè)面（不可以返回上一個(gè)頁(yè)面）
location.replace("https://www.baidu.com/");

5. History 對(duì)象

History 對(duì)象包含用戶（在瀏覽器窗口中）訪問過的 URL孔祸。

History 對(duì)象方法：

history.forward()  // 前進(jìn)一頁(yè)
history.back()  // 后退一頁(yè)