17370845950

DOM是浏览器将HTML转换成的可编程树状结构，每个元素为对象，支持读取、修改、添加或删除；常用获取方法有getElementById、querySelector等；可修改innerHTML、textContent、style及classList；新增用createElement+appendChild，删除用remove，替换用replaceChild。

JavaScript DOM（文档对象模型）是浏览器把 HTML 页面转换成的一个可编程的树状结构，每个 HTML 元素都变成一个对象，你可以用 JavaScript 去读取、修改、添加或删除它们。

DOM 是什么？

DOM 不是 HTML 本身，而是 HTML 在浏览器内存中的一份“活的映射”。比如你写了一个 Hello，浏览器加载后就会生成一个对应的 DOM 对象，它有属性（如 id、className）、方法（如 appendChild()）和事件（如 click）。这个对象可以被 JS 实时操作，页面也会立刻更新。

如何获取网页中的元素？

常用方法有这几个：

• document.getElementById("id名")：通过唯一 ID 获取单个元素，最常用也最快
• document.querySelector("CSS选择器")：支持类名（.btn）、标签（p）、属性（[data-id]）等，只返回第一个匹配项
• document.querySelectorAll("CSS选择器")：返回所有匹配的元素集合（NodeList），可遍历
• document.getElementsByClassName("类名") 或 document.getElementsByTagName("标签名")：返回 HTMLCollection，注意不是数组，要用 Array.from() 转换才能用 forEach

怎么修改元素的内容和样式？

拿到元素后，就可以直接改它的属性：

• innerHTML：设置或读取元素内的 HTML 字符串（含标签），比如 el.innerHTML = "Hi"
• textContent：只处理纯文本，不解析 HTML，更安全，防 XSS
• element.style.xxx：直接改行内样式，如 el.style.color = "red"；注意 CSS 属性要转成驼峰，比如 backgroundColor 对应 background-color
• element.className 或 element.classList：推荐用 classList.add()、classList.toggle() 等方法增删类名，比拼字符串更可靠

如何添加、删除或替换元素？

DOM 操作的核心是“节点关系”：

• document.createElement("标签名") 创建新元素，再用 appendChild() 插入到某个父元素末尾
• parentNode.insertBefore(newEl, referenceEl) 把新元素插在指定元素前面
• element.remove() 直接删掉自己（现代浏览器支持）
• parentNode.replaceChild(newEl, oldEl) 替换子元素
• 插入 HTML 字符串可用 insertAdjacentHTML(position, htmlString)，position 可选 "beforebegin"、"afterend" 等，灵活且不重绘整个父容器

DOM 操作不复杂但容易忽略细节，比如获取元素时确保 DOM 已加载完（放在 DOMContentLoaded 事件里），或者批量修改样式时优先用 class 切换而不是反复设 style。掌握这些，就能稳稳地控制网页行为和外观。