DOM操作 — 使用 JavaScript 改变画面
完成本主题后
您将了解 DOM 是什么，以及如何使用 JavaScript 查找、更改 HTML 元素和处理事件的基本方法。
什么是 DOM
当浏览器读取 HTML 时，它会将其转换为树状结构。这个树被称为 DOM（文档对象模型）。
html
<div id="app">
<h1>Hello</h1>
<p class="intro">World</p>
</div>在 DOM 中，这个 HTML 变成如下结构：
text
document
└── div#app
├── h1 → "Hello"
└── p.intro → "World"JavaScript 可以读取、添加、删除和修改这个树中的节点。因此，屏幕会发生变化。
查找元素
javascript
// 通过 ID 查找
const app = document.getElementById("app");
// 通过 CSS 选择器查找（第一个元素）
const title = document.querySelector("h1");
const intro = document.querySelector(".intro");
// 通过 CSS 选择器查找所有元素
const allParagraphs = document.querySelectorAll("p");querySelector 是最通用的。您可以直接使用 CSS 选择器。
更改内容
javascript
const title = document.querySelector("h1");
// 更改文本
title.textContent = "안녕하세요";
// 更改 HTML
title.innerHTML = "안녕<em>하세요</em>";
// 更改样式
title.style.color = "blue";
title.style.fontSize = "24px";
// 添加/删除类
title.classList.add("active");
title.classList.remove("active");
title.classList.toggle("active");textContent 仅更改文本，而 innerHTML 包含 HTML 标签。请注意，如果将用户输入放入 innerHTML，可能会导致 XSS 漏洞。
创建和添加元素
javascript
const newItem = document.createElement("li");
newItem.textContent = "새 항목";
const list = document.querySelector("ul");
list.appendChild(newItem);使用 createElement 创建新元素，然后使用 appendChild 将其添加到现有元素中。
如果要一次添加多个元素，则使用 DocumentFragment 可以提高性能：
javascript
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const li = document.createElement("li");
li.textContent = `항목 ${i}`;
fragment.appendChild(li);
}
list.appendChild(fragment);事件处理
javascript
const button = document.querySelector("button");
button.addEventListener("click", (event) => {
console.log("클릭됨!");
console.log(event.target); // 被点击的元素
});使用 addEventListener 注册事件。可以检测点击、输入、滚动等各种事件。
既然有 React，为什么要学习这个？
React、Vue 等框架不会直接操作 DOM。当状态发生变化时，框架会自动更新 DOM。
但是，为了了解框架在做什么，您需要了解 DOM 的原理。在调试、集成库或诊断性能问题时，DOM 知识也是必需的。
关键点
DOM 是以 树状结构 形式表示 HTML 的，JavaScript 通过操作这个树来改变画面。 使用
querySelector查找元素，使用addEventListener处理事件。 即使是 React 等框架，内部也是在操作 DOM。