JavaScript DOM - Children, Parent & Sibling Nodes | Sigma Web Development Course - Tutorial #67

Summary

This lesson explains how to navigate the JavaScript DOM tree: inspect an element’s children, find its parent and siblings, and apply styles to selected elements.

The instructor creates a page with a .container holding five .box elements, then uses JavaScript and the browser console to demonstrate DOM properties.

Key Concepts and Methods

Nodes and Elements

• A node can be an HTML element, text, or a comment.
• Whitespace and line breaks in HTML are represented as text nodes, so they may appear when inspecting all nodes.
• An element is specifically an HTML element, such as a div.

Inspecting Children

• childNodes returns all child nodes, including elements, text nodes, and comments.
• children returns only child HTML elements.
• firstChild and lastChild return the first and last child nodes, which may be whitespace text nodes.
• firstElementChild and lastElementChild return the first and last child elements, excluding text and comment nodes.
• Collections such as children are indexed from zero. For example, index 3 refers to the fourth element.

Finding Parents and Siblings

• parentElement moves from an element up to its parent element.
• nextElementSibling and previousElementSibling find adjacent sibling elements.
• nextSibling and previousSibling can return any node, including whitespace text nodes.
• Siblings share the same parent.

Changing Styles

Once an element is selected, its styles can be changed through its style property. For example, the instructor changes the last child element’s text color and background color.

Table Properties

The instructor briefly demonstrates selecting a table and accessing its rows through table.rows. Other table-related properties, such as caption and thead, are suggested for further exploration.

Practical Guidance

1. Select an element, such as the page body or a container.
2. Use childNodes to access every node, or children to access only HTML elements.
3. Choose properties ending in Element when navigating among elements rather than text or comment nodes.
4. Use parentElement to move upward and sibling properties to move sideways in the DOM tree.
5. Apply styles through the selected element’s style property.
6. Practise these properties in projects. An IDE’s autocomplete can help you discover available options.
7. Read the course notes on “Walking the DOM” for additional clarity.

Speakers and Sources

• Speaker: CodeWithHarry, the instructor. No other speakers are featured.
• Demonstration tools: VS Code and a browser console.
• References mentioned: Course notes on “Walking the DOM” and a sample HTML table.