Selectors API Demo

These simple demos each use two methods to select paragraphs, or relevant elements, below the buttons. The Highlight by DOM button finds the element(s) using the regular DOM approach, and sets a class of dom-active. This gives the element(s) a yellow highlight. The Highlight by Selectors API button finds the element(s) using either the querySelector or querySelectorAll methods from the Selectors API, and sets a class of select-active. This gives the element(s) a green highlight. It is possible to use any selector as an argument for both methods, and they can also be chained (accept multiple comma-separated selectors). The methods used below for selecting the elements via regular DOM and Selectors API methods are only for demo purposes and are not necessarily the most efficient way to select the elements in question.

Select by ID

This element has an ID of id-test. Click on either of the buttons above to highlight this element. This element is selected via the DOM using getElementById("id-test");, and via the Selectors API using querySelector("#id-test");.

Select by class

This element has a class of class-test. Click on either of the buttons above to highlight this element. This element is selected via the DOM using getElementsByClassName("class-test");, and via the Selectors API using querySelector(".class-test");.

Select by tag name and position

This element has no class or ID. Click on either button above to highlight this element. This element is selected via the DOM using getElementsByTagName("section");, choosing the 3rd element that is returned, then selecting its first p child element. It is selected via the Selectors API using querySelector("section:nth-of-type(3) p");.

Select by attribute

This element has an aria-disabled attribute. Click on either of the buttons above to highlight this element. This element is selected via the DOM using getElementsByTagName("p") and testing for getAttribute('aria-disabled') == "true") to check the attribute exists. It is selected via the Selectors API using querySelector('p[aria-disabled="true"]');.

Select by multiple pseudo-classes

Click on either of the buttons above to highlight this element and the last paragraph. They are selected via the DOM using getElementsByTagName("section");, choosing the 5th element that is returned, then selecting the first and last (using length - 1) child p elements. This elements are selected via the Selectors API using querySelectorAll('section:nth-of-type(5) p:first-of-type, section:nth-of-type(5) p:last-of-type'). Notice how querySelectorAll can use more than one selector as an argument.

Another paragraph that shouldn't be selected

Another paragraph that shouldn't be selected

The last paragraph that should be selected.

Select all elements matching pseudo-class

Click on either button above to select all the odd list items in the unordered list below. They are selected via the DOM using getElementsByTagName("section");, choosing the 6th element that is returned, then selecting all lis and looping through every other item, starting on the first one. They are selected via the Selectors API using document.querySelectorAll('section:nth-of-type(6) li:nth-child(odd)'), and looping through all of the results.