DOM

DOM：Docuemnt Object Model 文档对象模型

• 文档：html 文档 之前的 html 文件就可以称一个文档
• Object: 对象 一切都是对象 所有的元素都是对象
• Model：模型 树模型 所有的元素，要形成一个树模型

document 对象

Document 节点表示的整个载入的网页，它的实例是全局的 document 对象

• 对 DOM 的所有操作都是从 document 对象开始的
• 它是 DOM 的 入口点，可以从 document 开始去访问任何节点元素

JS 操作盒子模型

client 系列

• clientWidth/clientHeight: 获取盒子或页面可视区域的宽高
• clientTop:获取盒子的上边框的大小
• clientLeft:获取盒子的左边框的大小

---

offset 系列

• offsetWidth/offsetHeight: 获取盒子或页面可视区域的宽高+border
• offsetTop:获取一个定位元素相对于参考点的上面的距离
• offsetLeft:获取一个定位元素相对于参考点的左面的距离
• offsetParent:获取一个定位元素的参考点

---

scroll 系列

• scrollWidth/scrollHeight:获取盒子或页面真实内容的宽度
• scrollTop:获取页面或盒子向上卷去的高度
• scrollLeft:获取页面或盒子向左卷去的宽度 基本上用不到

需要记的三个常用高度：

• 获取一张网页可视区的高度：document.body.clientHeight
• 获取一张网页真实的高度：document.body.scrollHeight
• 获取一张网页卷去的高度：document.body.scrollTop

事件类型

• 点击事件
• 键盘事件
• 表单事件
• 加载事件
• 浏览器事件

事件顺序

• 捕获阶段（Capturing phase）：事件（从 Window）向下走近元素
• 目标阶段（Target phase）：事件到达目标元素
• 冒泡阶段（Bubbling phase）：事件从元素上开始冒泡

操作

查询节点

document.getElementById("#app"); // id
document.getElementsByClassName("red"); // 样式类名
document.getElementsByTagName("li"); // 标签名
document.querySelector(".app"); // CSS选择器
document.querySelectorAll(".app"); // CSS选择器
document.documentElement; // 获取页面中的HTML标签
document.body; // 获取页面中的BODY标签

创建添加节点

document.body.appendChild(document.createElement("div"));

删除节点

document.querySelector("#app").remove();

更新节点

// 获取<p id="p">...</p >
var p = document.getElementById("p");
// 设置文本为abc:
p.innerHTML = "ABC"; // <p id="p">ABC</p >
// 设置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p >的内部结构已修改

设置行样式

// 获取<p id="p-id">...</p >
const p = document.getElementById("p-id");
// 设置CSS:
p.style.color = "#ff0000";
p.style.fontSize = "20px"; // 驼峰命名
p.style.paddingTop = "2em";

添加 class

document.getElementById("app").classList.add("red");

移除 class

document.getElementById("app").classList.remove("red");

检查 class

document.getElementById("app").classList.contains("red");

切换 class

let app = document.getElementById("app");
app.addEventListener("click", function () {
  this.classList.toggle("houdunwang");
});

节点事件

let app = document.getElementById("app");
app.addEventListener("click", function () {
  console.log("test");
});