- JavaScript Basics
- JavaScript Home
- JavaScript Syntax
- JavaScript Placements
- JavaScript Output
- JavaScript Statements
- JavaScript Keywords
- JavaScript Comments
- JavaScript Variables
- JavaScript var
- JavaScript let
- JavaScript const
- JavaScript var Vs let Vs const
- JavaScript Operators
- JavaScript Comparison/Logical
- JavaScript Data Types
- JS Conditional Statements
- JavaScript Conditional Statement
- JavaScript if Statement
- JavaScript if-else Statement
- JavaScript switch Statement
- JavaScript Loops
- JavaScript for Loop
- JavaScript while Loop
- JavaScript do-while Loop
- JavaScript Break Continue
- JavaScript Popup Boxes
- JavaScript Dialog Box
- JavaScript alert Box
- JavaScript confirm Box
- JavaScript prompt Box
- JavaScript Functions
- JavaScript Functions
- JS Function with Parameter
- JavaScript Return Statement
- JavaScript Variable Scope
- JavaScript setTimeout() Method
- JavaScript setInterval() Method
- JavaScript Events
- JavaScript Events
- JavaScript onclick Event
- JavaScript onload Event
- JavaScript Mouse Events
- JavaScript onreset Event
- JavaScript onsubmit Event
- JavaScript Objects
- JavaScript Objects
- JavaScript Number Object
- JavaScript Array Object
- JavaScript String Object
- JavaScript Boolean Object
- JavaScript Math Object
- JavaScript RegExp Object
- JavaScript Date Object
- JavaScript Browser Objects
- JavaScript Browser Objects
- JavaScript Window Object
- JavaScript Navigator Object
- JavaScript History Object
- JavaScript Screen Object
- JavaScript Location Object
- JavaScript Document Object
- JS Document Object Collection
- JS Document Object Properties
- JS Document Object Methods
- JS Document Object with Forms
- JavaScript DOM
- JavaScript DOM
- JavaScript DOM Nodes
- JavaScript DOM Levels
- JavaScript DOM Interfaces
- JavaScript Cookies
- JavaScript Cookies
- JavaScript Create/Delete Cookies
- JavaScript Advance
- JavaScript Regular Expression
- JavaScript Page Redirection
- JavaScript Form Validation
- JavaScript Validations
- JavaScript Error Handling
- JavaScript Exception Handling
- JavaScript try-catch throw finally
- JavaScript onerror Event
- JavaScript Multimedia
- JavaScript Animation
- JavaScript Image Map
- JavaScript Debugging
- JavaScript Browser Detection
- JavaScript Security
- JavaScript Misc
- JavaScript innerHTML
- JavaScript getElementById()
- JS getElementsByClassName()
- JS getElementsByName()
- JS getElementsByTagName()
- JavaScript querySelector()
- JavaScript querySelectorAll()
- JavaScript document.write()
- JavaScript console.log()
- JavaScript Programs
- JavaScript Programs
- JavaScript Test
- JavaScript Online Test
- Give Online Test
- All Test List
JavaScript DOM Nodes
Every element in an HTML page represents a DOM node. These elements are related to each other through the parent-child relationship.
All the nodes in a document make a DOM tree, which describes the relationship.
An element inside another element is known as the child element or child node and the element that contains the element within it is known as the parent element or parent node.
Let's take an example to understand about nodes in JavaScript.
<P>This is JS DOM</P>
In the above code, there are two nodes, P and a text node. The combination of both the nodes represents a paragraph. Let's take another code fragment to understand it better.
<P>This is <B>JS DOM</B></P>
The above code fragment, created one parent node (P) and two child nodes (text and B node). Further, B node also contains a child node (text).
Following figure shows how the elements of the preceding code fragment can be represented in the form of a tree.

JavaScript DOM Nodes Example
Here are some examples of DOM Nodes in JavaScript.
Verify Type of Node
Here is an example demonstrates how to check the node type in JavaScript:
<!DOCTYPE HTML> <html> <head> <title>JavaScript DOM Nodes - Check Node Type</title> <script type="text/javascript"> function checkNodeType() { var tag = document.getElementById("par1"); var value = tag.nodeType; if(value == 1) document.write("This is Element Node Type"); if(value == 2) document.write("This is Attribute Node Type"); if(value == 3) document.write("This is Text Node Type"); if(value == 8) document.write("This is Comment Node Type"); if(value == 9) document.write("This is Document Node Type"); } </script> </head> <body> <h3>JavaScript DOM Nodes Examples</h3> <p id="par1">Welcome to JavaScript DOM</p> <input type="button" onclick="checkNodeType();" value="Check Node Type"> </body> </html>
Here is the sample output produced by the above JavaScript DOM Nodes example. This is the initial output:

Click on the Check Node Type to check as shown in the following figure:

Verify Child Nodes of Node
Here is an example shows how to verify child nodes of node:
<!DOCTYPE HTML> <html> <head> <title>JavaScript DOM Nodes - Check Child Nodes</title> <script type="text/javascript"> function checkNode(value) { var tag = document.getElementById(value); if(tag.hasChildNodes()) { alert("Node has child nodes"); } else { alert("Node has no child nodes"); } } </script> </head> <body id="T1"> <h3>JavaScript DOM Nodes Examples</h3> <p>Click on the button given below to check the child nodes of the BODY element.</p> <input type="button" onclick="checkNode('T1');" value="Check Child Node"> <p>Click on the button given below to check the child nodes of the INPUT element.</p> <input type="button" id="T2" onclick="checkNode('T2');" value="Check Child Node"> </body> </html>
Here is the sample output produced by the above JavaScript DOM Check child nodes example code:

Now click on both the Check Child Node button. Here is the output produced on clicking on the first Check Child Node button:

Here is the output produced on clicking on the second Check Child Node button:

« Previous Tutorial Next Tutorial »