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.
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."
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.
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.
Dot Net Perls
|© 2007-2019 Sam Allen. All rights reserved. Written by Sam Allen, email@example.com.|