笨鸟理解
DOM（文档对象模型）是一个跨平台的编程接口标准，它将文档解析为树状结构（DOM 树），并通过统一的 API 提供对节点的动态操作能力
- 文档解析功能：将文档解析为树状结构（DOM树），可对树状结构的每个节点进行操作，其中每个标签、属性、文本都成为树中的节点。
- 编程操作功能：通过DOM自身提供的API标准方法，对节点进行操作或修改。
DOM并非同时进行文档解析以及操作节点，而是先将文档解析为树状节点，然后再使用API对节点进行操作。
PS：DOM本身并不具备文档解析能力，文档解析由浏览器引擎进行解析。DOM 是文档解析后的内存表示形式（树状结构）。
DOM的一些常用API
| 分类 | API | 作用 | 示例 |
|---|---|---|---|
| 节点查询 | document.getElementById(id) |
通过 ID 获取元素 | document.getElementById("myId") |
document.querySelector(selector) |
通过 CSS 选择器获取第一个匹配元素 | document.querySelector(".myClass") |
|
document.querySelectorAll(selector) |
通过 CSS 选择器获取所有匹配元素（NodeList） | document.querySelectorAll("p") |
|
element.getElementsByTagName(tag) |
获取指定标签名的子元素集合（HTMLCollection） | div.getElementsByTagName("span") |
|
element.getElementsByClassName(class) |
获取指定类名的子元素集合（HTMLCollection） | div.getElementsByClassName("myClass") |
|
| 节点操作 | element.innerHTML |
获取或设置元素的 HTML 内容 | div.innerHTML = "<span>Hello</span>" |
element.textContent |
获取或设置元素的文本内容（不解析 HTML） | div.textContent = "Hello" |
|
element.appendChild(node) |
向元素末尾添加子节点 | div.appendChild(newElement) |
|
element.removeChild(node) |
移除指定的子节点 | div.removeChild(childElement) |
|
element.cloneNode(deep) |
克隆节点（deep=true 时包括子节点） |
const clone = div.cloneNode(true) |
|
document.createElement(tag) |
创建新元素节点 | const p = document.createElement("p") |
|
| 属性操作 | element.setAttribute(name, value) |
设置元素属性 | img.setAttribute("src", "image.jpg") |
element.getAttribute(name) |
获取元素属性值 | img.getAttribute("src") |
|
element.removeAttribute(name) |
移除元素属性 | img.removeAttribute("alt") |
|
| 样式操作 | element.style.property |
获取或设置内联样式 | div.style.color = "red" |
element.classList.add(class) |
添加 CSS 类 | div.classList.add("active") |
|
element.classList.remove(class) |
移除 CSS 类 | div.classList.remove("hidden") |
|
| 事件处理 | element.addEventListener(event, handler) |
绑定事件监听器 | button.addEventListener("click", myFunction) |
element.removeEventListener(event, handler) |
移除事件监听器 | button.removeEventListener("click", myFunction) |
吐槽：
这两年修改网站总是在用document.write
一直不知道这个js语法到底是属于什么类型的代码
今天彻底仔细的看了一下书，属于是恍然大悟了……
早不看书，不整理笔记，这会拍大腿怪得了谁呢……