本文是JavaScript DOM 核心权威教程，涵盖 DOM 树、节点选择、遍历、增删改查、属性、样式、事件、渲染流程与性能优化。
一、什么是 DOM？
DOM（文档对象模型）是浏览器将 HTML 解析成的对象化树形结构，是 JavaScript 操作页面的唯一接口。
- DOM ≠ HTML 源码（浏览器会自动修复标签）
- DOM ≠ 渲染树（不含隐藏元素）
- DOM ≠ 开发者工具显示（包含伪元素）
// DOM 可以直接做这些事 document.querySelector('h1').textContent = 'Hello DOM' document.body.style.background = 'lightblue' btn.addEventListener('click', handleClick)二、DOM 树结构
DOM 像家族树：
document→ 树根<html>→ 根元素<head>,<body>→ 子节点- 元素、文本、注释都是节点（Node）
节点类型（必记）
- 元素节点：
1—<div> - 文本节点：
3— 文字 / 空格 / 换行 - 注释节点：
8—<!-- --> - document：
9 - 文档片段：
11
三、获取 DOM 元素（最常用 API）
1. 快速选择
document.getElementById(id)→ 最快document.querySelector(css)→ 返回第一个document.querySelectorAll(css)→ 返回所有（静态 NodeList）
2. 动态集合（实时更新）
getElementsByClassNamegetElementsByTagName
区别：
querySelectorAll是静态快照getElementsByClassName是实时集合
四、DOM 树遍历（父子兄弟）
向下（子元素）
elem.children→ 只取元素节点（推荐）elem.childNodes→ 所有节点（含文本 / 空格）elem.firstElementChildelem.lastElementChild
向上（父元素）
elem.parentElementelem.closest(css)→ 向上找最近匹配祖先（超级常用）
横向（兄弟）
elem.previousElementSiblingelem.nextElementSibling
五、创建、插入、删除、克隆元素
1. 创建
const div = document.createElement('div') const text = document.createTextNode('hello')2. 插入
parent.appendChild(elem)→ 最后parent.insertBefore(new, ref)→ 前面elem.append()/prepend()→ 现代用法elem.before()/after()→ 兄弟插入elem.insertAdjacentHTML(position, html)→ 快速插入 HTML
3. 删除
elem.remove()parent.removeChild(elem)
4. 克隆
elem.cloneNode(false)→ 浅克隆elem.cloneNode(true)→ 深克隆（常用）
5. 批量插入（高性能）
使用DocumentFragment只触发一次重排。
const frag = document.createDocumentFragment() for (...) { frag.appendChild(li) } ul.appendChild(frag)六、内容操作（innerHTML /textContent/innerText）
1. innerHTML
读取 / 写入 HTML →有 XSS 风险
elem.innerHTML = '<strong>Hi</strong>'2. textContent（推荐）
纯文本，安全、最快
elem.textContent = '<script>alert(1)</script>' // 原样显示3. innerText
受 CSS 影响，会触发重绘，慢
七、属性 vs 属性节点（Attributes vs Properties）
Attribute（HTML 源码里的）
elem.getAttribute('id') elem.setAttribute('value', '123')Property（DOM 对象实时状态）
elem.id elem.value elem.checked重点：
input.value（实时）≠getAttribute('value')（初始值）
