Umfassende Analyse der erweiterten Javascript-Selektoren querySelector und querySelectorAll_Grundkenntnisse

querySelector- und querySelectorAll-Methoden sind in der W3C Selectors API-Spezifikation definiert. Ihre Funktion besteht darin, bestimmte Elemente im Dokument entsprechend den CSS-Selektorspezifikationen bequem zu lokalisieren.

Derzeit werden sie von fast allen gängigen Browsern unterstützt. Einschließlich IE8 (einschließlich) und höher, Firefox, Chrome, Safari, Opera.

querySelector und querySelectorAll definieren die folgenden Schnittstellen in der Spezifikation:

module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors); NodeList querySelectorAll(in DOMString selectors); }; Document implements NodeSelector; DocumentFragment implements NodeSelector; Element implements NodeSelector; };

Aus der Schnittstellendefinition können Sie ersehen, dass Document, DocumentFragment und Element alle die NodeSelector-Schnittstelle implementieren. Das heißt, diese drei Arten von Elementen verfügen alle über 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 I-Attribut D test ist, auf der Seite:

1 document.getElementById("test");
2 document.querySelector("#test");
3 document.querySelectorAll("#test")[0];

Rufen Sie die Elemente auf der Seite ab, deren Klassenattribut „rot“ ist:

document.getElementsByClassName('red')
document.querySelector('.red')
document.querySelectorAll('.red')

ps:

Es ist jedoch zu beachten, dass die Elemente in der zurückgegebenen nodeList-Sammlung nicht live sind. Wenn Sie zwischen Echtzeit- und Nicht-Echtzeit-Rückgabeergebnissen unterscheiden möchten, sehen Sie sich bitte das folgende Beispiel an:

 <div id="container">
   <div></div>
   <div></div>
 </div>

//首先选取页面中id为container的元素
container=document.getElementById('#container');
console.log(container.childNodes.length)//结果为2
//然后通过代码为其添加一个子元素
container.appendChild(document.createElement('div'));
//这个元素不但添加到页面了，这里的变量container也自动更新了
console.log(container.childNodes.length)//结果为3

Anhand des obigen Beispiels können Sie gut verstehen, welche Elemente in Echtzeit aktualisiert werden. document.getElementById gibt das Echtzeitergebnis zurück. Nach dem Hinzufügen eines Unterelements wird erneut die Anzahl aller Unterelemente abgerufen, die von ursprünglich 2 auf 3 aktualisiert wurde (dies berücksichtigt nicht, dass einige Browser (z. B. Chrome wird leer und wird auch in einen untergeordneten Knoten aufgelöst).

Der Unterschied zwischen Element.querySelector und Element.querySelectorAll und jQuery(element).find(selector) Selector:

<SPAN style="FONT-SIZE: 15px"><divid="test1"><ahref="http://www.jb51.net/">脚本之家</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="http://www.jb51.net/">脚本之家</a> 
console.log(obj2.length)//1 
console.log(obj3)//null 
</script> 
</SPAN> 

querySelectorAll Suchen Sie alle Knoten im Dokument, die der Selektorbeschreibung entsprechen, einschließlich des Elements selbst

jQuery(element).find(selector) Suchen Sie alle Knoten im Dokument, die der Selektorbeschreibung entsprechen, mit Ausnahme des Elements selbst

Die obige umfassende Analyse der erweiterten Javascript-Selektoren querySelector und querySelectorAll ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe, dass Sie Script Home unterstützen.