"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: "

First paragraph

Second paragraph

List Item 1
List Item 2
List Item 3