前端 DOM 操作核心知识与实战解析

代码示例：给元素添加 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 核心知识汇总表