零基础快速入门前端DOM 操作核心知识与实战解析（完整汇总版）(可用于备赛蓝桥杯Web应用开发)

DOM（Document Object Model，文档对象模型）是 JavaScript 操作 HTML 文档的桥梁，它将网页转换为一棵 “树”，每个 HTML 标签、属性、文本都是树上的节点。掌握 DOM 操作，就能动态改变网页内容、样式和交互。本文结合实战代码，从基础到进阶系统梳理 DOM 核心知识。

一、DOM 元素获取：找到要操作的 “节点”

操作 DOM 的第一步是 “找到元素”，常用方法如下：

代码示例：

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）存储数据，常用方法：

代码示例：给元素添加 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 在属性绑定中的应用

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 核心知识汇总表