HTML - DOM Element nodeName Property

Quiz

The HTML DOM Element nodeName property is used to identify and retrieve the name of a node. It returns the name of the node as a string, which differs depending on the node type.

Following are the different values of the nodeName for various elements and nodes:

For "element" nodes, it returns a tag name in uppercase.
For "comments" nodes, it returns #comment.
For "text" nodes, it returns #text.

Syntax

Following is the syntax of the HTML DOM Element nodeName property −

element.nodeName;

Parameters

Since this is a property, it will not accept any parameter.

Return Value

This property returns a string containing the node's name based on its content type.

Example 1: Displaying the Node Names of HTML Elements

The following program demonstrates the usage of the HTML DOM Element nodeName property. It retrieves the node name of the various HTML elements present in the document −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element nodeName</title>
<style>
   .highlight {
       color: red;
   }
</style>
</head>
<body>
<h2>HTML DOM Element nodeName Property</h2>
<p>Displays the node names of various elements.</p>
<div id="otpt"></div> 
<script>
   // Selecting h1, h2, and p elements
   const ele=document.querySelectorAll('div, h2, p'); 
   const outputDiv=document.getElementById('otpt');
   ele.forEach(element => {
      const nodeName = element.nodeName;
      const nodeDescription = document.createElement('p');
      nodeDescription.textContent = `Node name of <${nodeName}> element: 
	  ${nodeName}`;
      nodeDescription.classList.add('highlight');
      outputDiv.appendChild(nodeDescription);
   });
</script>
</body>
</html>

The above program retrieves the node name of the various elements in the document.

Example 2: Accessing and Styling based on Node types

Following is another example of the HTML DOM Element nodeName property. We use this property to access the elements and style it based on its node type −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element nodeName</title>
<style>
   .highlight {
      color: blue;
      font-weight: bold;
   }
   .new_style{
      color: green;
   } 
</style>
</head>
<body>
<h3>HTML DOM Element nodeName Property</h3>
<p>Updates element's style based on node type.</p>
<p>Contents of div element with id="pt" with their different node types:</p> 
<div id="pt">
   <div>First div element</div>
   <span>Span element</span>
</div>
<div id="ot"></div>
<script>
   const parentDiv =document.getElementById('pt');
   const childNodes = parentDiv.childNodes;
   const outputDiv =document.getElementById('ot');
   childNodes.forEach(node => {
      const nodeName = node.nodeName;
      //New element for displaying node information
      const nodeDes=document.createElement('p');
      // Customize style based on node type
      if (nodeName === 'DIV') {
         nodeDes.textContent=`Div element found: ${node.textContent}`;
         nodeDes.classList.add('highlight');
      } else if (nodeName === 'SPAN') {
         nodeDes.textContent=`Span element found: ${node.textContent}`;  
         nodeDes.classList.add('new_style');             
      }
      outputDiv.appendChild(nodeDes);
   });
</script>
</body>

The above program accesses and styles the elements based on their node type.

Example 3: Displaying the Node Names of <body> Elements

In the example below, we use this property to access and retrieve the node name of all the elements within the <body> element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element nodeName</title>
</head>
<body>
<h3>HTML DOM Element nodeName Property</h3>
<p>Displaying the node names of all <body> elements.</p>
<div id="ot"></div>
<script>
   const bodyElement = document.body; 
   const childNodes=bodyElement.childNodes;
   const outputDiv=document.getElementById('ot');
   childNodes.forEach(node => {
      if (node.nodeType === Node.ELEMENT_NODE) {
         const noNDes=document.createElement('p');
         noNDes.textContent=`Node name: ${node.nodeName}`;
         outputDiv.appendChild(noNDes);
      }
   });
</script>
</body>
</html>

Once the above program is executed, it will display the node name of all elements present within the "body" element.

Example 4: Accessing the Node Name, Value and Type

The following example helps us get the node name, value, and type of the first child node of the element within the<div> element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>Get Node Name, Value, and Type Example</title>
</head>
<body>
<h3>HTML DOM Element nodeName property</h3>
<p>Displaying node name, value, and type of first child.</p>
<div id="myDIV">
<p>This is the first child node.</p>
</div>
<div id="ot"></div>
<script>
   // Selecting the element with id "myDIV"
   const myDiv = document.getElementById('myDIV');       
   // Getting the first child node
   const firstChild = myDiv.firstChild;
   // Creating elements to display results
   const outputDiv = document.getElementById('ot');
   // Node name
   const nodeDes = document.createElement('p');
   nodeDes.textContent = `Node name of first child 
   node: ${firstChild.nodeName}`;
   outputDiv.appendChild(nodeDes);
   // Node value (for text nodes)
   if (firstChild.nodeType === Node.TEXT_NODE) {
      const nodeval = document.createElement('p');
      nodeval.textContent = `Node value of first 
      child node:This is "myDIV".`;
      outputDiv.appendChild(nodeval);
   }
   // Node type
   const nodedes = document.createElement('p');
   nodedes.textContent=`Node type of first child 
   node: ${firstChild.nodeType}`;
   outputDiv.appendChild(nodedes);
</script>
</body>
</html>

Supported Browsers

Property
nodeName	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page