DOM是什么？JavaScript如何操作？

）、文本节点（标签内的文字）和 属性节点（如 id="box"）组成的树。根节点是 document，所有操作都从它开始。

比如这段 HTML：

对应 DOM 中：document → div#container → p → 文本节点 "Hello"

常用 DOM 查找方法

要操作元素，先得找到它。JS 提供了多个定位方式：

• document.getElementById("id")：通过唯一 id 获取单个元素（最快最常用）
• document.querySelector("css选择器")：支持类名、标签、属性等，返回第一个匹配项（如 querySelector(".btn")）
• document.querySelectorAll("css选择器")：返回所有匹配的元素集合（NodeList，可遍历）
• element.children 或 element.childNodes：获取子元素或全部子节点（含空白文本）

修改内容、属性和样式

找到元素后，就能动态改变它：

• element.textContent = "新文字"：安全替换文本（不解析 HTML）
• element.innerHTML = "加粗"：直接写 HTML（注意 XSS 风险）
• element.setAttribute("class", "active") 或 element.className = "active"
• element.style.color = "red"：改内联样式（注意驼峰命名，如 backgroundColor）

添加、删除和替换元素

DOM 支持动态增删结构：

• parent.appendChild(newElement)：在末尾添加子元素
• parent.insertBefore(newElement, referenceElement)：插到某个元素前
• element.remove()：直接删掉自己（现代写法，兼容性好）
• parent.replaceChild(newElement, oldElement)：用新元素替换旧的

基本上就这些。DOM 操作不复杂但容易忽略细节，比如获取元素时确保 DOM 已加载（常用 DOMContentLoaded 事件），或者修改样式优先用 class 而非 style，更利于维护。

好了，本文到此结束，带大家了解了《DOM是什么？JavaScript如何操作？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！