Les méthodes QueySelector et QuerySelectorall sont définies dans la spécification de l'API des sélecteurs W3C. Leur fonction est de localiser facilement les éléments spécifiés dans le document en fonction de la spécification du sélecteur CSS.
Actuellement, ils sont soutenus par des navigateurs presque traditionnels. Y compris IE8 (inclusif) et les versions supérieures, Firefox, Chrome, Safari, Opera.
queySelector et QuerySelectorall définissent les interfaces suivantes dans la spécification:
Module Dom {[Supplémentaire, No INTERFACEOBject] Interface NODEDELECTOR {Element QueRySelector (dans DomString Selectors); NodeList QuerySelectorAll (dans Domstring Selectors); }; Le document implémente NOEDEDELECTOR; DocumentFragment implémente NOEDEDELECTOR; L'élément implémente NOEDEDELECTOR; };À partir de la définition de l'interface, vous pouvez voir que le document, le document de document et l'élément implémentent tous l'interface NODEDELECTOR. Autrement dit, ces trois types d'éléments ont deux méthodes. Les paramètres de QueySelector et QuerySelectorall doivent être des chaînes conformes au sélecteur CSS. La différence est que QueySelector renvoie un objet et queySelectoral renvoie une collection (NodeList).
Obtenez l'élément dont j'attribue la page d est le test:
1 document.getElementById ("test"); 2 document.QuerySelector ("# test"); 3 document.QuerySelectorAll ("# test") [0];Obtenez l'élément avec l'attribut de classe de page "Red":
document.getElementsByClassName ('Red') document.QuerySelector ('. Red') document.QuerySelectorAll ('. Red') document.QuerySelectorall ('. Red')PS:
Mais il convient de noter que les éléments de la collection Nodelist retournée ne sont pas en vie. Si vous souhaitez faire la distinction entre ce qui est un résultat de retour en temps non réel en temps réel, veuillez consulter l'exemple suivant:
<div id = "conteneur"> <div> </div> <div> </div> </div>
// Sélectionnez d'abord l'élément avec un conteneur d'ID dans la page avec contener = document.getElementById ('# Container'); console.log (contener.childnodes.length) // le résultat est 2 // puis ajoutez un élément enfant à celui-ci via le code Container.APPENDCHILD (document.CreateElement ('div'); // Cet élément n'est pas seulement ajouté à la page, mais la variable Contatainer ici aussi console.log (contener.childnodes.length) // Le résultat est 3Grâce à l'exemple ci-dessus, nous pouvons comprendre quels éléments qui seront mis à jour en temps réel. Document.getElementById renvoie le résultat en temps réel. Après avoir ajouté un élément enfant, le nombre de tous les éléments enfants est à nouveau obtenu, et l'original 2 a été mis à jour à 3 (ne considérant pas que certains navigateurs tels que Chrome analyseront également le blanc dans un nœud enfant).
La différence entre élément.QuerySelector et élément.QuerySelectorall et jQuery (élément) .Find (sélecteur) Sélecteurs:
<Span style = "font-size: 15px"> <divid = "test1"> <href = "// www.vevb.com/">wulin.com </a> </div> <pid =" bar "> 111 </p> <cript> var d1 = document.getElementByid ('Test1'), obj1 = d1.queyley d1.QuerySelectorAll ('div A'); obj3 = $ (d1) .find ('div a'); console.log (obj1) // <a href = "// www.vevb.com/">wulin.com </a> console.log (obj2.length) // 1 console.log (obj3) // null </cript> </span>queySelectorall trouve tous les nœuds qui répondent à la description du sélecteur dans le document, y compris l'élément lui-même
jQuery (élément) .find (sélecteur) Trouvez tous les nœuds qui répondent à la description de sélection dans le document et n'incluez pas l'élément lui-même
L'analyse complète ci-dessus du sélecteur avancé JavaScript ci-dessus QueySelector et QueySelectorall est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.