JavaScript常用DOM API研究详解04_Attribute操作(get set remove)_classList操作(add remove toggle contains)

于 2024-10-15 00:15:00 发布
阅读量637 收藏 22
点赞数 30
分类专栏： javascript 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_33546823/article/details/142783952
版权

JavaScript常用DOM API研究详解04：Attribute操作（get、set、remove）与classList操作（add、remove、toggle、contains）

在前端开发中，操作DOM元素的属性和类名是常见的需求。JavaScript提供了丰富的API来处理这些操作，主要包括：

  • Attribute（属性）操作方法：
    • getAttribute()
    • setAttribute()
    • removeAttribute()
  • classList（类名列表）操作方法：
    • add()
    • remove()
    • toggle()
    • contains()

本篇文章将深入探讨这些方法的用法、注意事项，并通过示例来帮助大家更好地理解和应用。

一、Attribute（属性）操作方法

1.1 什么是属性？

在HTML中，属性是附加到标签上的额外信息，用于提供元素的附加信息或配置。例如，<input type="text" placeholder="请输入用户名"> 中的 type 和 placeholder 就是属性。

1.2 getAttribute() 方法

1.2.1 方法简介

getAttribute() 方法用于获取指定属性的值。如果属性不存在，则返回 null。

1.2.2 语法
const value = element.getAttribute(attributeName);
  • element：要操作的DOM元素。
  • attributeName：字符串，表示要获取的属性名称。
1.2.3 返回值
  • 返回指定属性的值（字符串）。
  • 如果属性不存在，返回 null。
1.2.4 示例
<button id="myButton" data-action="submit">提交</button>

const button = document.getElementById('myButton');

// 获取标准属性
const idValue = button.getAttribute('id');
console.log(idValue); // 输出: "myButton"

// 获取自定义属性 (data-*)
const actionValue = button.getAttribute('data-action');
console.log(actionValue); // 输出: "submit"

// 获取不存在的属性
const nonExistent = button.getAttribute('title');
console.log(nonExistent); // 输出: null
1.2.5 注意事项
  • 属性名称不区分大小写，但建议使用小写字母。
  • 可以获取标准属性和自定义属性，包括 data-* 属性。

1.3 setAttribute() 方法

1.3.1 方法简介

setAttribute() 方法用于设置指定属性的值。如果属性不存在，则创建该属性。

1.3.2 语法
element.setAttribute(attributeName, value);
  • element：要操作的DOM元素。
  • attributeName：字符串，表示要设置的属性名称。
  • value：字符串，表示要设置的属性值。
1.3.3 示例
const link = document.createElement('a');

// 设置标准属性
link.setAttribute('href', 'https://www.example.com');
link.setAttribute('target', '_blank');

// 设置自定义属性
link.setAttribute('data-tracking-id', '12345');

console.log(link.outerHTML);
// 输出: <a href="https://www.example.com" target="_blank" data-tracking-id="12345"></a>
1.3.4 注意事项
  • value 将被转换为字符串并设置为属性值。
  • 如果属性已经存在，将覆盖其原有的值。

1.4 removeAttribute() 方法

1.4.1 方法简介

removeAttribute() 方法用于删除指定的属性。

1.4.2 语法
element.removeAttribute(attributeName);
  • element：要操作的DOM元素。
  • attributeName：字符串，表示要删除的属性名称。
1.4.3 示例
const img = document.createElement('img');
img.setAttribute('src', 'image.jpg');
img.setAttribute('alt', '示例图片');

// 删除属性
img.removeAttribute('alt');

console.log(img.outerHTML);
// 输出: <img src="image.jpg">
1.4.4 注意事项
  • 如果属性不存在，调用 removeAttribute() 不会产生错误。

1.5 综合示例：操作表单元素属性

<input type="text" id="username" placeholder="请输入用户名">

const input = document.getElementById('username');

// 获取属性值
const placeholderText = input.getAttribute('placeholder');
console.log(placeholderText); // 输出: "请输入用户名"

// 设置属性值
input.setAttribute('placeholder', '用户名必须包含字母和数字');

// 删除属性
input.removeAttribute('id');

console.log(input.outerHTML);
// 输出: <input type="text" placeholder="用户名必须包含字母和数字">

二、classList（类名列表）操作方法

2.1 什么是 classList？

classList 是元素的类名列表，以 DOMTokenList 对象的形式存在。它提供了一组方法，用于操作元素的 class 属性，比直接操作 className 更加方便和安全。

2.2 add() 方法

2.2.1 方法简介

add() 方法用于向元素的 class 属性添加一个或多个类名。

2.2.2 语法
element.classList.add(class1[, class2, ...]);
  • element：要操作的DOM元素。
  • class1, class2, ...：要添加的类名，可以是一个或多个。
2.2.3 示例
const div = document.createElement('div');

// 添加单个类名
div.classList.add('container');

// 添加多个类名
div.classList.add('visible', 'active');

console.log(div.className); // 输出: "container visible active"
2.2.4 注意事项
  • 如果类名已存在，则不会重复添加。

2.3 remove() 方法

2.3.1 方法简介

remove() 方法用于从元素的 class 属性中移除一个或多个类名。

2.3.2 语法
element.classList.remove(class1[, class2, ...]);
  • element：要操作的DOM元素。
  • class1, class2, ...：要移除的类名，可以是一个或多个。
2.3.3 示例
const div = document.createElement('div');
div.className = 'container visible active';

// 移除单个类名
div.classList.remove('visible');

// 移除多个类名
div.classList.remove('container', 'active');

console.log(div.className); // 输出: ""
2.3.4 注意事项
  • 如果类名不存在，调用 remove() 不会产生错误。

