当前位置：首页 > news >正文

Dom详解

news 来源：原创 2025/5/14 6:02:42

DOM（文档对象模型）详解

1. 什么是 DOM？

DOM（Document Object Model）是浏览器提供的 API，它将 HTML 或 XML 文档解析成树状结构，让 JavaScript 可以动态访问和修改网页内容。

核心概念：DOM 将网页表示为一棵树，其中每个 HTML 元素都是一个节点（Node），JavaScript 可以操作这些节点来修改页面内容。

2. DOM 结构

DOM 是一个树形结构，分为以下几个主要部分：

document
 ├── html
 │   ├── head
 │   │   ├── meta
 │   │   ├── title
 │   ├── body
 │       ├── div
 │       │   ├── h1
 │       │   ├── p

常见 DOM 节点类型
| 节点类型 | 描述 |
|—|—|
| document | 整个 HTML 文档 |
| element（元素节点） | HTML 标签（如 <div>、<p>） |
| text（文本节点） | 元素内部的文本 |
| attribute（属性节点） | 元素的属性（如 id="app"） |
| comment（注释节点） | HTML 注释（如 ） |

3. 获取 DOM 元素

可以使用以下方法获取 DOM 节点：

1️⃣ 通过 ID 获取元素

let elem = document.getElementById("myElement");

2️⃣ 通过类名获取元素

let elements = document.getElementsByClassName("myClass"); // 返回 HTMLCollection

3️⃣ 通过标签名获取元素

let elements = document.getElementsByTagName("div"); // 返回 HTMLCollection

4️⃣ 通过 CSS 选择器获取

let elem = document.querySelector(".myClass"); // 获取第一个匹配的元素
let elems = document.querySelectorAll(".myClass"); // 获取所有匹配的元素（NodeList）

4. 操作 DOM

1️⃣ 修改元素内容

let elem = document.getElementById("myElement");
elem.innerHTML = "<strong>新内容</strong>"; // 设置 HTML 内容
elem.textContent = "纯文本内容"; // 只设置文本，不解析 HTML

2️⃣ 修改元素属性

elem.setAttribute("class", "newClass"); // 设置属性
let className = elem.getAttribute("class"); // 获取属性值
elem.removeAttribute("class"); // 移除属性

3️⃣ 修改样式

elem.style.color = "red"; // 直接修改样式
elem.style.fontSize = "20px";

5. 创建 & 删除 DOM 节点

1️⃣ 创建新元素

let newDiv = document.createElement("div"); // 创建元素
newDiv.textContent = "我是新元素";
document.body.appendChild(newDiv); // 添加到 body

2️⃣ 插入子元素

let parent = document.getElementById("container");
let newElem = document.createElement("p");
newElem.textContent = "我是段落";
parent.appendChild(newElem);

3️⃣ 删除元素

let elem = document.getElementById("myElement");
elem.remove(); // 直接删除

6. 事件处理

1️⃣ 添加事件

document.getElementById("btn").addEventListener("click", function() {
    alert("按钮被点击了！");
});

2️⃣ 事件委托

document.getElementById("list").addEventListener("click", function(event) {
    if (event.target.tagName === "LI") {
        alert("点击了 " + event.target.textContent);
    }
});

事件委托适用于动态创建的元素，避免给每个子元素单独绑定事件。

7. DOM 片段优化

使用 documentFragment 提高性能：

let fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
    let li = document.createElement("li");
    li.textContent = `Item ${i + 1}`;
    fragment.appendChild(li);
}
document.getElementById("list").appendChild(fragment); // 一次性插入，提高性能

总结

操作	方法
获取元素	`getElementById()`、`querySelector()`
修改内容	`innerHTML`、`textContent`
修改属性	`setAttribute()`、`getAttribute()`
修改样式	`style.property`
创建元素	`document.createElement()`
插入元素	`appendChild()`、`insertBefore()`
删除元素	`remove()`
绑定事件	`addEventListener()`