JavaScript Instance Tutorial: Queryselectorall () method

Article Introduction: whenever a call to Queryselectorall () returns a Staticnodelist object regardless of the number of matched elements, if there is no match, then staticnodelist is empty. Queryselectorall () and Queryselector () are the same as the document and element types.

Queryselectorall () accepts the same two parameters as Queryselecort (), the CSS query and the optional namespace parser, but returns all the matching nodes rather than the individual. This method returns an instance of a new type called staticnodelist.

As the name suggests, Staticnodelist has nodelist all the properties and methods, but its underlying implementation is a snapshot of the collection of elements, rather than a dynamic query that always needs to be renewed against the document. Using staticnodelist eliminates most of the performance problems associated with using NodeList objects.

Whenever a call to Queryselectorall () returns a Staticnodelist object regardless of the number of matched elements, if there is no match, then staticnodelist is empty. Queryselectorall () and Queryselector () are the same as the document and element types. The following are some examples:

Get all images in <div> (same as Getelementsbytaname ("img")
var images = document.getElementById ("Mydiv"). Queryselectorall ("img");

Gets all elements containing the "selected" Class
var selected = Document.queryselectorall (". selected");

Gets <strong> elements in all <p> elements
var strongs = Document.queryselectorall ("P Strong");

The returned Staticnodelist object can be iterated in the same way as NodeList, using item () or a square bracket tag to retrieve a single element. As in the following example:

for (var i = 0, len = strongs.length i < len; i++) {
    var strong = strong[i];//or Strongs.item (i)
    Strong.classna Me = "important";
}

You can use a namespace parser in Queryselectorall () as shown in the following example:

var svgimages = Document.queryselectorall ("Svgsvg", function (prefix) {
    switch (prefix) {return
        "http:// Www.w3.org/2000/svg ";
        Other code here
    }
});

This example retrieves all SVG images in the document that use <svg:svg> definitions.