JS DOM属性操作完全指南：内容、样式与自定义属性

前言

DOM操作的核心在于操作元素的内容、属性和样式。本文系统讲解如何使用JavaScript修改网页元素的文本内容 、HTML内容 、标准属性 、样式属性 以及自定义属性 ，并介绍经典的排他思想算法。掌握这些内容，你就能灵活操控网页的方方面面。

一、改变元素内容

1.1 三种方式对比

属性	说明	是否保留空格换行	是否识别HTML标签
`innerText`	获取或设置元素的文本内容	❌ 去除	❌ 不识别
`innerHTML`	获取或设置元素的HTML内容	✅ 保留	✅ 识别
`textContent`	获取或设置文本内容，保留格式	✅ 保留	❌ 不识别

1.2 读取时的区别

复制代码

// HTML结构：<div><a href="#">天气炎热</a></div>

console.log(divEle.innerText);   // "天气炎热"（去除了标签）
console.log(divEle.innerHTML);   // "<a href="#">天气炎热</a>"（包含标签）
console.log(divEle.textContent); // "天气炎热"（保留了格式）

小结：

innerText：去除空格、换行和标签，只读文本
innerHTML：可以获取到元素里面的标签，同时保留空格和换行

1.3 写入时的区别

复制代码

divEle.innerText = "<h1>天气凉爽</h1>";
// 页面显示文本："<h1>天气凉爽</h1>"（不识别标签）

divEle.innerHTML = "<h1>天气凉爽</h1>";
// 页面渲染为h1标题（识别并解析标签）

1.4 nodeValue 与 textContent

nodeValue：是所有节点对象都具有的属性，返回值取决于节点类型：

节点类型	nodeValue返回值
元素节点	`null`
文本节点	文本内容
属性节点	属性的值

textContent：返回元素及其所有后代的文本内容，保留格式但不渲染HTML。

1.5 应用场景：内容切换

复制代码

let flag = true;

function toggleContent() {
    if (flag) {
        divEle.innerHTML = "<h2>内容一</h2>";
    } else {
        divEle.innerHTML = "<h2>内容二</h2>";
    }
    flag = !flag;
}

二、操作元素标准属性

2.1 常见可操作属性

属性	说明	示例
`src`	图片路径	`imgEle.src = "./img/pic.jpg"`
`title`	提示文本	`imgEle.title = "图片说明"`
`value`	表单元素值	`inp.value = "新内容"`
`disabled`	禁用状态	`inp.disabled = true`
`type`	表单类型	`inp.type = "password"`

2.2 图片切换示例

复制代码

let imgEle = document.querySelector("img");

// 切换为小狗图片
function showDog() {
    imgEle.src = "./img/pic_01.jpg";
    imgEle.title = "小狗";
}

// 切换为小猫图片
function showCat() {
    imgEle.src = "./img/pic_02.jpg";
    imgEle.title = "小猫";
}

2.3 表单元素操作

复制代码

let inp = document.querySelector("input");

// 修改输入框内容
document.getElementById("edit").onclick = function() {
    inp.value = "内容被修改了";
};

// 禁用输入框
document.getElementById("dis").onclick = function() {
    inp.disabled = true;
};

三、操作样式属性

3.1 两种操作方式

方式	语法	特点
行内样式	`element.style.属性名`	直接修改行内样式，权重高
类名样式	`element.className`	批量修改样式，效率更高

3.2 行内样式操作

注意事项：

JS中的样式属性采用驼峰命名法 ，如 fontSize、backgroundColor
修改的是行内样式，CSS权重较高

let box = document.querySelector(".box");

// 方法一：直接设置style属性
box.style = "background-color: pink;";

// 方法二：通过style对象设置（推荐）
box.style.backgroundColor = "pink";
box.style.fontSize = "30px";
box.style.color = "red";

3.3 类名操作

注意事项：

class 是保留字，因此使用 className 来操作类名属性
className 会直接覆盖原先的类名，如需保留需手动拼接

// 添加类名（保留原有类名）
box.addEventListener("mouseenter", function() {
box.className = "box box1"; // 保留box类，添加box1类
});

// 完全替换类名
box.className = "newClass";

四、排他思想

4.1 算法原理

排他思想常用于按钮组、选项卡等场景，核心步骤如下：

步骤	操作	说明
①	清除所有	清除所有同类元素的样式
②	设置当前	为当前触发的元素设置特殊样式

注意：顺序不能颠倒，必须先清除再设置。

