How Do You Navigate Children, Parent, and Sibling Nodes in JavaScript DOM? | Sigma Web Development Course Tutorial #67

TL;DR

Navigate the JavaScript DOM with childNodes, children, firstElementChild, lastElementChild, parentElement, and previousElementSibling. The tutorial uses a container with five box elements to show why childNodes can include whitespace text and comment nodes, while element-specific properties return only HTML elements. It also demonstrates styling the last box with red text and a green background, so read on for practical parent, child, and sibling selection patterns.

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 in JavaScript?

childNodes returns every direct child node, including HTML elements, comments, and text nodes created by whitespace or line breaks. children returns only the child elements, making it more practical when you want the boxes without formatting-related nodes.

Q: Why does firstChild return a text node?

firstChild returns the first node regardless of its type. A newline or space before the first box is represented as a text node, so firstChild can select that whitespace instead of the visible element.

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

Use firstElementChild on the container. It skips text and comment nodes, selecting the first box element rather than whitespace that may appear before it.

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

Use lastElementChild to select the final HTML element inside the parent. The tutorial changes the last box by setting its text color to red and its background color to green through its style properties.

Q: How can JavaScript find an element's parent?

Use parentElement on the selected child element. In the example, applying it to the container's last element child navigates upward and returns the container.

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

Use previousElementSibling on the current element. It returns the preceding sibling that is an HTML element and avoids selecting nearby whitespace text nodes.

Q: What node types can childNodes contain?

childNodes can contain text, comment, and element nodes. In the demonstrated body, the returned nodes include whitespace text nodes, the container element, and the script element.

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

Select the container and access its children property. Because children excludes text and comment nodes, it returns the HTML elements for Box 1 through Box 5 without the extra nodes created by formatting.

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.