使用 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

启动您的 职业生涯

完成课程获得认证

开始学习
广告