4.2 代码实现

复制代码

let btns = document.querySelectorAll("button");

for (let i = 0; i < btns.length; i++) {
    btns[i].onclick = function() {
        // 第一步：清除所有按钮的样式
        for (let j = 0; j < btns.length; j++) {
            btns[j].style.backgroundColor = "";
        }
        // 第二步：为当前按钮设置样式
        this.style.backgroundColor = "pink";
    };
}

4.3 this指向问题

在事件回调函数中，this 指向触发事件的元素（事件源）。

复制代码

btns[i].onclick = function() {
    console.log(this); // 指向被点击的按钮
};

4.4 var与let的区别

关键字	作用域	变量提升	适用场景
`var`	函数作用域	✅ 存在	旧代码兼容
`let`	块级作用域	❌ 不存在	现代开发推荐

在循环绑定事件时，使用 let 可以避免经典的作用域问题：

复制代码

// 使用var时，所有点击都输出最后一个值
for (var i = 0; i < 5; i++) {
    btns[i].onclick = function() {
        console.log(i); // 全部输出5
    };
}

// 使用let时，每个点击输出正确的索引
for (let i = 0; i < 5; i++) {
    btns[i].onclick = function() {
        console.log(i); // 输出对应的索引值
    };
}

五、自定义属性操作

5.1 标准操作方法

方法	功能	适用场景
`element.getAttribute('属性')`	获取属性值	自定义属性和标准属性
`element.setAttribute('属性', '值')`	设置属性值	自定义属性和标准属性
`element.removeAttribute('属性')`	移除属性	自定义属性和标准属性

复制代码

let aEle = document.querySelector("a");

// 获取属性
console.log(aEle.getAttribute("hello")); // 获取自定义属性
console.log(aEle.getAttribute("href"));  // 获取标准属性

// 设置属性
aEle.setAttribute("hello", "abc");
aEle.setAttribute("href", "abc");

// 移除属性
aEle.removeAttribute("hello");
aEle.removeAttribute("href");

5.2 两种获取方式的区别

方式	语法	适用范围
直接属性访问	`element.属性名`	仅限元素自带的标准属性（id、href、src等）
getAttribute	`element.getAttribute('属性')`	标准属性和自定义属性均可

5.3 H5自定义属性规范

H5规定自定义属性以 data- 开头，多个单词用 - 连接。

复制代码

<div data-a="hello" data-first-name="张三"></div>

两种读取方式：

复制代码

let div = document.querySelector("div");

// 方式一：getAttribute（通用）
console.log(div.getAttribute("data-a"));         // "hello"
console.log(div.getAttribute("data-first-name")); // "张三"

// 方式二：dataset对象（推荐，H5规范）
console.log(div.dataset.a);        // "hello"（点语法）
console.log(div.dataset["a"]);     // "hello"（方括号语法）
console.log(div.dataset.firstName); // "张三"（驼峰命名）

命名转换规则：

HTML属性	dataset访问方式
`data-a`	`dataset.a`
`data-hello`	`dataset.hello`
`data-first-name`	`dataset.firstName`
`data-last-name`	`dataset.lastName`

六、重点总结

6.1 核心方法对比

方法	用途	返回值
`innerText`	操作纯文本内容	字符串
`innerHTML`	操作HTML内容	字符串
`getAttribute()`	获取属性值	字符串
`setAttribute()`	设置属性值	无
`removeAttribute()`	移除属性	无

6.2 注意事项

项目	说明
样式优先级	行内样式 > ID选择器 > 类选择器 > 标签选择器
性能考虑	`className` 操作比逐条修改 `style` 更高效
兼容性	`dataset` 在IE11+支持良好
代码规范	自定义属性使用 `data-` 前缀

6.3 最佳实践

场景	推荐做法
样式修改	优先使用类名切换（className）
自定义属性	遵循H5规范（data-前缀）
事件处理	使用 `this` 指向事件源
循环绑定	使用 `let` 避免作用域问题

总结

本文系统梳理了JavaScript DOM属性操作的完整知识体系：

主题	核心要点
元素内容	innerText（纯文本）、innerHTML（含标签）、textContent（保留格式）
标准属性	src、title、value、disabled等，直接通过属性名操作
样式属性	style行内样式（驼峰命名）、className类名切换（更高效）
排他思想	先清除所有，再设置当前
自定义属性	getAttribute/setAttribute/removeAttribute + H5 dataset规范