HTML DOM getAttribute() 方法

在前端开发中，我们经常需要操作 HTML 元素的属性。而在 JavaScript 中，我们可以通过使用 getAttribute() 方法来获取指定元素的属性值。本文将详细介绍 getAttribute() 方法的用法以及示例代码。

语法

getAttribute() 方法的语法如下：

element.getAttribute(attributeName)

• element：要获取属性的 HTML 元素
• attributeName：要获取的属性名

返回值

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

示例

假设我们有以下 HTML 结构：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>getAttribute() 方法示例</title>
</head>
<body>

<div id="myDiv" data-name="John" data-age="30"></div>

<script>
    const myDiv = document.getElementById('myDiv');

    const name = myDiv.getAttribute('data-name');
    const age = myDiv.getAttribute('data-age');

    console.log('Name:', name); // 输出：Name: John
    console.log('Age:', age); // 输出：Age: 30
</script>

</body>
</html>

在上面的示例中，我们通过 getAttribute() 方法分别获取了 data-name 和 data-age 属性的值，并将其打印输出到控制台。

注意事项

• getAttribute() 方法是大小写敏感的，传入的属性名需要与 HTML 中的属性名完全一致。
• 对于自定义属性，建议使用 data- 前缀来命名，以确保通过 getAttribute() 方法正常获取。

通过本文的介绍，相信您已经掌握了 getAttribute() 方法的基本用法。在实际开发中，灵活运用该方法可以帮助您更轻松地操作 HTML 元素的属性。祝您编写愉快！