17370845950

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)

最容易被忽略的一点：动态插入的元素，其事件监听器必须在插入后单独绑定，或者用事件委托（监听父容器的 click，再用 e.target.matches("button.delete") 判断来源）。否则按钮点了没反应，不是代码写错了，是根本没绑上。