什么是DOM以及如何使用javascript操作它？【教程】

关键点：

• document.body 是常用入口，但不要假设它一定存在——脚本若在 中执行，body 可能还没解析完
• 文本内容属于 Text 类型节点，不是 Element，调用 .innerHTML 或 .textContent 才能安全读写
• childNodes 包含所有子节点（包括空白文本节点），而 children 只返回元素节点，日常操作优先用 children

怎么查到想要的元素？

别硬遍历树，用现代选择器 API 直接定位：

立即学习“Java免费学习笔记（深入）”；

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包

下载

• document.getElementById("id")：最快，但只能靠 ID，且 ID 必须唯一
• document.querySelector("css-selector")：支持任意合法 CSS 选择器（如 "nav a.active"、"[data-id='123']"），只返回第一个匹配项
• document.querySelectorAll("css-selector")：返回 NodeList，不是数组，但可用 [...nodeList] 展开或直接调用 forEach
• 避免用 getElementsByName 或过时的 getElementsByTagName，兼容性虽好，但表达力弱、返回动态集合易出错

改内容、加样式、删节点，怎么写才不翻车？

核心原则：少用 innerHTML，多用专一方法；改样式优先走 className 或 classList，而非拼字符串。

• 设文本内容：用 el.textContent = "xxx"，而不是 el.innerHTML = "xxx" —— 后者会触发 HTML 解析，有 XSS 风险，也更慢
• 加/删类名：用 el.classList.add("active")、el.classList.toggle("hidden")，比手动操作 className 字符串可靠得多
• 插入新元素：先用 document.createElement("div") 创建，再用 parent.appendChild(el) 或 parent.insertBefore(el, ref) 插入；别直接拼 HTML 字符串后赋给 innerHTML
• 删除节点：没有 .remove() 方法的老环境（IE）得写 el.parentNode.removeChild(el)；现代环境可直接用 el.remove()

事件监听为什么总失效？

常见原因不是语法错，而是节点没找到，或监听时机不对：

• 脚本放在 里，但 DOM 还没加载完 → 改用 DOMContentLoaded 事件包裹，或把 script 标签加 defer
• 元素是后续 JS 动态生成的 → 不要对它直接绑事件，改用事件委托：document.addEventListener("click", e => { if (e.target.matches(".btn")) { ... } })
• 用了 onclick="..." 行内绑定 → 很难维护，且无法用 removeEventListener 解绑；统一用 addEventListener
• 监听了冒泡阶段却调用 e.stopPropagation() 过度 → 导致父级逻辑中断，除非明确需要，否则别轻易阻止冒泡

DOM 操作真正难的不是语法，而是对节点生命周期、事件流、重排重绘机制的理解。比如频繁修改 style 属性会强制同步计算样式，而批量操作 classList 或用 CSSOM 批量更新更高效。这些细节不写进控制台报错，但会让页面卡顿得莫名其妙。