When working with a large number of nodes it becomes very hard for programmers to identify each node manually and also consumes lots of time and effort. That’s why the “NodeType” property is utilized which helps in identifying the type of each node, such as an element, attribute, text, comment, and so on. The “NodeType” property also enables conditional operations which allows you to perform specific actions on the node’s classification

This blog explains the usage of HTML DOM NodeType property in JavaScript.

How to Use HTML DOM NodeType Property in JavaScript?

The working of HTML DOM NodeType property is straightforward, the programmer just needs to utilize the “NodeType” property next to the selected HTML element. This property then returns integer values corresponding to different node types. By understanding these numbers, the programmers can gather information about the required element node type.

The node type numbers and corresponding Node Names along the description are stated below in tabular form:

Node Type	Node Name	Named Constant	Description
1	element name	ELEMENT_NODE	Denotes an element
2	attribute name	ATTRIBUTE_NODE	Denotes an attribute
3	#text	TEXT_NODE	Denotes textual Context
4	#cdata-section	CDATA_SECTION_NODE	Highlights the CDATA section
5	entity reference name	ENTITY_REFERENCE_NODE	Highlight the reference node
6	entity name	ENTITY_NODE	Denotes a single entity
7	target	PROCESSING_INSTRUCTION_NODE	Denotes instruction that needs to be processed
8	#comment	COMMENT_NODE	Denotes a comment that entered in the source code
9	#document	DOCUMENT_NODE	Specify the whole document
10	doctype name	DOCUMENT_TYPE_NODE	Offers interfaces that were originally defined for the document.
11	#document fragment	DOCUMENT_FRAGMENT_NODE	Represents a fragment of the entire document.
12	notation name	NOTATION_NODE	Represent notations

Now, let’s visit examples for retrieving specific node types and receiving all available nodes for the body’s child elements.

Example 1: Retrieving NodeType for Specific Element

To find the NodeType of an HTML element, “id” can be utilized. For instance, visit the code:

Description of the code:

• First, utilize the “<p>” element as a demo whose NodeType is going to be retrieved. To access this element specifically, assign it an id “demo”.
• Then, create a button that will use “onclick” the event listener to invoke the “retreiveNodeType()” function.
• Next, utilize the “<script>” tag, and inside it, define a function named “retreiveNodeType()”.
• In addition, the “val” variable is declared which stores the nodeType value for the element having an id of “demo”. This value is found by utilizing the “nodeType” property along the selected element.
• After that, display the “val” variable on the HTML element having an id of “target”.

After the compilation:

The output shows the nodeType for the target component has been retrieved.

Example 2: Retrieving NodeType For Body Element

In the above code:

• First, multiple child elements for the body tag are utilized along with the comments.
• Then, inside the “<script>” tag the child elements of the body are stored in the “const” type variable named “useCase”.
• Next, utilize the “for” loop that iterates till the length of the “useCase” variable.
• Inside the loop, each useCase value node type and node name is retrieved using the “nodeType” and “nodeName” properties. These retrieved values are stored in the single variable named “demo” which is then rendered on the HTML element having an id of “target”.

After the end of the compilation for the above code:

The above output shows that node types for the body elements are generated and displayed on the screen:

• The value of “3” shows the “text node” and it appears after and before every element.
• The value of “1” shows the element node type.
• The value of “8” is the comment node that appears when the comment is utilized inside the code file.

Conclusion

The HTML DOM NodeType in JavaScript is utilized by accessing and storing the reference to the desired node in a variable. Then, call the “NodeType” property on the desired node using dot notation. This property returns an integer value representing the type of the node. The provided values contain the corresponding NodeType names. This post has demonstrated how to use HTML DOM NodeType in JavaScript.