使用 JavaScript 獲取 HTML 元素的節點名稱？

nodeName 屬性返回給定節點名稱的字串表示形式。當節點具有屬性時，它會生成包含相應屬性名稱的字串。當節點是元素時，它會返回包含標籤名稱的字串。此屬性只讀。

網頁上的每個元素都可以透過節點訪問，節點是 DOM 樹的一個組成部分。

  • 每個節點都是一個具有多個方法和屬性的物件；這就是為什麼節點有時被稱為節點物件的原因。

  • 頁面載入時，瀏覽器會構建一個稱為 DOM 樹的節點樹。HTML 文件的示例就是一個樹。頭部、主體、其他 HTML 元素、內容、屬性等在本文中都被視為節點。

  • 從 JavaScript 的角度來看，HTML 文件中包含的一切都是節點。JavaScript 中的所有物件都是節點，包括 HTML 元素、屬性、文字、文件甚至註釋。

以下是節點的可能值：

  • 對於元素節點，返回值是標籤名。

  • 對於屬性節點，返回值是屬性的名稱。

  • 對於文件、註釋和文字節點，返回值分別是“#document”、“#comment”和“#text”。

語法

document.nodeName

返回值

此屬性返回當前節點的名稱。返回值為字串。

示例 1

在這個例子中，讓我們瞭解如何在 JavaScript 中獲取此元素的節點名稱。

<!DOCTYPE html>
<html>
<title>Node name of an HTML element using javascript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <p id="demoP">The node name for this element is shown in the output below.</p>
   <div id="result"></div>
   <script>
      let myNode = document.getElementById("demoP").nodeName;
      document.getElementById("result").innerHTML = myNode;
   </script>
</body>
</html>

示例 2

在這個例子中，讓我們瞭解如何在 JavaScript 中獲取元素的節點名稱。

<!DOCTYPE html>
<html>
<title>Node name of an HTML element using javascript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <p id="demoP">The node name of the body element is shown in the output below.</p>
   <div id="result"></div>
   <script>
      let myNode = document.body.nodeName;
      document.getElementById("result").innerHTML = myNode;
   </script>
</body>
</html>

示例 3

在這個例子中，讓我們瞭解如何獲取主體元素子節點的節點名稱。

<!DOCTYPE html>
<html>
<title>Node name of an HTML element using javascript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <p>The node names of the body element's child nodes is shown in the output below.</p>
   <p><strong>Comment:</strong> Whitespace contained within elements is defined as "#text," and text is defined as nodes.</p>
   <div><strong>Comment:</strong> The document's comments are known to as #comments, and they are therefore treated as nodes.</div>
   <div id="result"></div>
   <script>
      let chilElem = document.body.childNodes;
      let txtNod = "";
      let i;
      for (i = 0; i < chilElem.length; i++) {
         txtNod = txtNod + chilElem[i].nodeName + "<br>";
      }
      document.getElementById("result").innerHTML = txtNod;
   </script>
</body>
</html>

示例 4

讓我們來看這個例子，學習如何獲取 div 的子節點的名稱、型別和值。

<!DOCTYPE html>
<html>
<title>Node name of an HTML element using javascript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <p>The result below displays the first child of the div's nodes, with their names, types, and values.</p>
   <div id="divCount">This is a div element.</div>
   <br>
   <p id="result"></p>
   <script>
      let chilElem = document.getElementById("divCount").firstChild;
      let txtNod = "";
      txtNod += "Name of the node: " + chilElem.nodeName + "<br>";
      txtNod += "Value of the node: " + chilElem.nodeValue + "<br>";
      txtNod += "The type of node: " + chilElem.nodeType;
      document.getElementById("result").innerHTML = txtNod;
   </script>
</body>
</html>

簡而言之

在 JavaScript 中，HTML 文件中的所有內容都可以視為節點，這為節點提供了廣泛的定義。元素作為元素節點，文字作為文字節點，備註作為註釋節點等。這些節點是物件，允許使用者透過它們訪問其他節點。要訪問文件節點內的所有其他節點，請使用全域性節點。

更新於：2022年8月23日

瀏覽量：567

啟動您的 職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.