How to Navigate Parent, Child, and Sibling Nodes

TL;DR

Use DOM properties such as childNodes, children, firstElementChild, lastElementChild, parentElement, and previousElementSibling to navigate between related HTML elements. childNodes includes text, comment, and element nodes, while children and element-specific properties exclude text and comments, making them more practical for selecting elements and changing styles.

Transcript

We saw Dom in Javascript very closely. In today's video, we will see how to access Nodes, Parent and Children. And how to target an element and add it's style or any element inside it. Like this video and write Sigma Batch in the comments. Let's go to the computer screen. Let's roll the intro. Let's roll the intro intro Alright guys, so I have come... Read More

Key Insights

• The DOM is structured as a tree in which JavaScript can move between parents, children, and siblings. The example begins with document.body and then navigates into a container holding five box elements, showing how related nodes can be accessed step by step.
• The childNodes property includes every direct child node, not only HTML elements. In the demonstrated body, its results include whitespace text nodes, the container element, and the script element, so numeric indexes can point to invisible text rather than the expected visible element.
• Whitespace and line breaks are represented as text nodes in the DOM. A newline before an element can therefore become the first child, which explains why firstChild may return a text node even when the container appears to begin with a box.
• The firstElementChild property returns the first child that is an HTML element. It skips text and comment nodes, making it suitable when the goal is to select the first visible box rather than inspect every node contained by the parent.
• The lastElementChild property returns the final HTML element inside a parent. In the example, it selects the fifth box, after which style.color and style.backgroundColor are used to change its text color to red and its background color to green.
• The parentElement property navigates upward from a selected element to its containing element. Calling it on the container's last element child returns the container, demonstrating how JavaScript can move from a box back to the element that directly contains it.
• The previousElementSibling property selects the preceding sibling that is an element. Its element-specific behavior avoids treating nearby whitespace text nodes as siblings of interest when navigating sideways among HTML elements inside the same parent.
• The children property returns only the child elements of a selected element. Unlike childNodes, it excludes whitespace text nodes and comment nodes, so the example container produces the box elements without the additional nodes created by formatting and comments.

Questions & Answers

Q: What is the difference between childNodes and children?

childNodes returns all direct child nodes of an element, including text nodes created by whitespace or line breaks, comment nodes, and HTML element nodes. children returns only HTML elements. In the example container, childNodes includes text and comment entries around the boxes, while children returns the box elements without those additional node types.

Q: Why does firstChild return a text node in JavaScript?

firstChild returns the first node of any type, and whitespace or a line break inside an HTML element is treated as a text node. If formatted HTML places a newline before the first box, that text node comes first in the DOM. firstElementChild should be used when the desired result is the first HTML element.

Q: How do you select the first HTML element inside a container?

Use the firstElementChild property on the container. The lesson first stores or accesses the container and then reads its firstElementChild property. This selects the first box element while ignoring whitespace text nodes and comments that could otherwise appear before it when using the broader firstChild property.

Q: How do you select and style the last child element?

Use lastElementChild to retrieve the final HTML element within the selected parent, then access its style properties. The demonstration applies style.color with the value red and style.backgroundColor with the value green to the last box. This approach avoids selecting a trailing whitespace text node through lastChild.

Q: How can JavaScript find the parent of an element?

Use the parentElement property on the selected element. In the example, the last element child of the container is selected first, and parentElement then returns the container that holds it. This provides a direct way to navigate upward through the DOM tree from a child element to its containing HTML element.

Q: How do you navigate to a previous sibling element?

Use the previousElementSibling property on the currently selected element. It returns the preceding sibling that is an HTML element, rather than a whitespace text node. This is useful when moving sideways through elements that share the same parent, such as the sequence of box elements inside the demonstrated container.

Q: What node types can appear inside childNodes?

The lesson shows that childNodes can contain text nodes, comment nodes, and element nodes. Spaces and line breaks become text nodes, an HTML comment becomes a comment node, and a div becomes an element node. This mixture explains why childNodes often contains more entries than the visible HTML elements suggest.

Q: How can you get only the box elements inside the container?

Select the container and read its children property. children excludes text nodes caused by formatting and excludes comment nodes, leaving only the HTML element children. In the demonstrated structure, that means the collection contains the box elements from Box 1 through Box 5 without the intervening whitespace and comment entries.

Summary & Key Takeaways

• The lesson builds a container with five box elements and uses it to demonstrate DOM navigation. Accessing document.body.childNodes returns every direct node, including whitespace text nodes, the container, and the script. Selecting the container makes it possible to inspect its own nodes and navigate further down the DOM tree.

• Whitespace, line breaks, comments, and HTML elements can all appear as nodes. Therefore, firstChild and lastChild may return text nodes instead of visible elements. firstElementChild, lastElementChild, and children avoid that issue by selecting only HTML elements, such as the five box elements placed inside the example container.

• DOM relationships also allow movement upward and sideways through the tree. parentElement retrieves an element's parent, while previousElementSibling retrieves its preceding sibling element. After selecting an element, its inline CSS can be changed through style properties, as demonstrated by changing the last box's text color and background color.