深入JavaScript Day31 - 认识 DOM 架构、利
2022-02-16 本文已影响0人
望穿秋水小作坊
一、认识 DOM 架构
1、什么前端渲染？什么是后端渲染？
- 【前端渲染】由前端拿到需要展示的数据，然后再由前端转换成HTML+CSS进行渲染；
- 【后端渲染】由后端直接返回需要展示的HTML+CSS进行渲染；
2、DOM的全称是什么？是什么之间的桥梁？（从架构上理解DOM的定位）
- Document Object Model；
- 是 HTML 和 JavaScript 之间的桥梁；
3、【小细节】HTML里面的注释，会被解析吗？
- 其实是会被解析的，我们打开Chrome调试工具的时候，可以在HTML里面看到注释代码。
4、认识DOM架构【这就是树形结构学习方式，一定要领悟，重要能力】
image.png
二、基于上面的架构图，然后逐个击破(仅仅击破重要的，常用的)
1、EventTarget 的定位是什么？主要有哪三个方法？
- 【定位】是一个 DOM 接口，由可以接受事件，并且可以创建监听器的对象实现；
- 【补充】Element、document、Node 和 window 是最常见的 event targets；
- 【方法】addEventListener()、removeEventListener()、dispatchEvent()；
- 【内部实现】在MDN上有EventTarget的简单实现代码，可以学习下；
document.addEventListener("click", () => {
console.log("document 被点击了");
});
const boxDiv = document.querySelector(".box");
boxDiv.addEventListener("click", () => {
console.log("box 被点击");
});
2、Node的定位是什么？Node的父类是谁？
- 【定位】Node 是一个接口，各种类型的DOM API对象会从这个接口继承；
- 【父类】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);
// 注意事项：document对象
document.body.appendChild(strongEl);
image.png
3、Document的定位是什么？常见方法有哪些？
- 【定位】Document也就是DOM树，包含了像<body>、<table>这样的元素。它还向网页文档提供了全局操作功能，能解决如何获取页面的URL，如何在文档中创建一个新的元素这样的问题。
// 获取document的一些属性
console.log(document.location);
// 创建元素
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是一个通用性非常强的基类，所有 Document 对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和熟悉。
image.png
三、浏览器事件
1、事件主要包括哪些？事件来自哪里？
-【事件】浏览器在某个时刻可能会发生一些事件，比如鼠标点击、移动、滚动、获取、失去焦点、输入内容等等一系列的事件；
-【来源】在web中，事件在浏览器窗口中被触发，并且通过绑定某些元素上或者浏览器窗口本身，那么我们就可以给这些元素或者window窗口来绑定事件的处理程序，来对事件进行监听。
2、事件监听主要哪两种方式？【代码角度】
- 【GlobalEventHandlers.onclick】onclick只能定义一个监听回调，后面的定义会覆盖前面的
- 【EventTarget.addEventListener()】// addEventListener可以有多个同时监听回调
// onclick只能定义一个监听回调，后面的定义会覆盖前面的
const divEl = document.querySelector(".container");
divEl.onclick = () => {
console.log("onclick1");
};
divEl.onclick = () => {
console.log("onclick2");
};
// addEventListener可以有多个同时监听回调
const spanEl = document.querySelector(".box");
spanEl.addEventListener("click", () => {
console.log("addEventListener1");
});
spanEl.addEventListener("click", () => {
console.log("addEventListener2");
});
3、什么是事件冒泡？什么是事件捕获？
-【event bubble】默认情况下事件是从内层向外层传递(span > body)，这个顺序我们称之为事件冒泡；
-【event capture】另一种监听事件流的方式是从外层到内存(body > span)，这种称之为事件捕获；
const bodyEl = document.body;
const divEl = document.querySelector(".box");
const spanEl = document.querySelector(".span");
bodyEl.addEventListener("click", () => {
console.log("事件冒泡:", "body被点击");
});
divEl.addEventListener("click", () => {
console.log("事件冒泡:", "div被点击");
});
spanEl.addEventListener("click", () => {
console.log("事件冒泡:", "span被点击");
});
bodyEl.addEventListener(
"click",
() => {
console.log("事件捕获:", "body被点击");
},
true
);
divEl.addEventListener(
"click",
() => {
console.log("事件捕获:", "div被点击");
},
true
);
spanEl.addEventListener(
"click",
() => {
console.log("事件捕获:", "span被点击");
},
true
);
image.png
image.png
image.png
4、如果想拿到事件相关信息怎么办？currentTarget和target区别？preventDefault、stopPropagation作用？
-【event】通过该对象可以拿到具体信息
-【currentTarget】当前处理事件的元素;（一般用这个）
-【target】当前事件发生的元素;（一般不使用这个）
-【preventDefault】取消事件的默认行为；（比如表单验证失败，阻止提交）
-【stopPropagation】阻止事件的捕获或者冒泡；
image.png
