一、認(rèn)識(shí) DOM 架構(gòu)
1、什么前端渲染？什么是后端渲染？
- 【前端渲染】由前端拿到需要展示的數(shù)據(jù)，然后再由前端轉(zhuǎn)換成HTML+CSS進(jìn)行渲染；
- 【后端渲染】由后端直接返回需要展示的HTML+CSS進(jìn)行渲染；
2、DOM的全稱是什么？是什么之間的橋梁？（從架構(gòu)上理解DOM的定位）
- Document Object Model；
- 是 HTML 和 JavaScript 之間的橋梁；
3、【小細(xì)節(jié)】HTML里面的注釋，會(huì)被解析嗎？
- 其實(shí)是會(huì)被解析的，我們打開Chrome調(diào)試工具的時(shí)候，可以在HTML里面看到注釋代碼。
4、認(rèn)識(shí)DOM架構(gòu)【這就是樹形結(jié)構(gòu)學(xué)習(xí)方式，一定要領(lǐng)悟，重要能力】
image.png
二、基于上面的架構(gòu)圖，然后逐個(gè)擊破(僅僅擊破重要的，常用的)
1、EventTarget 的定位是什么？主要有哪三個(gè)方法？
- 【定位】是一個(gè) DOM 接口，由可以接受事件，并且可以創(chuàng)建監(jiān)聽器的對(duì)象實(shí)現(xiàn)；
- 【補(bǔ)充】Element、document、Node 和 window 是最常見的 event targets；
- 【方法】addEventListener()、removeEventListener()、dispatchEvent()；
- 【內(nèi)部實(shí)現(xiàn)】在MDN上有EventTarget的簡(jiǎn)單實(shí)現(xiàn)代碼，可以學(xué)習(xí)下；
document.addEventListener("click", () => {
console.log("document 被點(diǎn)擊了");
});
const boxDiv = document.querySelector(".box");
boxDiv.addEventListener("click", () => {
console.log("box 被點(diǎn)擊");
});
2、Node的定位是什么？Node的父類是誰(shuí)？
- 【定位】Node 是一個(gè)接口，各種類型的DOM API對(duì)象會(huì)從這個(gè)接口繼承；
- 【父類】Node 的父類是EventTarget；
- 【Node的子類常見的是哪些】Document、Element 等等都是Node的子類；
const divEl = document.querySelector(".container");
const spanEl = document.querySelector(".box");
// 常見的屬性
console.log(divEl.nodeName, spanEl.nodeName);
console.log(divEl.nodeType, spanEl.nodeType);
console.log(divEl.nodeValue, spanEl.nodeValue);
// childNodes
const spanChildNodes = spanEl.childNodes;
const textNode = spanChildNodes[0];
console.log(textNode.nodeValue);
// 常見的方法
const strongEl = document.createElement("strong");
strongEl.textContent = "我是strong元素";
divEl.appendChild(strongEl);
// 注意事項(xiàng)：document對(duì)象
document.body.appendChild(strongEl);
image.png
3、Document的定位是什么？常見方法有哪些？
- 【定位】Document也就是DOM樹，包含了像<body>、<table>這樣的元素。它還向網(wǎng)頁(yè)文檔提供了全局操作功能，能解決如何獲取頁(yè)面的URL，如何在文檔中創(chuàng)建一個(gè)新的元素這樣的問題。
// 獲取document的一些屬性
console.log(document.location);
// 創(chuàng)建元素
const imageEl = document.createElement("img");
// 獲取元素
const divEl1 = document.getElementById("box");
const divEl2 = document.getElementsByTagName("div");
const divEl3List = document.getElementsByName("title");
const divEl4 = document.querySelector(".content");
const divEl5List = document.querySelectorAll(".content");
image.png
4、Element的定位是什么？Element常見的屬性和方法？
-
【定位】Element是一個(gè)通用性非常強(qiáng)的基類，所有 Document 對(duì)象下的對(duì)象都繼承自它。這個(gè)接口描述了所有相同種類的元素所普遍具有的方法和熟悉。
image.png
三、瀏覽器事件
1、事件主要包括哪些？事件來(lái)自哪里？
-【事件】瀏覽器在某個(gè)時(shí)刻可能會(huì)發(fā)生一些事件，比如鼠標(biāo)點(diǎn)擊、移動(dòng)、滾動(dòng)、獲取、失去焦點(diǎn)、輸入內(nèi)容等等一系列的事件；
-【來(lái)源】在web中，事件在瀏覽器窗口中被觸發(fā)，并且通過綁定某些元素上或者瀏覽器窗口本身，那么我們就可以給這些元素或者window窗口來(lái)綁定事件的處理程序，來(lái)對(duì)事件進(jìn)行監(jiān)聽。
2、事件監(jiān)聽主要哪兩種方式？【代碼角度】
- 【GlobalEventHandlers.onclick】onclick只能定義一個(gè)監(jiān)聽回調(diào)，后面的定義會(huì)覆蓋前面的
- 【EventTarget.addEventListener()】// addEventListener可以有多個(gè)同時(shí)監(jiān)聽回調(diào)
// onclick只能定義一個(gè)監(jiān)聽回調(diào)，后面的定義會(huì)覆蓋前面的
const divEl = document.querySelector(".container");
divEl.onclick = () => {
console.log("onclick1");
};
divEl.onclick = () => {
console.log("onclick2");
};
// addEventListener可以有多個(gè)同時(shí)監(jiān)聽回調(diào)
const spanEl = document.querySelector(".box");
spanEl.addEventListener("click", () => {
console.log("addEventListener1");
});
spanEl.addEventListener("click", () => {
console.log("addEventListener2");
});
3、什么是事件冒泡？什么是事件捕獲？
-【event bubble】默認(rèn)情況下事件是從內(nèi)層向外層傳遞(span > body)，這個(gè)順序我們稱之為事件冒泡；
-【event capture】另一種監(jiān)聽事件流的方式是從外層到內(nèi)存(body > span)，這種稱之為事件捕獲；
const bodyEl = document.body;
const divEl = document.querySelector(".box");
const spanEl = document.querySelector(".span");
bodyEl.addEventListener("click", () => {
console.log("事件冒泡:", "body被點(diǎn)擊");
});
divEl.addEventListener("click", () => {
console.log("事件冒泡:", "div被點(diǎn)擊");
});
spanEl.addEventListener("click", () => {
console.log("事件冒泡:", "span被點(diǎn)擊");
});
bodyEl.addEventListener(
"click",
() => {
console.log("事件捕獲:", "body被點(diǎn)擊");
},
true
);
divEl.addEventListener(
"click",
() => {
console.log("事件捕獲:", "div被點(diǎn)擊");
},
true
);
spanEl.addEventListener(
"click",
() => {
console.log("事件捕獲:", "span被點(diǎn)擊");
},
true
);
image.png
image.png
image.png
4、如果想拿到事件相關(guān)信息怎么辦？currentTarget和target區(qū)別？preventDefault、stopPropagation作用？
-【event】通過該對(duì)象可以拿到具體信息
-【currentTarget】當(dāng)前處理事件的元素;（一般用這個(gè)）
-【target】當(dāng)前事件發(fā)生的元素;（一般不使用這個(gè)）
-【preventDefault】取消事件的默認(rèn)行為；（比如表單驗(yàn)證失敗，阻止提交）
-【stopPropagation】阻止事件的捕獲或者冒泡；
image.png
