JavaScript DOM Traversal Methods

Que- What is Traversing the DOM?

Ans- Everything in an HTML DOM is a node; the entire document, every HTML element, text inside HTML elements, attributes, and comments everything is a node; & navigating between these nodes is known as DOM Traversing.

• In a node tree, the top node is called the root

• Every node has exactly one parent, except the root

• A node can have a number of children

• Siblings are nodes with the same parent

• parentNode & parentElement

• childNodes & children

• firstChild & firstElement

• lastChild & lastElement

• nextSibling & nextElementSibling

• previousSibling & previousElementSibling

These properties return the parent of the specified element. The difference is parentElement returns null if a node does not have any parent.

These properties return child nodes. The difference is that childNodes returns all child nodes including text, spaces, and comments. Where children only return child elements (not text or comments)

firstChild is based on childNodes it returns the first node of the element according to childNodes indexing.

firstElementChild is based on children it returns the first node of the element according to children indexing.

lastChild is based on childNodes it returns the last node of the element according to childNodes indexing.

lastElementChild is based on children it returns the last node of the element according to children indexing.

These properties return next (after) siblings of an Element. nextSibling follows the childNodes indexing rule. nextElementSibling follows the children indexing rule.

These properties return previous (before) siblings of an Element. previousSibling follows the childNodes indexing rule. previousElementSibling follows the children indexing rule.

If you liked this article, make sure to

Follow me ✅

Like this post 👍

Thanks so much for getting to the end of it 🙏😍

Alfaiz ⚡@imAlfaiz

• Aspiring Frontend Developer - Student - Web Dev 🎨

• DM for Collaboration💌