Using querySelector and querySelectorAll

Modern JavaScript provides powerful methods for selecting elements from the DOM using CSS selectors. The querySelector method allows you to select the first element that matches a given CSS selector, while querySelectorAll returns a static NodeList of all elements matching the selector. CSS selector syntax lets you target elements by tag, class, ID, attribute, or even hierarchical relationships. For example, "div", .item, and #header select elements by tag, class, and ID, respectively. You can also use more complex selectors like "ul li.active" to find all li elements with the class active inside a ul. These methods give you flexibility and precision when working with the DOM.