Selectors

To manipulate any part of a web page, you first need a way to select the specific HTML elements you want to work with. JavaScript provides several methods for this purpose. The classic methods include `getElementById`, which is very fast and returns a single element object matching a specific ID. `getElementsByTagName` and `getElementsByClassName` return live HTMLCollections of all elements with a given tag name or class, respectively. A live collection means it automatically updates if elements are added or removed from the DOM. However, modern JavaScript development largely favors the `querySelector` and `querySelectorAll` methods. These are more powerful because they allow you to use any CSS selector string to target elements. `querySelector` returns the *first* element that matches the selector. If no match is found, it returns `null`. `querySelectorAll` returns a static `NodeList` containing *all* elements that match the selector. A static NodeList does not update automatically like an HTMLCollection. Because CSS selectors are so versatile (allowing you to select by ID, class, attribute, descendant relationships, etc.), these two methods provide a unified and powerful way to select any element or group of elements you need.