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

列印頁面