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 whitespace node. null if none.
• element.nextElementSibling → Value is the next sibling that's not a whitespace node. null if none.

Note, there is also node.previousSibling and node.nextSibling. They may return whitespace node.

[see DOM: Whitespace Nodes ]

document .getElementsByTagName("p")[0] .nextElementSibling.style.color = "green";

Get Child Nodes

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

Note: there is also node.childNodes. Result may contain whitespace nodes.

const x = document .body .children;
Array.from ( x ) .forEach (((x) => { x.style.color="green" }));

• [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 none.
• element.lastElementChild → Value is the last non-whitespace child node of element, or null if none.

Note, there is also node.firstChild and node.lastChild . They may return whitespace node.

Get Parent Node

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

Note, there is also node.parentNode. it may return whitespace node.