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

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 class="div1" 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') | 指向调用事件的元素 |