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 Parent Node

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

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.

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

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.

Get Child Nodes

• element.children → Value is a live collection of all non-whitespace children of element. [see DOM: 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]