DOM 与事件
DOM 基础
理解 DOM 树结构、节点类型与选择器
DOM 基础
DOM（Document Object Model）将 HTML 文档映射为树形结构，JavaScript 可操作它来动态改变页面。
学完本章你将： 理解 DOM 树结构与选择器 API。
DOM 树结构
html
<html>
<head><title>页面标题</title></head>
<body>
<div id="app">
<p class="text">Hello</p>
</div>
</body>
</html>document
└─ html
├─ head
│ └─ title
└─ body
└─ div#app
└─ p.text选择 DOM 元素
javascript
// 1. 通过 ID（最快）
let app = document.getElementById("app");
// 2. 通过类名
let texts = document.getElementsByClassName("text"); // 动态集合
let paragraphs = document.getElementsByTagName("p");
// 3. querySelector（推荐，CSS 选择器语法）
let first = document.querySelector(".text"); // 第一个匹配
let all = document.querySelectorAll(".text"); // 全部匹配（静态 NodeList）
let byAttr = document.querySelector('[data-id="1"]');
// 4. 关系导航
let parent = app.parentNode;
let children = app.children;
let firstChild = app.firstElementChild;
let next = app.nextElementSibling;读取内容
javascript
let el = document.querySelector(".text");
// 文本内容
console.log(el.textContent); // "Hello"（所有文本，忽略样式）
console.log(el.innerText); // "Hello"（考虑 CSS 显示）
// HTML 内容
console.log(el.innerHTML); // "Hello"（包括子元素 HTML）
// 属性
el.getAttribute("class"); // "text"
el.id; // ""
el.className; // "text"
el.classList; // DOMTokenList ["text"]NodeList vs HTMLCollection
javascript
// HTMLCollection：动态更新（getElementsBy...）
let collection = document.getElementsByClassName("item");
console.log(collection.length);
// NodeList：静态快照（querySelectorAll）
let nodeList = document.querySelectorAll(".item");
console.log(nodeList.length);
// NodeList 可以直接 forEach
nodeList.forEach(el => console.log(el));
// HTMLCollection 需要转数组
Array.from(collection).forEach(el => console.log(el));节点类型
javascript
let div = document.createElement("div");
div.textContent = "Hello";
let text = div.firstChild;
console.log(div.nodeType); // 1 = 元素节点
console.log(text.nodeType); // 3 = 文本节点
// 常用节点类型
// 1: ELEMENT_NODE
// 3: TEXT_NODE
// 8: COMMENT_NODE
// 9: DOCUMENT_NODE