"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", h1: "h1", h2: "h2", h3: "h3", hr: "hr", li: "li", ol: "ol", p: "p", pre: "pre", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {CodeEditor} = _components; if (!CodeEditor) _missingMdxReference("CodeEditor", true); return _jsxs(_Fragment, { children: [_jsx(_components.h1, { children: "DOM Traversal: Navigating the Tree" }), "\n", _jsxs(_components.p, { children: ["Once you've selected an HTML element using methods like ", _jsx(_components.code, { children: "getElementById" }), " or ", _jsx(_components.code, { children: "querySelector" }), ", you often need to access its related elements—its parent, its children, or its siblings. ", _jsx(_components.strong, { children: "DOM traversal" }), " refers to the process of moving up, down, or sideways through the DOM tree using various properties and methods."] }), "\n", _jsx(_components.p, { children: "Understanding traversal is essential for interacting with elements dynamically based on their position relative to other elements on the page." }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "1. Moving Up: Parent Elements" }), "\n", _jsxs(_components.p, { children: ["To find the parent of an element, you can use ", _jsx(_components.code, { children: "parentNode" }), " or ", _jsx(_components.code, { children: "parentElement" }), "."] }), "\n", _jsxs(_components.h3, { children: ["a) ", _jsx(_components.code, { children: "parentNode" })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Purpose:" }), " Returns the parent ", _jsx(_components.strong, { children: "node" }), " of the specified node in the DOM tree. The parent node can be an element, the ", _jsx(_components.code, { children: "document" }), ", or a ", _jsx(_components.code, { children: "DocumentFragment" }), "."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Returns:" }), " A ", _jsx(_components.code, { children: "Node" }), " object (which might be an ", _jsx(_components.code, { children: "Element" }), ", ", _jsx(_components.code, { children: "Document" }), ", or ", _jsx(_components.code, { children: "DocumentFragment" }), "), or ", _jsx(_components.code, { children: "null" }), " if the node has no parent."] }), "\n"] }), "\n", _jsxs(_components.h3, { children: ["b) ", _jsx(_components.code, { children: "parentElement" })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Purpose:" }), " Returns the parent ", _jsx(_components.strong, { children: "element" }), " of the specified element. This is generally more useful when you specifically want an HTML element as the parent."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Returns:" }), " An ", _jsx(_components.code, { children: "Element" }), " object, or ", _jsx(_components.code, { children: "null" }), " if the node has no parent that is also an ", _jsx(_components.code, { children: "Element" }), "."] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Key Difference:" }), " ", _jsx(_components.code, { children: "parentElement" }), " will always return an element or ", _jsx(_components.code, { children: "null" }), ". ", _jsx(_components.code, { children: "parentNode" }), " might return a text node, comment node, or even the ", _jsx(_components.code, { children: "document" }), " itself if the direct parent is not an element. For most common HTML structures, they will return the same element, but ", _jsx(_components.code, { children: "parentElement" }), " is safer if you strictly need an element."] }), "\n", _jsx(CodeEditor, { title: "Parent Node/Element Traversal", code: `

This is a child paragraph.

Some text node here.

`, language: "javascript", showConsole: true, editorHeight: 650, template: "vanilla", stack: true }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "2. Moving Down: Child Elements" }), "\n", _jsxs(_components.p, { children: ["To find the children of an element, you can use ", _jsx(_components.code, { children: "children" }), " or ", _jsx(_components.code, { children: "childNodes" }), "."] }), "\n", _jsxs(_components.h3, { children: ["a) ", _jsx(_components.code, { children: "children" })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Purpose:" }), " Returns a ", _jsxs(_components.strong, { children: ["live ", _jsx(_components.code, { children: "HTMLCollection" })] }), " of an element's child ", _jsx(_components.strong, { children: "elements" }), " (only elements, no text or comment nodes)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Returns:" }), " An ", _jsx(_components.code, { children: "HTMLCollection" }), "."] }), "\n"] }), "\n", _jsxs(_components.h3, { children: ["b) ", _jsx(_components.code, { children: "childNodes" })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Purpose:" }), " Returns a ", _jsxs(_components.strong, { children: ["live ", _jsx(_components.code, { children: "NodeList" })] }), " of all child ", _jsx(_components.strong, { children: "nodes" }), " (elements, text nodes, comment nodes, etc.) of an element."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Returns:" }), " A ", _jsx(_components.code, { children: "NodeList" }), "."] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Key Difference:" }), " ", _jsx(_components.code, { children: "children" }), " is typically more convenient as it only gives you actual HTML elements, avoiding whitespace text nodes. ", _jsx(_components.code, { children: "childNodes" }), " gives you everything, which can sometimes be useful but often requires filtering."] }), "\n", _jsx(CodeEditor, { title: "Child Element Traversal", code: `

