Die QuerySelector- und QuerySelectorall -Methoden sind in der API -Spezifikation der W3C -Selektoren definiert. Ihre Funktion besteht darin, bestimmte Elemente im Dokument gemäß der CSS -Selektorspezifikation bequem zu lokalisieren.
Derzeit werden sie von fast Mainstream -Browsern unterstützt. Einschließlich IE8 (inklusive) und über Versionen, Firefox, Chrome, Safari, Opera.
QuerySelector- und QuerySelectorAllAlle definieren die folgenden Schnittstellen in der Spezifikation:
Modul DOM {[Supplemental, NoInterfaceObject] Interface -Knotenselector {Element QuerySelector (in Domstring -Selektoren); Nodelist querySelectorAll (in Domstring -Selektoren); }; Dokument implementiert den Knotenselektor; DocumentFragment implementiert Knotenauswahl; Element implementiert Knotenselektor; };Aus der Schnittstellendefinition sehen Sie, dass Dokument, Dokumentfragment und Element alle die Knotenauswahlschnittstelle implementieren. Das heißt, all diese drei Arten von Elementen haben zwei Methoden. Die Parameter von QuerySelector und QuerySelectorAll müssen Zeichenfolgen sein, die dem CSS -Selektor entsprechen. Der Unterschied besteht darin, dass QuerySelector ein Objekt zurückgibt und QuerySelectorall eine Sammlung (Nodelist) zurückgibt.
Holen Sie sich das Element, dessen Seite ich zu Attribut D ist: Test:
1 document.getElementById ("test"); 2 document.querySelector ("#test"); 3 document.querySelectorAll ("#test") [0];Holen Sie sich das Element mit dem Seitenklassenattribut "Rot":
document.getElements byclassName ('rot') document.querySelector ('. rot') document.querySelectorAll ('. rot') document.querySelectorAll ('rot'))PS:
Es ist jedoch zu beachten, dass die Elemente in der zurückgegebenen Nodelist-Sammlung nicht leben. Wenn Sie zwischen einem Echtzeit-Rückgabeergebnis in Echtzeit unterscheiden möchten, finden Sie im folgenden Beispiel:
<div id = "container"> <div> </div> <div> </div> </div>
// Wählen Sie zuerst das Element mit ID -Container in der Seite mit container = document.getElementById ('#Container'); console.log (Container.childnodes.length) // Das Ergebnis 2 // Dann fügen Sie dann ein untergeordnetes Element über den Code -Container hinzu. Appendchild (Dokument. console.log (container.childnodes.length) // Das Ergebnis ist 3Im obigen Beispiel können wir verstehen, welche Elemente, die in Echtzeit aktualisiert werden. document.getElementById gibt das Echtzeitergebnis zurück. Nach dem Hinzufügen eines untergeordneten Elements wird die Anzahl aller untergeordneten Elemente erneut erhalten, und die ursprüngliche 2 wurde auf 3 aktualisiert (nicht in Betracht, dass einige Browser wie Chrome auch den Leerzeichen in einen Kinderknoten analysieren).
Der Unterschied zwischen Element.querySelector und Element.querySelectorAll und JQuery (Element) .Find (Selector) Selektoren:
<SPAN style="FONT-SIZE: 15px"><divid="test1"><ahref="//www.VeVB.COM/">Wulin.com</a></div> <pid="bar">111</p> <script> var d1 = document.getElementById('test1'), obj1 = d1.querySelector('div a'), obj2 = 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 </script> </span>QuerySelectorAll findet alle Knoten, die die Beschreibung der Auswahl im Dokument entsprechen, einschließlich des Elements selbst
JQuery (Element) .Find (Selektor) Finden Sie alle Knoten, die die Auswahlbeschreibung im Dokument erfüllen
Die obige umfassende Analyse der oben genannten JavaScript Advanced Selector QuerySelector und QuerySelectorAll ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.