HTML - getAttribute() 方法

HTML DOM 的getAttribute() 方法用于获取属于 HTML 元素的指定属性的值。如果给定的属性不存在，则返回的值将为“null”。

语法

以下是 HTML DOM getAttribute() 方法的语法：

element.getAttribute(attributeName)

参数

此方法接受如下所示的单个参数：

参数	描述
attributeName	要检索其值的属性的名称。

返回值

此方法返回一个字符串，其中包含指定属性的值。如果属性不存在，则返回“null”。

示例 1：访问和显示“href”属性

以下是 HTML DOM getAttribute() 方法的基本示例。它从锚元素 (<a>) 获取href 属性：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getAttribute()</title>
</head>
<body>
<h4>Retrieves the value of href attribute</h4> 
<a id="myLink" href="https://tutorialspoint.com">Example Link</a>
<div id="output"></div>
<script>
   // Selecting the anchor element by ID
   const myLink = document.getElementById('myLink');
   const hrefVal = myLink.getAttribute('href');
   // Displaying the result
   const od= document.getElementById('output');
   od.textContent = `Link URL: ${hrefVal}`;
</script>
</body>     
</html>

示例 2：获取 HTML 元素的属性值

以下是 HTML DOM getAttribute() 方法的另一个示例。我们使用此方法获取<div> 元素中所有可用的属性：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getAttribute()</title>
</head>
<body>
<div id="myElement" class="box" 
data-info="example data">
<p>This is a paragraph inside a div element.</p>
<a href="https://tutorialspoint.com">Example Link</a>
</div>
<div id="output"></div>
<script>
   // Selecting the element by ID
   const my= document.getElementById('myElement');
   //Retrieving attribute values
   const cv = my.getAttribute('class');
   const dInv = my.getAttribute('data-info');
   const hv = my.querySelector('a').getAttribute('href');
   // Displaying the results
   const od = document.getElementById('output');
   od.innerHTML = `
       <p>Class attribute value: ${cv}</p>
       <p>Data-info attribute value: ${dInv}</p>
       <p>Anchor href attribute value: ${hv}</p>
   `;
</script>
</body>
</html>

示例 3：获取按钮属性

此示例显示了 DOM getAttribute() 方法的用法，用于访问和显示 HTML <button> 元素的 onclick 属性的值：

<!DOCTYPE html>
<html lang="en">
<head>  
<title>HTML DOM getAttribute()</title>
</head>
<body>
<h4>Retrieves the value of Button attribute</h4> 
<button id="myB" onclick="displayMessage()">Click me</button>
<div id="ot"></div>
<script>
   function displayMessage() {
      const ocv = document.getElementById
      ('myB').getAttribute('onclick');
      document.getElementById('ot').textContent = `Value of onclick attribute: ${ocv}`;
   }
</script>
</body>
</html>

支持的浏览器

方法
getAttribute()	是	是	是	是	是

html_dom_element_reference.htm

打印页面