HomeSearch

JavaScript querySelector Examples

Use the querySelector function to evaluate a CSS selector and change DOM elements.

QuerySelector.

In CSS a selector is a string that "selects" some elements on an HTML page. So "#cat" selects an element with ID of cat. This is powerful.

In JavaScript,

we have access to the querySelector function. This method can be used to get elements from an HTML page. It can also be used to benchmark CSS performance.

An example.

Here is a querySelector example. Please see that the inserted HTML has a DIV and a nested SPAN. We use querySelector to match elements in the HTML.

Note: We call querySelector and match an element with class "test" and a nested span with class "inner."

Finally: We log (to the console) the textContent of the inner span. This is the text "Hello."

JavaScript program that uses querySelector // Set HTML for example. document.body.innerHTML = "<span class=test><span class=inner>Hello</span></div>"; // Get the result of this selector. // ... Finds a class with name "test" and a span with class "inner." var result = document.querySelector(".test span.inner"); // Write the result. console.log("QUERY SELECTOR RESULT: " + result.textContent); Output QUERY SELECTOR RESULT: Hello

QuerySelector benchmarking.

Suppose the performance of your web application is the most important thing in the world. We can use querySelector to test CSS matching speeds.

Version 1: We use a simple ID selector to get the span in the HTML. This tends to have good performance.

Version 2: We use a more complex nth-child selector to get the span in the HTML. This tends to be a bit slower than the previous page.

JavaScript program that benchmarks querySelector, version 1 document.body.innerHTML = "<div id=top><span id=first></span></div>"; var x1 = performance.now(); for (var i = 0; i < 100000; i++) { // Find an element with ID of "first." var result = document.querySelector("#first"); } var x2 = performance.now(); console.log("TIME: " + (x2 - x1)); JavaScript program that benchmarks querySelector, version 2 document.body.innerHTML = "<div id=top><span id=first></span></div>"; var x1 = performance.now(); for (var i = 0; i < 100000; i++) { // Use nth-child to find the span. var result = document.querySelector("#top>span:nth-child(1)"); } var x2 = performance.now(); console.log("TIME: " + (x2 - x1)); Output TIME: 17.35000000189757, querySelector, #first TIME: 25.900000000547152, querySelector, #top>span:nth-child(1)

QuerySelector, nth-child.

In the benchmark we found that shorter, smaller CSS selectors are faster than more complex ones with nth-child parts.

And: This makes sense, but the difference is tiny in real pages. CSS matching performance is not a good optimization target—it is too fast.

With querySelector,

we can access any element on the page through a CSS selector. This is powerful. And we can also benchmark CSS selectors, although this tends to be a waste of time.
Home
Dot Net Perls
© 2007-2019 Sam Allen. All rights reserved. Written by Sam Allen, info@dotnetperls.com.