javascript中的DOM是什么_如何通过javascript操作网页元素？_技术教程

DOM是浏览器解析HTML后生成的JS可操作对象树，非HTML本身；它以document为根节点构成树形结构，元素和文本分别对应Element与Text节点，且DOM变更不影响原始HTML源码。

DOM 是浏览器把 HTML 转成的 JS 可操作对象树

DOM（Document Object Model）不是 HTML 本身，而是浏览器解析 HTML 后生成的一套 JS 对象结构。它让 document 变成一个可遍历、可修改的树形对象——html 元素是根，head 和 body 是子节点，每个标签都对应一个 Element 实例，文本内容则是 Text 节点。

关键点：DOM 和 HTML 字符串不等价。比如你用 JS 删除一个元素，HTML 源码没变，但 DOM 树里它已经不存在了；反之，直接改 innerHTML 会重建子节点，可能丢失事件监听器或表单输入值。

用 `querySelector` 和 `getElementById` 找元素最常用

找元素的本质是「从 document 开始按条件筛选节点」。现代写法优先用 querySelector 系列，兼容性好且语法统一：

document.getElementById("myId")：最快，但只能靠 id，且返回 null 而非空数组
document.querySelector(".btn")：返回第一个匹配的 Element，没找到返回 null
document.querySelectorAll("input[type='text']")：返回 NodeList（类数组），支持 forEach，但不支持 map 或展开运算符（需先转数组：[...nodelist]）
别用 getElementsByClassName 或 getElementsByTagName：返回的是「动态集合」，后续 DOM 变化会实时反映在该集合中，容易引发意料外的循环长度变化

改内容、属性、样式得区分 API 类型

不同修改目标对应不同方法，混用会导致静默失败或不符合预期：

改文本内容：el.textContent = "新文字"（安全，防 XSS）或 el.innerText（受 CSS 影响，会触发重排）
改 HTML 结构：el.innerHTML = "加粗"（注意引号转义），但会销毁子节点上的事件监听器
改属性：el.setAttribute("disabled", "") 或更推荐的属性访问器：el.disabled = true（布尔属性如 disabled、checked 必须用后者，否则设空字符串也不生效）
改行内样式：el.style.color = "red"（注意驼峰命名），批量设样式建议切换 className 或操作 classList

事件绑定必须等元素存在，否则 `querySelector` 返回 `null`

脚本执行时机不对是新手最常踩的坑。如果 JS 在里执行，而目标元素在底部，querySelector 就找不到它。

解决方式只有两个可靠选择：

把放在前（最简单直接）

用 DOMContentLoaded 事件：

document.addEventListener("DOMContentLoaded", () => {
  const btn = document.querySelector("#submit");
  if (btn) btn.addEventListener("click", handler);
});