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

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

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

DOM 是什么：浏览器把 HTML 转成的对象树

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

Hello

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

关键点：

• document 是 DOM 树的根，所有操作都从它开始
• 节点类型分 Element（标签）、Text（文本）、Comment（注释）等，nodeType 可区分
• DOM 操作本质是操作内存中的对象，不等于直接改 HTML 字符串

获取元素：选对方法，避开常见失效场景

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

使用建议：

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

修改内容与属性：innerText vs textContent vs innerHTML

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

区别要点：

• innerText：受 CSS 影响（如 display: none 的文本不包含），会触发重排，且自动解码 HTML 实体
• textContent：纯文本，不管样式，不解析 HTML，性能更好，适合防 XSS 场景
• innerHTML：解析并渲染 HTML 字符串，有执行脚本风险；设为空字符串比 removeChild 更快清空子节点

示例：el.textCont

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

动态添加/删除元素：别直接拼接字符串

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

正确做法：

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

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