HTML DOM getAttribute()用法及代码示例

HTML DOM getAttribute() 方法用于获取或设置与特定 HTML 元素关联的属性。如果元素不包含给定的属性，那么这将返回 null 或空字符串。

用法

以下是 getAttribute() 方法的语法 -

element.getAttribute(attributename)

这里，attributename 是字符串类型，是一个强制参数。它表示要获取其值的属性名称。

示例

让我们看一个 getAttribute() 方法的例子 -

<!DOCTYPE html>
<html>
<head>
<script>
   function getAttr() {
      var a = document.getElementsByTagName("a")[0].getAttribute("href");
      document.getElementById("Sample").innerHTML = a;
   }
</script>
</head>
<body>
<h1>getAttribute() example</h1>
<a href="https://www.google.com">GOOGLE</a>
<p>Get the href attribute value of the above link by clicking the below button</p>
<button onclick="getAttr()">GET</button>
<p id="Sample"></p>
</body>
</html>

输出

这将产生以下输出 -

单击“获取”按钮 -

在上面的例子中 -

我们首先创建了一个锚元素，其 href 属性值设置为 https://www.google.com -

<a href="https://www.google.com">GOOGLE</a>

然后我们创建了一个按钮 GET，它将在用户点击时执行 getAttr() 方法 -

<button onclick="getAttr()">GET</button>

getAttr() 方法使用文档对象的 getElementByTagName() 属性来获取 HTML 文档中的第一个 <a> 元素。

然后它使用 getAttribute() 方法获取 href 属性值并将该值分配给变量 a。然后使用其innerHTML属性将该值显示在id为“Sample”的段落中 -

function getAttr() {
   var a = document.getElementsByTagName("a")[0].getAttribute("href");
   document.getElementById("Sample").innerHTML = a;
}

相关用法

注：本文由纯净天空筛选整理自AmitDiwan大神的英文原创作品 HTML DOM getAttribute() method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。