JavaScript操作DOM的核心是通过内置API获取、修改、添加或删除页面元素；常用方法包括getElementById、querySelector、querySelectorAll获取元素，textContent和innerHTML修改内容，createElement和appendChild等动态操作节点，addEventListener监听用户交互。
JavaScript操作DOM的核心是通过内置API获取、修改、添加或删除页面元素。掌握几个关键方法就能覆盖大部分日常需求。
获取元素的常用方法
从文档中定位目标元素是第一步，最常用的是：
- document.getElementById("id")：通过唯一ID获取单个元素，速度快，推荐优先使用
- document.querySelector("css选择器")：支持类名、标签、属性、伪类等任意CSS选择器，只返回第一个匹配项
- document.querySelectorAll("css选择器")：返回所有匹配元素的静态NodeList，可配合forEach遍历
- document.getElementsByClassName("cls") 和 document.getElementsByTagName("div")：返回HTMLCollection，注意它是实时集合，后续DOM变动会反映其中
修改元素内容与属性
拿到元素后，常用以下方式更新其内容或状态：
- element.textContent = "文本"：仅设置纯文本，不解析HTML，更安全
- element.innerHTML = "强调"：可插入HTML结构，但需注意XSS风险
- element.setAttribute("data-id", "123") 或 element.dataset.id = "123"：操作自定义属性（data-*）
-
element.className = "active" 或 element.classList.add("hidden")：推荐用classList管理
类名，支持add/remove/toggle/contains
类名，支持add/remove/toggle/contains添加、删除和替换元素
动态构建界面离不开节点操作：
- document.createElement("div") 创建新元素，再用 parent.appendChild(child) 插入末尾
- parent.insertBefore(newEl, refEl) 在指定元素前插入
- parent.removeChild(child) 删除子元素
- element.replaceWith(newEl) 直接替换自身（现代写法，兼容性注意）
- 批量插入可用 parent.append(el1, el2, ...) 或 parent.prepend(...)
监听与响应用户交互
让页面“活起来”的关键：
- element.addEventListener("click", handler)：推荐方式，支持多次绑定同一事件
- 常用事件类型包括 click、input、change、submit、keydown
- 在事件回调中用 event.target 获取触发事件的具体元素
- 表单类操作常配合 element.value 读写输入内容
