JavaScript HTML DOM Navigation

DOM Navigation means moving through the HTML elements or nodes using JavaScript. This is helpful when you want to access parents, children, or siblings of any element dynamically.

In the DOM (Document Object Model), every HTML element is treated as a node. There are different types of nodes, such as element nodes, text nodes, and comment nodes.

You can use nodeName and nodeType to understand what type of node it is.

Common node types:
1 = Element node
3 = Text node

HTML nodes are connected like a family tree. A node can have a parent, children, and siblings.

Useful Properties:
parentNode – returns the parent of the node.
childNodes – returns a list of child nodes.
firstChild – returns the first child node.
lastChild – returns the last child node.

You can move between elements in the DOM using sibling properties.

Useful Properties:
nextSibling, previousSibling – access next/previous node (can be text).
nextElementSibling, previousElementSibling – access next/previous element (ignores text nodes).

You can access children using childNodes, and get their values using nodeValue.

Note: Text inside an element is stored as a text node (nodeType = 3).