"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", em: "em", 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: "Introduction to the DOM: Tree, Nodes, and Elements" }), "\n", _jsxs(_components.p, { children: ["Welcome to Module 3! In web development, JavaScript's primary interaction with the HTML structure of a webpage happens through the ", _jsx(_components.strong, { children: "Document Object Model (DOM)" }), ". The DOM is not HTML itself, but rather a programming interface for web documents. It represents the page so that programs (like JavaScript) can change the document structure, style, and content."] }), "\n", _jsx(_components.p, { children: "Think of the DOM as a living, editable blueprint of your web page." }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "1. The DOM as a Tree Structure" }), "\n", _jsxs(_components.p, { children: ["When a web browser loads an HTML document, it creates a tree-like representation of that document. Each part of the HTML document (elements, attributes, text, comments) becomes a ", _jsx(_components.strong, { children: "node" }), " in this DOM tree."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["The ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "document" }) }), " object is the root of the tree."] }), "\n", _jsxs(_components.li, { children: ["The ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "" }) }), " element is usually the direct child of the ", _jsx(_components.code, { children: "document" }), " object."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "" }) }), " and ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "" }) }), " are children of ", _jsx(_components.code, { children: "" }), "."] }), "\n", _jsxs(_components.li, { children: ["All other elements are nested within ", _jsx(_components.code, { children: "" }), ", forming branches and leaves of the tree."] }), "\n"] }), "\n", _jsx(_components.p, { children: "This hierarchical structure makes it easy for JavaScript to navigate and manipulate specific parts of the page." }), "\n", _jsx(_components.p, { children: "Here's a simplified visual of a DOM tree:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "document (Root Node)\n└── html (Element Node)\n ├── head (Element Node)\n │ └── title (Element Node)\n │ └── \"My Page\" (Text Node)\n └── body (Element Node)\n ├── h1 (Element Node)\n │ └── \"Welcome!\" (Text Node)\n ├── p (Element Node)\n │ └── \"This is a paragraph.\" (Text Node)\n └── div (Element Node)\n └── button (Element Node)\n └── \"Click me\" (Text Node)\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "2. Nodes vs. Elements" }), "\n", _jsx(_components.p, { children: "While often used interchangeably in casual conversation, \"node\" and \"element\" have distinct meanings in the DOM:" }), "\n", _jsx(_components.h3, { children: "a) Node" }), "\n", _jsxs(_components.p, { children: ["A ", _jsx(_components.strong, { children: "Node" }), " is the generic term for ", _jsx(_components.em, { children: "any" }), " single point in the DOM tree. There are several types of nodes:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Element Nodes:" }), " Represent HTML tags (e.g., ", _jsx(_components.code, { children: "

" }), ", ", _jsx(_components.code, { children: "

Will be #comment console.log(' Text Content (comment):', commentNode.textContent); `, language: "javascript", showConsole: true, editorHeight: 600, 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."); }