使用 javascript 的 HTML 元素的节点名称?
front end technologyjavascriptweb development
nodeName 属性返回给定节点名称的字符串表示形式。当节点具有属性时，它会生成一个带有相应属性名称的字符串。当节点是元素时，它会返回一个带有标签名称的字符串。此属性只能读取。
网页上的每个元素都可以通过节点访问，节点是 DOM 树的组成部分。
每个节点都是一个具有许多方法和属性的对象；这就是为什么节点有时被称为节点对象的原因。
加载页面时，浏览器会构建一个称为 DOM 树的节点树。HTML 文档的一个例子就是一棵树。本文中，head、body、另一个 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
在此示例中，让我们了解如何获取 body 元素子节点的节点名称。
<!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>
简介
HTML 文档中的所有内容始终可以视为 javascript 中的节点，这为节点提供了广泛的定义。元素作为元素节点，文本作为文本节点，注释作为注释节点等。这些节点是允许用户通过它们访问其他节点的对象。要访问文档节点内的每个其他节点，请使用全局节点。
