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

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