Node name of an HTML element using javascript?

Front End Technology Javascript Web Development

A string representation of the given node's name is returned by the nodeName property. When a node has attributes, it produces a string with the name of the corresponding attribute. When a node is an element, it returns a string with the name of the tag. This property can only be read.

Each element on a webpage can be accessed through a node, which is a component of the DOM tree.

Every node is an object with a number of methods and properties; this is why nodes are sometimes known to as node objects.
The browser builds a tree of nodes called the DOM tree when the page is loaded. An illustration of an HTML document is a tree. The head, body, another HTML element, content, attributes, etc. are all considered nodes in this article.
Everything contained inside an HTML document is a node when viewed through a JavaScript view. All objects in JavaScript are nodes, including HTML elements, attributes, text, documents, and even comments.

Following are the possible values for nodes −

The tagname is the returned value for element nodes.
The name of the attribute is the returned value for attribute nodes.
The returned value for document, comment, and text nodes is "#document," "#comment," and "#text," accordingly.

Syntax

document.nodeName

Return Value

The name of the current node is returned by this property. String is the returning value.

Example 1

In this example let us understand how to get the node name of this element in 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>

Example 2

In this example let us understand how to get the node name of the element in 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>

Example 3

In this example let us understand how to get the node names of the body element's child nodes.


<!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>

Example 4

Let's look at this example to learn how to obtain the first child of the div's nodes' names, types, and values.


<!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>

In Brief

Everything in an HTML document can always be considered of as a node in javascript, which provides a broad definition for nodes. Element as element node, text as text node, remark as comment node, etc. These nodes are objects that allow the user to access other nodes by means of them. To access every other node within the document node, use the global node.