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);
  });

别依赖 window.onload：它要等所有图片、CSS 加载完，延迟更大；也别在 setTimeout 里轮询查找——不可靠且浪费性能。

真实项目里，哪怕用了框架，DOM 存在性检查（if (el)）和事件委托（document.addEventListener("click", e => {...})）仍是绕不开的基本功。