DOM(Document Object Model,文档对象模型)是 JavaScript 操作 HTML 文档的桥梁,它将网页转换为一棵'树',每个 HTML 标签、属性、文本都是树上的节点。掌握 DOM 操作,就能动态改变网页内容、样式和交互。本文结合实战代码,从基础到进阶系统梳理 DOM 核心知识。
一、DOM 元素获取:找到要操作的'节点'
操作 DOM 的第一步是'找到元素',常用方法如下:
| 方法 | 描述 | 示例 |
|---|---|---|
querySelector() | 通过 CSS 选择器获取单个元素 | document.querySelector(".div1") |
getElementById() | 通过 id 获取单个元素 | document.getElementById("dd") |
querySelectorAll() | 通过 CSS 选择器获取所有元素 | document.querySelectorAll("div") |
代码示例:
var div1 = document.querySelector(".div1"); // 获取 class 为 div1 的第一个元素 var div2 = document.querySelector(".div2");
二、DOM 属性操作:修改标签的'固有属性'与'自定义属性'
1.固有属性操作
HTML 标签的固有属性(如 id、src、href)可通过 元素。属性名 直接修改。
代码示例:切换 div1 的 id 属性
function div1Click() { if (div1.id == "dd") { div1.id = "dd2"; // 直接修改 id 属性 } else { div1.id = "dd"; } }
2.自定义属性操作
除了固有属性,还可给元素添加自定义属性(如代码中的 index)存储数据,常用方法:
| 方法 | 描述 | 示例 |
|---|---|---|
setAttribute(name, value) |


