JavaScript DOM是什么_如何操作网页元素？

紅蓮之龍 2025-12-23 00:00:00 次阅读

DOM是浏览器将HTML转换成的JS可操作树状结构，包含节点、属性、方法和事件；通过getElementById、querySelector等获取元素；可修改内容、样式、显隐状态，并动态增删改元素。

JavaScript DOM（文档对象模型）是浏览器把 HTML 页面转换成的一个树状结构，让你能用 JavaScript 动态访问和修改网页内容。简单说，DOM 就是网页的“JS 可操作版”，有了它，你才能点击按钮弹出提示、实时更新文字、隐藏广告、切换主题……

DOM 是什么：网页的“JS 接口”

HTML 加载后，浏览器会解析它，生成一棵节点树：每个标签（如 、

）、文本、甚至注释，都变成一个对象（叫“节点”）。这些对象统称 DOM 节点，它们有属性（比如 id、className）、方法（比如 appendChild()、remove()），还能响应事件（比如点击、输入）。注意：DOM 不是 HTML 本身，也不是 JavaScript 语言的一部分——它是浏览器提供的 API，标准由 W3C 制定，所有现代浏览器都支持。
获取元素：先找到，才能动
操作前得先选中目标元素。常用方法有：


document.getElementById("myId") —— 按唯一 id 查找，最快最常用

document.querySelector("button.submit") —— 用 CSS 选择器找第一个匹配项（支持 .class、#id、div > p 等）

document.querySelectorAll("li.active") —— 返回所有匹配的元素 NodeList（类似数组，可遍历）

document.getElementsByTagName("p") 或 getElementsByClassName("box") —— 返回 HTMLCollection，实时更新，但兼容性略老

小提醒：确保脚本在元素加载完后再运行。推荐把 JS 放在