HTML - DOM 元素 getAttributeNode() 方法

**getAttributeNode()** 方法用于在 DOM（文档对象模型）中获取表示 HTML 元素属性之一的属性节点对象，其中包括属性的名称及其值。

语法

element.getAttributeNode(attributeName)

参数

此方法接受一个参数，如下所示。

参数	描述
attributeName	方法返回对象的属性名称。

返回值

返回方法返回对象的属性名称。

HTML DOM 元素 'getAttributeNode()' 方法示例

以下示例将说明 HTML DOM 元素 getAttributeNode()，以及我们应该在哪里以及如何使用此方法！

检索特定属性节点

此示例显示了如何为 **HTML 元素** 上的特定属性检索属性节点对象。

<!DOCTYPE html>
<html lang="en">

<body>
    <h2>Retrieving a Specific Attribute Node</h2>
    <div id="mydivElement" data-info="Accessing div element">
        This is div ELement
    </div>
    <script>
        var element = document.getElementByI("mydivElement");
        var attributeNode = element.getAttributeNod("data-info");
        console.log(attributeNode);
    </script>
</body>

</html>

检索 class 属性值

此示例演示了如何使用 **getAttributeNode()** 方法访问和利用网页中 HTML 元素的 class 属性的值。

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
      .important{
          color: blue;
      }
  </style>
</head>

<body>
  <h1 class = "important" >Document Information</h1>
  <h2>The getAttributeNode() Method</h2>
  <p id = "demo"></p>
  <script>
      const h1Element = document.querySelector("h1");
      const classAttrNode = h1Element.getAttributeNode
      ("class");
      document.getElementById("demo").textContent = 
      classAttrNode.value;
  </script>
</body>

</html>

获取 target 属性值

此示例演示了如何选择和显示 target 属性值。因此，当单击链接时，getAttribute("target") 将检索所单击链接的 target 属性值。

<!DOCTYPE html>
<html>
<head>
  <style>
    .active {
      font-weight: bold;
      color: blue;
    }
  </style>
</head>
<body>
  <h1>Navigation Menu</h1>
  <h2>The getAttributeNode() Method</h2>

  <ul class = "list" id="menu">
    <li><a href="#home" id="homeLink">Home</a></li>
    <li><a href="#about" id="aboutLink">About Us</a></li>
  </ul>
  <p>Click on a link below to display its target 
  attribute value:</p>
  <p id="targetValue"></p>

  <script> 
      const menuLinks = 
      document.querySelectorAll("#menu a");
      menuLinks.forEach(link => {
        link.addEventListener("click", function() {

          const targetAttrNode = 
          link.getAttributeNode("href");
          const targetValue = targetAttrNode.value;

          document.getElementById
          ("targetValue").textContent = 
          `Target attribute value: ${targetValue}`;
          menuLinks.forEach(l => l.classList.remove
          ("active"));
          link.classList.add("active");
        });
      });
  </script>
</body>

</html>

使用 JavaScript 进行交互式属性检索

此示例演示了 javaScript 如何获取并显示由其 id **"myAnchor"** 标识的 HTML **h1** 元素的 **id** 属性。

<!DOCTYPE html>
<html>
<head>
  <style>
      h1 {
        color: blue;
        font-weight: bold;
      }
  </style>
</head>

<body>
  <h1 id="myAnchor">The Element Object</h1>
  <p>
    Click the button to display the value 
    of the id attribute of the h1 element
    above.
  </p>  
  <button id="tryButton">Try it</button>
  <p id="demo"></p>

  <script>
    document.getElementById
    ("tryButton").addEventListener("click", function() {
      
      const element = document.getElementById("myAnchor");
      const text = element.getAttribute("id");
      document.getElementById("demo").textContent = text;
    });
  </script>
</body>

</html>

支持的浏览器

方法
getAttributeNode()	是 5.0	是 10.0	是 16.0	是 5.1	是 10.6

html_dom_element_reference.htm

打印页面