副队长JavaScript教程(53)-DOM操作元素的属性

点此查看 所有教程、项目、源码导航

文章目录

[1. 背景](#1. 背景)
[2. 两种操作属性的方式](#2. 两种操作属性的方式)
[3. 打点方式操作内置属性](#3. 打点方式操作内置属性)
[4. setAttribute、getAttribute、removeAttribute](#4. setAttribute、getAttribute、removeAttribute)
- [4.1 getAttribute 获取属性](#4.1 getAttribute 获取属性)
- [4.2 setAttribute 设置属性](#4.2 setAttribute 设置属性)
- [4.3 removeAttribute 删除属性](#4.3 removeAttribute 删除属性)
[5. 两种方式的核心区别](#5. 两种方式的核心区别)
[6. dataset 操作 data 自定义属性](#6. dataset 操作 data 自定义属性)
[7. 小结](#7. 小结)

1. 背景

上一篇我们学习了如何读写元素内部的内容，用到了 innerText、innerHTML、value。

除了元素里面的内容，HTML 标签上还有很多属性，比如 id、class、src、href、title 等。

本篇我们就来学习，如何通过 JS 读取、修改、删除 DOM 元素上的属性。

2. 两种操作属性的方式

操作元素属性分为两大类：元素对象直接打点访问 、专门的属性方法（setAttribute /getAttribute/removeAttribute） 。

这两种方式有区别，我们分开讲解。

3. 打点方式操作内置属性

对于 HTML 原生自带的标准属性，我们可以直接通过 元素.属性名 的形式读写。

语法：

js 复制代码

// 读取属性
var 变量 = 元素.属性名;
// 修改属性
元素.属性名 = "属性值";

示例 HTML：

html 复制代码

<a id="link" href="https://www.baidu.com" target="_blank">百度</a>
<img id="logo" src="logo.jpg" alt="图片">

示例 JS 代码：

js 复制代码

var link = document.querySelector("#link");
// 读取href
console.log(link.href);
// 修改href
link.href = "https://www.bilibili.com";

var logo = document.querySelector("#logo");
console.log(logo.src);
logo.src = "new.jpg";

重点说明：

这种方式只适合标准内置属性：id、href、src、title、target、checked、disabled 等；
class 是特例：不能直接写 元素.class，要用 元素.className；
部分属性是布尔类型，比如 checked、disabled，值是 true/false，不是字符串。

class 示例：

html 复制代码

<div id="box" class="red">测试盒子</div>

js 复制代码

var box = document.querySelector("#box");
console.log(box.className);
box.className = "blue";

4. setAttribute、getAttribute、removeAttribute

这一组方法通用性更强，不管是标准属性，还是我们自定义的属性，都可以操作。

4.1 getAttribute 获取属性

js 复制代码

var 值 = 元素.getAttribute("属性名");

4.2 setAttribute 设置属性

js 复制代码

元素.setAttribute("属性名", "属性值");

4.3 removeAttribute 删除属性

js 复制代码

元素.removeAttribute("属性名");

示例 HTML：

html 复制代码

<div id="box" data-msg="hello">测试</div>

js 复制代码

var box = document.querySelector("#box");
// 获取
console.log(box.getAttribute("data-msg"));
// 设置
box.setAttribute("data-msg", "你好");
// 删除
box.removeAttribute("data-msg");

重点说明：

属性名直接写，不需要做特殊转换；
所有属性读取出来的结果，都是字符串；
适合自定义属性，入门阶段写自定义属性推荐用 data-* 规范。

5. 两种方式的核心区别

打点（元素。属性名）：主要操作标准属性，部分属性会自动转换类型（checked 是布尔值），拿到的是浏览器加工后的结果；
setAttribute/getAttribute：读写标签上原始的属性，拿到的永远是字符串，自定义属性只能用这一组方法。

举个经典例子：

html 复制代码

<input type="checkbox" id="ck">

js 复制代码

var ck = document.querySelector("#ck");
console.log(ck.checked); // true / false 布尔值
console.log(ck.getAttribute("checked")); // "checked" 字符串或者null

6. dataset 操作 data 自定义属性

针对 data- 开头的自定义属性，JS 提供了 dataset 更方便的访问方式。

示例 HTML：

html 复制代码

<div id="box" data-id="1001" data-name="张三"></div>

js 复制代码

var box = document.querySelector("#box");
console.log(box.dataset.id);
box.dataset.name = "李四";

重点说明：

属性名 data-user-name，在 dataset 里自动转为小驼峰 dataset.userName。

拓展：HTML 原生自带的属性（id、class、src、href）都有浏览器预设的含义，用来控制标签本身的功能、样式。但是很多时候，我们需要给这个标签绑定一些业务数据，比如这条数据的编号、分类、备注，这些内容不需要给浏览器解析渲染，只是给 JS 读取使用。这种自定义数据，就推荐放在 data- 开头的自定义属性里面。

7. 小结

标准属性可以直接打点访问，class 特殊，使用 className；
setAttribute / getAttribute / removeAttribute 通用，标准属性、自定义属性都能操作；
data-* 自定义属性，可以用 dataset 读写；
打点方式和 getAttribute 获取的值可能不一样，布尔属性（checked、disabled）要特别留意。