"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { br: "br", 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: [_jsxs(_components.h1, { children: ["DOM Selectors: ", _jsx(_components.code, { children: "getElementById" }), ", ", _jsx(_components.code, { children: "querySelector" }), ", and More"] }), "\n", _jsxs(_components.p, { children: ["To effectively manipulate the Document Object Model (DOM) with JavaScript, your first step is always to ", _jsx(_components.strong, { children: "select" }), " the HTML elements you want to interact with. JavaScript provides several methods to query the DOM and retrieve references to one or more elements based on their ID, class, tag name, or more complex CSS selectors."] }), "\n", _jsx(_components.p, { children: "Understanding these selection methods is fundamental to making your web pages interactive." }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "1. Traditional DOM Selection Methods" }), "\n", _jsxs(_components.p, { children: ["These methods have been around for a long time and are still perfectly valid, especially when you need to select elements by a very specific attribute like ", _jsx(_components.code, { children: "id" }), ". They generally return ", _jsx(_components.strong, { children: "live HTMLCollections" }), "."] }), "\n", _jsxs(_components.h3, { children: ["a) ", _jsx(_components.code, { children: "document.getElementById()" })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Purpose:" }), " Selects a single element by its unique ", _jsx(_components.code, { children: "id" }), " attribute."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Returns:" }), " The ", _jsx(_components.code, { children: "Element" }), " object if found, or ", _jsx(_components.code, { children: "null" }), " if no element with that ", _jsx(_components.code, { children: "id" }), " exists."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Key Point:" }), " IDs ", _jsx(_components.em, { children: "must" }), " be unique within an HTML document. If multiple elements have the same ID (which is invalid HTML), this method will return only the first one it encounters."] }), "\n"] }), "\n", _jsxs(_components.h3, { children: ["b) ", _jsx(_components.code, { children: "document.getElementsByClassName()" })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Purpose:" }), " Selects all elements that have a specific class name."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Returns:" }), " A ", _jsxs(_components.strong, { children: ["live ", _jsx(_components.code, { children: "HTMLCollection" })] }), " of elements. An ", _jsx(_components.code, { children: "HTMLCollection" }), " is an array-like object (you can iterate over it with ", _jsx(_components.code, { children: "for...of" }), " or convert it to an array, but not ", _jsx(_components.code, { children: "forEach" }), " directly unless converted) that updates automatically if the DOM changes."] }), "\n"] }), "\n", _jsxs(_components.h3, { children: ["c) ", _jsx(_components.code, { children: "document.getElementsByTagName()" })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Purpose:" }), " Selects all elements with a given tag name (e.g., ", _jsx(_components.code, { children: "

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

Welcome to our site!

Product A description.

\n \n

Special offer!

\n View Details\n

\n \n

\n© 2025 MyCompany\n" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Your Task:" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["Select the ", _jsx(_components.code, { children: "

" }), " element using its class and log its text."] }), "\n", _jsxs(_components.li, { children: ["Select the button with ", _jsx(_components.code, { children: "data-id=\"123\"" }), " using a CSS attribute selector and log its text."] }), "\n", _jsxs(_components.li, { children: ["Select ", _jsx(_components.em, { children: "all" }), " ", _jsx(_components.code, { children: "
" }), " elements with the class ", _jsx(_components.code, { children: "card" }), " and log the text content of each."] }), "\n", _jsxs(_components.li, { children: ["Select the list item (", _jsx(_components.code, { children: "
" }), ") with the class ", _jsx(_components.code, { children: "active" }), " and log its text."] }), "\n"] }), "\n", _jsx(CodeEditor, { title: "DOM Selection Exercise", language: "javascript", template: "vanilla" })] }); } 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."); }