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

狼影 2025-12-25 00:00:00 次阅读

DOM是浏览器将HTML解析成的树状节点结构，JavaScript通过API操作节点实现动态交互；常用方法包括getElementById、querySelector等获取元素，修改textContent、style、classList等属性，以及createElement、appendChild等增删元素操作。

JavaScript DOM（文档对象模型）是浏览器将网页解析成树状结构后，提供给 JavaScript 操作的接口。它把 HTML 文档变成一个可编程的对象集合，让 JS 能读取、修改、添加或删除页面上的元素。

DOM 是什么：网页的“JS 可见版”

当你写好一个 HTML 页面，浏览器加载后并不会直接运行 HTML 代码，而是先把它解析成一棵节点树——这就是 DOM 树。每个标签（如 、

）、文本、甚至注释，都会变成一个“节点”。JavaScript 通过 DOM API 访问和控制这些节点，实现动态交互。
比如：
欢迎
 在 DOM 中就是一个 Element 节点，有 id 属性、文本内容、父节点、子节点等可读写的属性和方法。

获取元素：找到你想操作的那个“人”
操作前得先定位目标元素。常用方法有：


document.getElementById("id名") —— 最快，靠唯一 id 查找（如 document.getElementById("title")）
  
document.querySelector("CSS选择器") —— 灵活，支持类名、标签、属性等（如 document.querySelector(".btn") 或 document.querySelector("[data-id='123']")）
  
document.querySelectorAll("选择器") —— 返回所有匹配的元素 NodeList（类似数组，可遍历）
  
document.getElementsByTagName("div") / getElementsByClassName("active") —— 返回 HTMLCollection，实时更新，但兼容性好

修改元素：改内容、样式、属性
拿到元素后，就能自由编辑了：


改文本：el.textContent = "新文字"（安全，不解析 HTML）或 el.innerHTML = "加粗"（可插 HTML，但注意 XSS 风险）
  
改样式：el.style.color = "red"（内联样式，驼峰写法）；更推荐加/删 class：el.classList.add("highlight")、el.classList.toggle("hidden")

  
改属性：el.setAttribute("disabled", "") 或简写 el.disabled = true（布尔属性建议用属性赋值）

增删元素：动态组装页面
DOM 支持完全动态构建结构：


创建：document.createElement("li") + document.createTextNode("文字")

  
插入：parent.appendChild(newEl)（末尾）、parent.insertBefore(newEl, refEl)（指定位置）
  
删除：el.remove()（最简单），或 parent.removeChild(el)

  
替换：parent.replaceChild(newEl, oldEl)


小技巧：批量操作可用 DocumentFragment 减少重排重绘，提升性能。

DOM 操作本质就是和浏览器“商量”怎么呈现页面。理解节点关系、选对方法、注意执行时机（比如确保元素已加载），就能稳稳控制网页行为。