2.4 toggle() 方法

2.4.1 方法简介

toggle() 方法用于切换元素的类名。如果类名不存在，则添加；如果类名已存在，则移除。

2.4.2 语法
element.classList.toggle(className[, force]);
  • element：要操作的DOM元素。
  • className：要切换的类名。
  • force（可选）：布尔值，指示是添加还是移除类名。
2.4.3 示例
const button = document.getElementById('myButton');

// 初始状态
console.log(button.className); // 输出: "btn"

// 切换类名
button.classList.toggle('active');
console.log(button.className); // 输出: "btn active"

// 再次切换
button.classList.toggle('active');
console.log(button.className); // 输出: "btn"

// 使用 force 参数强制添加
button.classList.toggle('active', true);
console.log(button.className); // 输出: "btn active"
2.4.4 注意事项
  • 返回值为布尔值，表示类名在操作后的存在状态。
  • force 参数可以强制指定是添加（true）还是移除（false）类名。

2.5 contains() 方法

2.5.1 方法简介

contains() 方法用于检查元素的 class 属性中是否包含指定的类名。

2.5.2 语法
const hasClass = element.classList.contains(className);
  • element：要操作的DOM元素。
  • className：要检查的类名。
2.5.3 示例
const div = document.createElement('div');
div.className = 'container visible';

console.log(div.classList.contains('container')); // 输出: true
console.log(div.classList.contains('active'));    // 输出: false
2.5.4 注意事项
  • 返回值为布尔值，true 表示存在，false 表示不存在。

2.6 综合示例：实现折叠面板

<style>
  .panel {
    display: none;
  }
  .panel.active {
    display: block;
  }
</style>

<button id="toggleButton">显示内容</button>
<div id="contentPanel" class="panel">
  <p>这是折叠面板的内容。</p>
</div>

const button = document.getElementById('toggleButton');
const panel = document.getElementById('contentPanel');

button.addEventListener('click', function() {
  const isActive = panel.classList.toggle('active');
  button.textContent = isActive ? '隐藏内容' : '显示内容';
});

三、Attribute 与 classList 的区别和联系

3.1 操作方式

  • Attribute 方法：直接操作元素的属性，可以获取、设置、删除任何属性。
  • classList 方法：专门用于操作元素的 class 属性，提供了更方便的方法来添加、移除、切换类名。

3.2 操作对象

  • Attribute 方法：针对元素的所有属性，包括标准属性和自定义属性。
  • classList 方法：仅针对 class 属性。

3.3 使用场景

  • Attribute 方法：用于操作元素的其他属性，如 src、href、data-* 等。
  • classList 方法：用于动态地添加、移除元素的类名，控制样式或状态。

3.4 示例对比

使用 setAttribute() 操作 class 属性
element.setAttribute('class', 'btn active');
使用 classList 操作类名
element.classList.add('btn', 'active');

classList 方法更简洁，且避免了直接覆盖 class 属性可能带来的问题。

四、实践示例

4.1 动态添加和移除类名，实现选中效果

<ul id="itemList">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

<style>
  .selected {
    background-color: yellow;
  }
</style>

const items = document.querySelectorAll('#itemList li');

items.forEach((item) => {
  item.addEventListener('click', function() {
    // 移除其他项的选中状态
    items.forEach((el) => el.classList.remove('selected'));
    // 添加当前项的选中状态
    this.classList.add('selected');
  });
});

4.2 操作自定义属性，存储和获取数据

<button id="saveButton" data-user-id="42">保存</button>

const button = document.getElementById('saveButton');

// 获取自定义属性
const userId = button.getAttribute('data-user-id');
console.log(`用户ID是：${userId}`);

// 设置自定义属性
button.setAttribute('data-action', 'save');

// 删除自定义属性
button.removeAttribute('data-temp');

4.3 使用 toggle() 方法实现夜间模式切换

<button id="themeButton">切换主题</button>

body.dark-mode {
  background-color: #333;
  color: #fff;
}

const button = document.getElementById('themeButton');

button.addEventListener('click', function() {
  document.body.classList.toggle('dark-mode');
});

五、注意事项和最佳实践

5.1 避免直接操作 className

直接修改元素的 className 属性可能会导致类名被意外覆盖，建议使用 classList 方法。

// 不推荐
element.className = 'new-class';

// 推荐
element.classList.add('new-class');

5.2 使用 data-* 属性存储自定义数据

data-* 属性是HTML5提供的自定义属性，用于在元素中嵌入自定义数据。

<div id="product" data-product-id="123" data-category="books"></div>

const product = document.getElementById('product');
const productId = product.getAttribute('data-product-id');

5.3 处理布尔属性

对于布尔属性，如 disabled、checked、selected 等，可以使用以下方式：

const checkbox = document.getElementById('agree');

// 设置属性
checkbox.setAttribute('checked', '');

// 移除属性
checkbox.removeAttribute('checked');

// 检查属性
const isChecked = checkbox.hasAttribute('checked');

5.4 操作 style 属性

虽然 style 也是元素的属性，但通常建议使用 element.style 对象或添加类名来控制样式。

// 不推荐
element.setAttribute('style', 'color: red;');

// 推荐
element.style.color = 'red';

// 或者
element.classList.add('red-text');

六、总结

  • Attribute 操作方法：
    • getAttribute()：获取属性值。
    • setAttribute()：设置属性值。
    • removeAttribute()：删除属性。
  • classList 操作方法：
    • add()：添加类名。
    • remove()：移除类名。
    • toggle()：切换类名的存在状态。
    • contains()：检查类名是否存在。

参考资料

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

It'sMyGo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值