JavaScript getAttribute
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 element.getAttribute 方法。此方法对于访问 DOM 元素的属性值至关重要，它允许开发人员读取自定义数据属性等内容。
基本定义
getAttribute 方法返回元素上指定属性的值。如果该属性不存在，则返回 null 或空字符串。
此方法同时适用于标准 HTML 属性（如 'id'、'class'）和自定义数据属性（如 'data-*'）。对于 HTML 元素，它是大小写不敏感的。
基本的 getAttribute 示例
此示例演示了如何访问元素上的简单数据属性。
<!DOCTYPE html>
<html>
<head>
<title>Basic getAttribute</title>
</head>
<body>
<div id="user" data-user-id="12345">User Profile</div>
<script>
const userDiv = document.getElementById('user');
const userId = userDiv.getAttribute('data-user-id');
console.log(userId); // Outputs: 12345
</script>
</body>
</html>
在此基本示例中，我们有一个带有自定义数据属性的 div 元素。JavaScript 代码使用 getAttribute 检索此属性。
这演示了 getAttribute 用于访问元素属性的基本用法。该方法将属性值作为字符串返回。
检查属性是否存在
此示例展示了如何检查元素上是否存在某个属性。
<!DOCTYPE html>
<html>
<head>
<title>Attribute Existence</title>
</head>
<body>
<button id="btn1" disabled>Disabled Button</button>
<button id="btn2">Enabled Button</button>
<script>
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
console.log(btn1.getAttribute('disabled') !== null); // true
console.log(btn2.getAttribute('disabled') !== null); // false
</script>
</body>
</html>
这里我们有两个按钮，一个带有 disabled 属性，一个没有。脚本使用 getAttribute 检查 disabled 属性是否存在。
这演示了如何使用 getAttribute 来测试属性是否存在。当属性不存在时，它返回 null。
使用自定义数据属性
此示例演示了使用 getAttribute 访问自定义数据属性。
<!DOCTYPE html>
<html>
<head>
<title>Custom Data Attributes</title>
</head>
<body>
<div id="product"
data-id="P1001"
data-price="29.99"
data-category="electronics">
Smartphone
</div>
<script>
const product = document.getElementById('product');
const id = product.getAttribute('data-id');
const price = product.getAttribute('data-price');
const category = product.getAttribute('data-category');
console.log(`Product ${id} costs $${price} (${category})`);
</script>
</body>
</html>
在此示例中，我们有一个带有多个自定义数据属性的产品 div。脚本使用 getAttribute 检索了所有这些值。
这表明 getAttribute 可以访问多个自定义数据属性。这些属性通常用于在 HTML 中存储额外信息。
与 dataset 属性进行比较
此示例将 getAttribute 与用于数据属性的 dataset 属性进行了比较。
<!DOCTYPE html>
<html>
<head>
<title>getAttribute vs dataset</title>
</head>
<body>
<div id="item" data-item-id="A100" data-item-color="blue">
Sample Item
</div>
<script>
const item = document.getElementById('item');
// Using getAttribute
console.log(item.getAttribute('data-item-id')); // A100
console.log(item.getAttribute('data-item-color')); // blue
// Using dataset
console.log(item.dataset.itemId); // A100
console.log(item.dataset.itemColor); // blue
</script>
</body>
</html>
这里我们演示了访问数据属性的两种方法：使用 getAttribute 和使用 dataset 属性。
虽然这两种方法都有效，但 dataset 为数据属性提供了更便捷的接口，可以自动将名称转换为驼峰式命名法。
获取标准 HTML 属性
此示例展示了如何获取标准 HTML 属性值。
<!DOCTYPE html>
<html>
<head>
<title>Standard Attributes</title>
</head>
<body>
<a id="link" href="https://example.com" target="_blank" title="Example">
Visit Example
</a>
<script>
const link = document.getElementById('link');
console.log(link.getAttribute('href')); // https://example.com
console.log(link.getAttribute('target')); // _blank
console.log(link.getAttribute('title')); // Example
</script>
</body>
</html>
在此示例中，我们使用 getAttribute 访问了链接元素的标准 HTML 属性。这适用于所有标准 HTML 属性。
这表明 getAttribute 是通用的，可以从 HTML 元素中检索任何属性值，无论是标准的还是自定义的。
来源
在本文中，我们展示了如何在 JavaScript 中使用 element.getAttribute。此方法对于在 Web 开发中访问元素属性至关重要。
作者
列出 所有 JS DOM 教程。