JavaScript getAttribute() 方法

摘要：在本教程中，您将学习如何使用 JavaScript getAttribute() 方法获取元素上指定属性的值。

JavaScript getAttribute() 方法简介

要获取指定元素上属性的值，请调用元素的 getAttribute() 方法。

let value = element.getAttribute(name);Code language: JavaScript (javascript)

参数

getAttribute() 接受一个参数，该参数是要返回其值的属性的名称。

返回值

如果属性存在于元素上，则 getAttribute() 返回一个字符串，表示该属性的值。如果属性不存在，则 getAttribute() 返回 null。

请注意，您可以使用 hasAttribute() 方法在获取属性值之前检查属性是否存在于元素上。

JavaScript getAttribute() 方法示例

请考虑以下示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS getAttribute() Demo</title>
</head>
<body>

    <a href="https://tutorial.javascript.ac.cn" 
        target="_blank" 
        id="js">JavaScript Tutorial
    </a>

    <script>
        let link = document.querySelector('#js');
        if (link) {
            let target = link.getAttribute('target');
            console.log(target);
        }
    </script>
</body>
</html>
Code language: HTML, XML (xml)

输出

_blankCode language: plaintext (plaintext)

它是如何工作的

首先，使用 querySelector() 方法选择具有 id js 的链接元素。
其次，通过调用所选链接元素的 getAttribute() 获取链接的目标属性。
第三，在控制台窗口中显示目标的值。

以下示例使用 getAttribute() 方法获取具有 id js 的链接元素的 title 属性的值。

let link = document.querySelector('#js');
if (link) {
    let title = link.getAttribute('title');
    console.log(title);
}Code language: JavaScript (javascript)

输出

nullCode language: plaintext (plaintext)

总结

通过在元素上调用 getAttribute() 方法来获取指定元素的属性的值。
如果属性不存在，则 getAttribute() 返回 null。

测验

本教程对您有帮助吗？