DOM: Navigate DOM Tree

Here's how to navigate the DOM tree. That is, if you have a node, you can get its parent node, sibling node, or children nodes.

Get Previous/Next Sibling

• element.previousElementSibling → Value is the previous sibling that's not a white space node. Value is null if element does not have sibling.
• element.nextElementSibling → Value is the next sibling that's not a white space node. Value is null if it element does not have sibling.

• node.previousSibling → Value is the previous sibling of node, or null if it doesn't exist. This may be whitespace nodes.
• node.nextSibling → Value is the next sibling of node, or null if it doesn't exist. This may be Whitespace Nodes.

// their difference is possibility of whitespace node

document.getElementsByTagName("p")[0].nextElementSibling; // never whitespace node

document.getElementsByTagName("p")[0].nextSibling; // may be whitespace node

Get Child Nodes

• element.children → Value is a live collection of all non-whitespace children of element. [see DOM: Whitespace Nodes]
• node.childNodes → Value is a live collection of all children of node.

// example of getting children elements

const xx = document.getElementsByTagName("div")[0].childNodes;

xx.length;

• [see DOM: What Does Live Object Mean?]
• [see DOM: NodeList vs HTMLCollection]

Get First/Last Child

• element.firstElementChild → Value is the first non-whitespace child node of element, or null if it doesn't exist.
• node.firstChild → Value is the first child of node, or null if it doesn't exist.
• node.lastChild → Value is the last child of node, or null if it doesn't exist.

Get Parent Node

• node.parentNode → Value is the parent of node, or null.