documentquerySelector

document.querySelector is a method of the Document interface in the Web Platform, used to locate elements in the DOM using CSS selectors. It returns the first Element that matches the given selector, or null if no match is found. The method can also be called on any Element to search within its subtree.

The method takes a single string argument containing one or more CSS selectors. It supports extensive CSS syntax, including tag names, classes, IDs, attribute selectors, combinators, and pseudo-classes. When multiple selectors are provided, the first element that matches any of them is returned.

Examples: document.querySelector('#menu'); returns the element with ID 'menu'. document.querySelector('.item[data-active]'); returns the first element with class 'item' and a data-active attribute. document.querySelector('ul > li:first-child'); returns the first list item in a list.

If no element matches, the function returns null. For selecting all matching elements, use document.querySelectorAll, which returns a static NodeList of elements.

Performance and limitations: querySelector is convenient but may be slower than direct element access for large documents or very complex selectors. It returns only a single element, so use querySelectorAll for multiple results.

Browser support: Supported in all major browsers, including recent versions of Chrome, Firefox, Edge, Safari, and Internet Explorer 8 and later.