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) | 设置自定义属性（或修改固有属性） | div1.setAttribute('index', 0) |
getAttribute(name) | 获取属性值（支持自定义 / 固有属性） | div1.getAttribute('index') |
代码示例：给元素添加 index 属性并读取
var div1 = document.querySelector('.div1'); div1.setAttribute('index', 0); // 设置自定义属性 function div1Click(tt) { var index = tt.getAttribute('index'); // 读取 index tt.classList.add('bg' + index); // 动态添加类名 }
三、DOM 样式操作：改变元素的'外观'
修改样式有两种常用方式：
1． style 属性：适合修改单个样式（CSS 属性名需转'驼峰命名'，如 font-size → fontSize）。
2． className/classList：适合批量修改样式（通过操作 CSS 类名实现）。
代码示例 1：用 style 修改单个样式
function div2Click() { div2.style.color = "red"; // 修改文字颜色 div2.style.fontSize = "25px"; // 修改字体大小（驼峰命名） div2.style.backgroundColor = "yellow"; // 修改背景色 }
代码示例 2：用 className 批量添加类
div2.className += " div22"; // 给 div2 追加类名 div22（注意空格！）
代码示例 3：用 classList 更灵活地操作类
function div4Click() { div3.classList.add('div33'); // 添加类 if (div3.className.includes("div333")) { div3.classList.remove('div333'); // 移除类 } else { div3.classList.add("div333"); // 切换类 } }
四、DOM 事件处理：让网页'动起来'（含三种绑定方式）
事件是用户与网页交互的核心，本文代码展示了 三种事件绑定方式，各有特点：
1．行内绑定：直接在 HTML 标签中写 onclick
通过 onclick="函数名 (this)" 绑定，可传递 this 代表当前元素。
<div onclick="div1Click(this)">点击我</div>
function div1Click(tt) { // tt 就是点击的元素本身 var index = tt.getAttribute('index'); tt.classList.add('bg' + index); }
2．属性绑定：通过 元素.onclick = 函数 绑定（最常用）
直接在 JS 中给元素的 onclick 属性赋值函数，代码与 HTML 分离。
var div3 = document.querySelector(".div3"); div3.onclick = function() { console.log("div3 被点击了"); // 这里的 this 指向 div3 本身 };
3．addEventListener：更灵活的事件监听
支持绑定多个事件处理函数，不会覆盖之前的绑定。
var div4 = document.querySelector('.div4'); div4.setAttribute('index', 3); div4.addEventListener('click', function() { var index = this.getAttribute('index'); // this 指向 div4 this.classList.add('bg' + index); });
五、this 关键字：谁调用就指向谁
在 DOM 操作中，this 的指向核心规律是：谁调用事件 / 函数，this 就指向谁。
| 绑定方式 | this 指向 | 示例 |
|---|---|---|
行内绑定（传 this） | 当前点击的元素 | div1Click(this) 中 tt 是元素 |
属性绑定（onclick） | 当前调用的元素 | div3.onclick = function(){...} 中 this 是 div3 |
addEventListener | 当前触发事件的元素 | div4.addEventListener('click', ...) 中 this 是 div4 |
代码示例：this 在属性绑定中的应用
var div5 = document.querySelector(".div5"); div5.setAttribute('index', 4); div5.onclick = function() { var index = this.getAttribute('index'); // this 指向 div5 this.classList.add('bg' + index); };
六、DOM 核心知识汇总表
| 操作类型 | 方法 / 属性 | 示例 | 说明 |
|---|---|---|---|
| 获取元素 | querySelector() | document.querySelector(".div1") | 获取单个元素（CSS 选择器） |
getElementById() | document.getElementById("dd") | 通过 id 获取元素 | |
querySelectorAll() | document.querySelectorAll("div") | 获取所有匹配元素 | |
| 修改属性 | 元素。属性名 | div1.id = "dd2" | 修改标签固有属性 |
| 自定义属性 | setAttribute() | div1.setAttribute('index', 0) | 设置自定义属性 |
getAttribute() | div1.getAttribute('index') | 获取属性值（支持自定义） | |
| 修改样式 | style | div2.style.color = "red" | 修改单个样式（驼峰命名） |
className | div2.className += " div22" | 批量追加类名 | |
classList | div3.classList.add('div33') | 灵活添加 / 移除类 | |
| 事件绑定 | 行内绑定 | <div onclick="div1Click(this)"> | HTML 中直接绑定（传 this） |
| 属性绑定 | div3.onclick = function(){...} | JS 中绑定（常用） | |
addEventListener | div4.addEventListener('click', ...) | 可绑定多个函数 | |
this 指向 | 事件绑定中 | this.getAttribute('index') | 指向调用事件的元素 |