Native powerful Dom Selector queryselector

In traditional JavaScript development, finding the DOM is often the first headache that developers encounter, and native JavaScript does not provide much of a DOM selection, only limited to finding it through tags, name, id, and so on, which is obviously far from enough if you want to enter A more precise choice of rows would have to use a regular expression that looks very cumbersome, or use a library. In fact, all browser vendors now offer support for both Queryselector and Queryselectorall, and even Microsoft has deployed IE 8 as a proxy for this feature, Queryselector and Queryselectorall, as another way to find the DOM, is great for developers, and you can use them as quickly as possible to find the nodes you need, just as you would with CSS selectors.

The use of Queryselector and Queryselectorall is very simple, as the title says, it is exactly the same as the CSS, and for front-end developers, this is a learning curve that is almost zero. If we have a DIV with ID test, in order to get to this element, you might look like this:

1	document.getElementById("test");

Now let's try using the new method to get the DIV:

1	document.querySelector("#test");

2	document.querySelectorAll("#test")[0];

The difference is not very good, but if it is slightly more complicated, the original method will become very troublesome, at this time the advantages of Queryselector and Queryselectorall play out. For example, in the following example, we will select the first child element p of the div of class test in document, which is very awkward, but it is simpler to use this new method to select this element than to describe it in words.

1	document.querySelector("div.test>p:first-child");

2	document.querySelectorAll("div.test>p:first-child")[0];

It should now be clear to the parameters in the Queryselector, Queryselectorall method, yes, it receives the same parameters as the CSS selector. The difference between Queryselector and Queryselectorall is that queryselector is used to get an element, and Queryselectorall can get multiple elements. Queryselector returns the first element that matches to, or Null if there are no matching elements. Queryselectorall returns an array that contains the matching elements, and if there are no matching elements, the returned array is empty. In the last example of this article, we use Queryselectorall to show all elements of class emphasis as bold.

1	varemphasisText = document.querySelectorAll(".emphasis");

2	for( vari = 0 , j = emphasisText.length ; i < j ; i++ ){

3	emphasisText[i].style.fontWeight = "bold";

4

}

This is the native method, compared to the speed of jquery, the disadvantage is IE6, 7 does not support.

Native powerful Dom Selector queryselector