JavaScript操作DOM的核心是通过内置API获取、修改、添加或删除页面元素；常用方法包括getElementById、querySelector、innerHTML、classList、createElement、addEventListener等，配合事件委托可高效实现动态交互。
JavaScript操作DOM的核心是通过内置API获取、修改、添加或删除页面元素。掌握常用方法能高效实现动态交互，不需要框架也能完成大部分前端任务。
获取元素的常用方法
定位目标元素是操作DOM的第一步，浏览器提供了多种选择器方式：
- document.getElementById("id")：通过唯一ID获取单个元素，速度快，最常用
- document.querySelector("css-selector")：返回匹配的第一个元素，支持类名（.box）、标签（div）、属性（[data-id]）等任意CSS选择器
- document.querySelectorAll("css-selector")：返回NodeList（类似数组），包含所有匹配元素，适合批量操作
- document.getElementsByClassName("cls") 和 document.getElementsByTagName("div")：返回HTMLCollection，实时更新，但兼容性好，适合简单场景
修改元素内容和属性
获取元素后，常需更新其显示内容或行为特性：
- element.textContent：设置或读取纯文本内容，不解析HTML，防XSS更安全
- element.innerHTML：设置或读取含HTML结构的内容，功能强但需自行确保内容可信
- element.setAttribute("name", "value") 和 element.getAttribute("name")：操作自定义或标准属性（如src、href、data-*）
- element.className 或 element.classList：推荐用 classList.add()、classList.remove()、classList.toggle() 管理CSS类，语义清晰且支持多类操作
添加、删除和替换元素
动态构建页面结构依赖这些基础方法：
立即学习“Java免费学习笔记（深入）”；
- document.createElement("tag") 创建新元素，再用 appendChild() 或 insertBefore() 插入到父节点中
- parent.replaceChild(newEl, oldEl) 替换子元素；parent.removeChild(child) 删除指定子节点
- element.insertAdjacentHTML(position, htmlString)：在元素周围插入HTML，position可为 "beforebegin"、"afterbegin"、"beforeend"、"afterend"，写法简洁灵活
- 注意：直接赋值 innerHTML = "..." 会清空原有子节点并重新解析，适合整块替换，但可能丢失事件绑定或表单状态
响应用户交互（事件绑定）
让DOM“活起来”的关键在于监听事件：
- element.addEventListener("click", handler)：推荐方式，支持同一元素绑定多个同类型事件，且可移除（removeEventListener）
- 常用事件类型包括："click"、"input"、"change"、"submit"、"keydown" 等
- 事件委托技巧：给父容器绑定事件，用 event.target 判断实际触发元素，适合动态增删子项的列表
- 避免使用 onclick="..." 内联写法，不利于维护和分离关注点
基本上就这些。DOM操作不复杂但容易忽略细节，比如 NodeList 不是真数组（需转 Array 才能用 map/filter），或者 classList 比 className 更安全可控。熟练组合使用，就能写出清晰可靠的交互逻辑。
