HTML 如何使用纯 JavaScript 检查数据属性是否存在

在本文中，我们将介绍如何使用纯 JavaScript 检查 HTML 元素中的数据属性是否存在。数据属性是一种自定义的 HTML 属性，它可以用于在 HTML 元素上存储数据，以便在 JavaScript 中进行访问和操作。

阅读更多：HTML 教程

什么是数据属性？

数据属性是在 HTML 元素上定义的自定义属性，其名称以 “data-” 开头。数据属性的命名必须遵循一定的规范，以确保兼容性和有效性。数据属性可以在 HTML 元素中存储任意类型的数据，如字符串、数字、布尔值等。

下面是一个具有数据属性的示例 HTML 元素：

<div id="myElement" data-name="John Doe" data-age="25" data-verified="true"></div>

在上面的示例中，我们为一个 div 元素定义了三个数据属性：data-name、data-age 和 data-verified，分别存储了一个字符串值、一个数字值和一个布尔值。

使用纯 JavaScript 检查数据属性是否存在

要检查 HTML 元素是否具有特定的数据属性，我们可以使用 JavaScript 中的 hasAttribute() 方法。该方法用于检查指定的属性是否存在于指定的元素中。

以下是使用 hasAttribute() 方法来检查数据属性是否存在的示例代码：

const element = document.getElementById('myElement');
const hasName = element.hasAttribute('data-name');
const hasAge = element.hasAttribute('data-age');
const hasVerified = element.hasAttribute('data-verified');

console.log(hasName);       // true
console.log(hasAge);        // true
console.log(hasVerified);   // true

在上面的示例代码中，我们首先使用 getElementById() 方法获取了具有数据属性的 div 元素。然后，我们使用 hasAttribute() 方法检查了三个数据属性：data-name、data-age 和 data-verified 是否存在。检查结果将以布尔值的形式存储在变量中，并通过 console.log() 方法进行输出。

如果要检查的数据属性存在于 HTML 元素中，hasAttribute() 方法将返回 true，否则返回 false。

使用条件语句检查数据属性是否存在

除了使用 hasAttribute() 方法来检查数据属性是否存在之外，我们还可以使用条件语句来完成相同的任务。以下是使用条件语句检查数据属性是否存在的示例代码：

const element = document.getElementById('myElement');

if (element.getAttribute('data-name') !== null) {
    console.log('data-name 属性存在');
} else {
    console.log('data-name 属性不存在');
}

if (element.getAttribute('data-age') !== null) {
    console.log('data-age 属性存在');
} else {
    console.log('data-age 属性不存在');
}

if (element.getAttribute('data-verified') !== null) {
    console.log('data-verified 属性存在');
} else {
    console.log('data-verified 属性不存在');
}

在上面的示例代码中，我们首先使用 getElementById() 方法获取了具有数据属性的 div 元素。然后，我们使用 getAttribute() 方法获取了指定的数据属性的值，并将其与 null 进行比较。如果数据属性存在，则 getAttribute() 方法将返回其值；如果数据属性不存在，则 getAttribute() 方法将返回 null。根据比较结果，我们使用条件语句输出相应的消息。