HTML - DOM Element nodeType Property

Quiz

The HTML DOM Element nodeType property is used to retrieve the node type of an element in the document. The 'node type' is an integer value that tells us what type of node that particular element is within the document.

It returns "1" for an element, "3" for text nodes, and "8" for comments, among other possible values.

Syntax

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

node.nodeType

Parameters

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

Return Value

This property returns an integer value representing the type of a node.

NodeTypes and their Properties

Following are the different node types and their respective values −

Integer Value	Node Type	Node Name	Node Value
1	Element	Element name(uppercase)	null
2	Attribute	Attribute name	Attribute value
3	text	#text	Content of text node
4	CDATA section	#cdata-section	Content of cdata-section
5	EntityReference	Entity reference name	null
6	Entity	Entity name	null
7	ProcessingInstruction	Target of processing instruction	Content of processingInstr.
8	Comment	#comment	Comment text
9	Document	#document	null
10	Document Type	Document type name	null
11	Document Fragment	#document fragment	null
12	Notation	Notation name	null

Example 1: Retrieving Node Type for h1 Element.

The following is the basic example of the HTML DOM Element nodeType property. It retrieves the node type for the <h1> element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element nodeType</title>
</head>  
<body>
<h1>HTML - DOM Element</h1>
<h2>nodeType Property</h2>
<p>Displays the node type of a particular node:</p>
<div id="res"></div>
<script>
window.onload = function() {
   var header = document.querySelector('h1');
   var nodeType = header.nodeType;
   // Display nodeType value in the HTML
   var resultDiv=document.getElementById('res');
   resultDiv.textContent='Node Type:'+nodeType;
   // Additional check for demonstration
   if (nodeType === Node.ELEMENT_NODE) {
       resultDiv.textContent += ' (This is an element node)';
   } else {
       resultDiv.textContent += ' (This is not an element node)';
   }
};
</script>
</body>
</html>

The above program retrieves the node type of the "h1" element.

Example 2: Node Type of Paragraph (p) Element

Here is another example of the HTML DOM Element nodeType property. We use this property to retrieve the node type of the paragraph (<p>) element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element nodeType</title>
</head>
<body>
<h1>HTML - DOM Element</h1>
<h2>nodeType Property</h2>
<p>This paragraph contains <strong>some text</strong> and 
<em>emphasis</em>.</p>
<p id="res"></p>
<script>
   window.onload = function() {
      var paragraph = document.querySelector('p');
      var nodeType = paragraph.firstChild.nodeType;
      // Display nodeType value in the HTML
      var resultDiv=document.getElementById('res');
      resultDiv.textContent = 'Node Type: ' + nodeType + (nodeType === Node.TEXT_NODE ?' (This is a Text node)':'(Not text node)');
   };
</script>
</body>
</html>

Once the above program is executed, it displays the node type of the paragraph (p) element.

Example 3: Node Types of <ul> Element

In the example below, we use the nodeType property to retrieve the node type of each child element of the <ul> element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element nodeType</title>
</head>
<body>
<h3>HTML DOM Element nodeType Property</h3>
<p>Below are some Child Nodes :</p>
<ul>
   <li>Item 1</li>
   <!-- Comment -->
   <li>Item 2</li>
   Text Node between items
   <li>Item 3</li>
</ul>
<p id="result"></p>
<script>
window.onload = function() {
   var ulElement = document.querySelector('ul');
   var childNodes = ulElement.childNodes;        
   var resultDiv = document.getElementById('result');
   var introParagraph = document.createElement('p');
   introParagraph.textContent = 'Displays nodeType of each child node:';
   resultDiv.appendChild(introParagraph);
   for (var i = 0; i < childNodes.length; i++) {
      var nodeType = childNodes[i].nodeType;
      var nodeTypeText = nodeType === Node.ELEMENT_NODE ? 'Element' :
      nodeType === Node.TEXT_NODE ? 'Text' :
      nodeType === Node.COMMENT_NODE?'Comment':
      nodeType === Node.DOCUMENT_NODE 
      ? 'Document' : 'Other';
      resultDiv.innerHTML += '<p>Node Type of Child Node ' +(i+1)+':'+ 
	  nodeTypeText + '</p>';
   }
};
</script>
</body>
</html>

The above program displays the node type of each child node of the list.

Supported Browsers

Property
nodeType	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page