javascript的DOM是什么_如何操作网页元素【教程】_网络技术

发布时间 - 2026-01-26 00:00:00 点击率：次

DOM是浏览器将HTML解析成的节点树，根为document，包含Element、Text等节点类型；操作本质是修改内存对象，非HTML字符串。

DOM 不是 JavaScript 的一部分，而是浏览器提供的接口，JavaScript 通过它才能读写网页内容。别把它当成 JS 内置功能，否则遇到 document.getElementById 报错却查不到原因时会很困惑。

HTML 加载后，浏览器会解析成一棵节点树（Document Object Model），每个标签、文本、属性都变成一个可编程的对象。比如

Hello

会被转成 document → div#app → p → Text 这样的嵌套结构。

关键点：

最常用的是 document.getElementById 和 document.querySelector，但它们行为差异大，容易用错。

使用建议：

document.getElementById：只认 id，返回单个元素或 null；ID 重复时只返回第一个，且大小写敏感
document.querySelector：支持 CSS 选择器，返回第一个匹配项；若要全部，用 querySelectorAll（返回 NodeList，不是数组）
脚本放在里时，document.body 还没生成，所有获取操作都会返回 null —— 放在前，或监听 DOMContentLoaded 事件

改文字看着简单，但三个属性处理方式完全不同，选错会导致 XSS 或布局异常。

区别要点：

示例：el.textContent = '' 安全显示为文字；el.innerHTML = '' 会执行脚本（现代浏览器已限制 inline script 执行，但仍有风险）。

用 innerHTML += 看似方便，但会销毁重建整个子树，导致绑定的事件丢失、输入框焦点消失、Canvas 状态清空。

正确做法：

新增：用 document.createElement + element.appendChild，或 insertAdjacentHTML（指定插入位置，如 'beforeend'）
删除：用 element.remove()（现代标准），或 parentNode.removeChild(element)
批量操作：用 DocumentFragment 缓存多个新节点，最后一次性挂载，减少重排次数

注意：

innerHTML 插入含的 HTML 时，其 value 属性不会被还原 —— 原生属性和 DOM 属性不是一回事，这点常被忽略。