querySelector

querySelector is a DOM method that returns the first element within the document (or within a specified element) that matches a given CSS selector. It is available as document.querySelector and Element.querySelector, and returns null if no element matches.

The method accepts a single string containing a CSS selector. It can locate elements by id, class, tag name, attribute, or more complex selectors, including descendant and combinator relationships. Examples: document.querySelector('#main'); document.querySelector('.item.active'); document.querySelector('ul > li:first-child').

To obtain all matches, use querySelectorAll, which returns a static NodeList of elements. Unlike querySelector, it does not stop at the first match. The returned NodeList is not live in modern browsers; it can be iterated with forEach or converted to an Array if needed.

querySelector can be used on the document object or any Element, enabling scoped searches within a subsection of the DOM: document.getElementById('content').querySelector('.title'). The selector string follows standard CSS syntax, with support for many selectors, though some older browsers may lack full support.

Performance and compatibility: querySelector is widely supported in modern browsers, including older versions of Internet Explorer. When used repeatedly, consider caching references to elements to avoid repeated DOM traversal and improve performance. It is a synchronous operation and part of the CSS Object Model, enabling concise and flexible element retrieval without creating additional variables or complex traversal code.