javascript DOM是什么_如何动态修改网页内容？_技术教程

DOM是浏览器将HTML解析成的内存中对象树，JavaScript通过它操作页面元素；它是可访问修改的对象模型，非HTML字符串，支持安全属性操作与事件绑定。

DOM 是浏览器把 HTML 文档解析成的一棵树状结构，JavaScript 通过它才能真正“看到”和操作页面元素。没有 DOM，document.getElementById 就只是个报错的函数。

DOM 是什么：不是 HTML 字符串，而是内存里的对象树

HTML 是文本，DOM 是浏览器加载后在内存中构建的、可被 JavaScript 访问和修改的对象模型。同一个 Hello，在 HTML 文件里是字符串，在 DOM 里是拥有 id、textContent、className 等属性的 JS 对象。

关键区别：

修改 HTML 字符串（比如用 innerHTML = "..."）会触发重新解析和重绘，可能清空子元素绑定的事件监听器
操作 DOM 节点（比如用 element.textContent = "..." 或 element.classList.add("active")）只改属性或内容，更安全、更可控
document.querySelector 返回的是 DOM 元素对象，不是字符串 —— 它能调用 .addEventListener，但不能直接 .split("")

怎么获取元素：别只记 `getElementById`，优先用 `querySelector`

querySelector 和 querySelectorAll 支持 CSS 选择器语法，更灵活，现代项目中应作为首选。

常见写法对比：

获取单个元素：document.querySelector("#header")、document.querySelector("button[data-action='save']")
获取多个元素：document.querySelectorAll(".item") 返回 NodeList，可用 forEach 遍历
getElementById 快一点但只能按 ID 查；getElementsByClassName 返回的是动态 HTMLCollection，长度会随 DOM 变化，容易引发意外交互
注意：如果元素还没加载完就执行查询（比如脚本放在里），结果是 null —— 把脚本放前，或用 DOMContentLoaded 事件包裹

怎么改内容：分清 `textContent`、`innerText` 和 `innerHTML`

三者行为差异直接影响安全性与渲染效果，选错会导致 XSS 漏洞或样式异常。

textContent：只处理纯文本，忽略 HTML 标签，不触发重排，最安全。适合填入用户输入内容
innerText：受 CSS 影响（比如 display: none 的文本不计入），会触发重排，性能较差，IE 专属行为残留，尽量避免
innerHTML：解析并渲染 HTML 字符串，危险！若拼接了未过滤的用户数据（如 el.innerHTML = "" + userInput + " "），可能执行任意脚本

安全替代方案：

const el = document.querySelector("#output");
const safeText = userInput.replace(/[&<>"']/g, c => ({
  '&': '&',
  '<': '<',
  '>': '>',
  '"': '"',
  "'": '''
}[c]));
el.textContent = safeText;

怎么增删元素：别用 `innerHTML +=`，用 `appendChild` 或 `insertAdjacentHTML`

innerHTML += 看似方便，实则每次都会销毁旧节点、重建全部子树，已绑定的事件监听器全部丢失，表单输入框内容清空，性能也差。

添加新节点：先用 document.createElement 创建，再用 appendChild 或 insertBefore 插入
批量插入 HTML 片段：用 element.insertAdjacentHTML("beforeend", "
New

")

innerHTML +=

删除节点：没有 .remove() 方法的老浏览器需用 parentNode.removeChild(child)；现代环境可直接调用 element.remove()
替换节点：用 parentNode.replaceChild(newNode, oldNode)，或更简洁的 oldNode.replaceWith(newNode)