Skip to content

javaScript DOM Navigation

With HTML DOM, all nodes in the node tree can be accessed with JavaScript. New nodes can be created and all nodes can be changed or deleted.

Node Relationships

The nodes in the node tree have a hierarchical relationship with each other.
Parents, children and siblings are used to describe relationships.

  • In a node tree, the parent node is called the root node.
  • Each node has an exact parent element outside the root.
  • A node can have several children.
  • Brothers are nodes of the same parent.

You can use the following node properties to navigate between nodes with JavaScript:

  • parentNode
  • ChildNodes [ nodenumber ]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

The DOM allows you to do everything with the elements and their contents, but first we need to access the corresponding DOM object and assign it to a variable, and then we can change it.

All operations on the DOM begin with the document object. From there we can access any node.
An example diagram of links that allow navigation between DOM nodes.

parentNode Property

The ParentNode property returns the parent node of the specified node as a Node object.
Note: In HTML, the document is the parent node of the HTML element, HEAD and BODY are the child nodes of the HTML element.



<pre class="wp-block-syntaxhighlighter-code brush: jscript; notranslate"><div>
    <p id="test">javascript</p> 

     var x = document.querySelector('#test');
     var name= x.parentNode.nodeName;

childNodes Property:

The ChildNodes property returns a collection of child nodes as a NodeList object. The nodes in the collection are sorted as they appear in the source code and can be accessed with index numbers. The index starts at 0.

Note: The space in elements is treated as text and the text is treated as a node. Comments are also considered as nodes.

Tip: You can use the length property of the NodeList object to determine the number of child nodes, then navigate through all child nodes and get the information you want.

Tip: Use the children property to return a collection of item nodes (except text and comment nodes) of a node.

Tip: element.childNodes [0] will produce the same result as the firstChild property.

HTML code:

<p id="test">javascript</p>j

JavaScript code:

var x= document.querySelector("#test").childNodes[0];
alert(x.textContent); //OUTPUT: javascript 


var x= document.querySelector("#test").childNodes.length;
alert(x); //output:1

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: