JavaScript: Get Element's Parent/Child/Sibling, Navigate DOM Tree

Here is how to navigate the DOM tree. That is, if you have a HTML Element or XML 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 if none.

Get Previous/Next Sibling

element.previousElementSibling

Value is the previous sibling, or null if none.
(ignore Whitespace Nodes)

element.nextElementSibling

Value is the next sibling or null if none.
(ignore Whitespace Nodes)

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

Get First/Last Child

element.firstElementChild

Value is the first child, or null if none.
(ignore Whitespace Nodes)

element.lastElementChild

Value is the last child, or null if none.
(ignore Whitespace Nodes)

Get Child Nodes

element.children

Value is the element's children. (Live Object and HTMLCollection)
(ignore Whitespace Nodes)

const xx = document.body;
for (let x of xx.children) x.style.color = "green";