Item One
Item Two
Item Three

`, language: "javascript", showConsole: true, editorHeight: 650, template: "vanilla", stack: true }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "3. Moving Sideways: Sibling Elements" }), "\n", _jsx(_components.p, { children: "To find elements at the same level in the DOM tree, you can use sibling properties. Similar to parent/child, there are properties for all nodes and properties specifically for elements." }), "\n", _jsx(_components.h3, { children: "a) Element Sibling Properties (Recommended for Elements)" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "nextElementSibling" }) }), ": Returns the next sibling ", _jsx(_components.strong, { children: "element" }), " of the specified element."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "previousElementSibling" }) }), ": Returns the previous sibling ", _jsx(_components.strong, { children: "element" }), " of the specified element."] }), "\n"] }), "\n", _jsx(_components.h3, { children: "b) Node Sibling Properties (Includes all Node types)" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "nextSibling" }) }), ": Returns the next sibling ", _jsx(_components.strong, { children: "node" }), " of the specified node."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "previousSibling" }) }), ": Returns the previous sibling ", _jsx(_components.strong, { children: "node" }), " of the specified node."] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Key Difference:" }), " For elements, ", _jsx(_components.code, { children: "nextElementSibling" }), " and ", _jsx(_components.code, { children: "previousElementSibling" }), " are generally preferred because they skip over text nodes (like whitespace between HTML tags) and comment nodes, giving you directly the next or previous HTML element."] }), "\n", _jsx(CodeEditor, { title: "Sibling Element Traversal", code: `

Span 1 Span 2

A paragraph

Span 3

`, language: "javascript", showConsole: true, editorHeight: 650, template: "vanilla", stack: true }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { children: "Exercise: DOM Family Tree" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Instructions:" }), "\nGiven the following (simulated) HTML structure, use traversal properties to find and log the requested elements."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "

My Awesome Page

\n \n

Section One

This is the introductory paragraph.

Section Two

Article Title

Article content.

\n \n

\n" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Your Task:" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["From the element with ", _jsx(_components.code, { children: "id=\"intro-paragraph\"" }), ", find its ", _jsx(_components.strong, { children: "parent element" }), " and log its ", _jsx(_components.code, { children: "tagName" }), "."] }), "\n", _jsxs(_components.li, { children: ["From the ", _jsx(_components.code, { children: "

" }), " with class ", _jsx(_components.code, { children: "current" }), ", find its ", _jsx(_components.strong, { children: "next sibling element" }), " and log its ", _jsx(_components.code, { children: "textContent" }), "."] }), "\n", _jsxs(_components.li, { children: ["From the ", _jsx(_components.code, { children: "
" }), " with class ", _jsx(_components.code, { children: "current" }), ", find its ", _jsx(_components.strong, { children: "previous sibling element" }), " and log its ", _jsx(_components.code, { children: "textContent" }), "."] }), "\n", _jsxs(_components.li, { children: ["From the ", _jsx(_components.code, { children: "
" }), " inside the first ", _jsx(_components.code, { children: ".content-section" }), ", find its ", _jsx(_components.strong, { children: "next sibling element" }), " and log its ", _jsx(_components.code, { children: "textContent" }), ". (You might need to combine a selector with traversal)."] }), "\n"] }), "\n", _jsx(CodeEditor, { title: "DOM Traversal Exercise", code: `
My Awesome Page
Home

Products

Contact
Section One

This is the introductory paragraph.

Section Two

Article Title

Article content.

Copyright 2025
`, language: "javascript", showConsole: true, editorHeight: 900, template: "vanilla", stack: true })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }