Javascript,dom Queryselect () and Queryselectall ()

Queryselect ()

This is relatively straightforward and straightforward, and can be understood in a few examples

Gets the first element of class= "example" in the Document: Document.queryselector (". Example");

< P > element: Document.queryselector ("P");

Assume that you have selected two selectors:<H2>And<H3>element. The following code will be the first one in the document<H2>element to add a background color, because we can only filter out the first label that exists in the filter from top to bottom :<H2>A H2 Element</H2><H3>A H3 Element</H3>Document.queryselector ("H2, H3"). Style.backgroundcolor = "Red";

< P > element: Document.queryselector ("P.example");

Queryselectall ()

As the name implies, all eligible tags are filtered out. Generate a NodeList (node list) , we can be lazy to access by subscript .

< P > element var x = Document.queryselectorall ("P");   < P > the background color of the element x[0].style.backgroundcolor = "Red";

< P > element var x = Document.queryselectorall ("P.example");   < P > the background color of the element x[0].style.backgroundcolor = "Red";

< a > element: Document.queryselector ("a[target]");

< P > the number of elements (using the Length property of the NodeList object): var len = Document.queryselectorall (". Example"). Length;

< x . length; i++) {    = "Red";}

< x . length; i++) {    = "Red";}

After reading the above, we find that the most important thing in the selector is the part in parentheses , that is, how we write the selector determines what we are filtering out.

So here's a CSS selector site that you can use for reference.

Javascript,dom Queryselect () and Queryselectall ()