Analyse complète des sélecteurs avancés javascript querySelector et querySelectorAll_Basic

Les méthodes querySelector et querySelectorAll sont définies dans la spécification de l'API W3C Selectors. Leur fonction est de localiser facilement les éléments spécifiés dans le document conformément aux spécifications du sélecteur CSS.

À l'heure actuelle, presque tous les principaux navigateurs les prennent en charge. Y compris IE8 (inclus) et supérieur, Firefox, Chrome, Safari, Opera.

querySelector et querySelectorAll définissent les interfaces suivantes dans la spécification :

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; };

D'après la définition de l'interface, vous pouvez voir que Document, DocumentFragment et Element implémentent tous l'interface NodeSelector. Autrement dit, ces trois types d’éléments ont tous deux méthodes. Les paramètres de querySelector et querySelectorAll doivent être des chaînes conformes au sélecteur CSS. La différence est que querySelector renvoie un objet et querySelectorAll renvoie une collection (NodeList).

Récupérer l'élément dont l'attribut I D est test sur la page :

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

Récupérez les éléments dont l'attribut de classe est "rouge" sur la page :

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

ps :

Mais il convient de noter que les éléments de la collection nodeList renvoyée ne sont pas en direct. Si vous souhaitez faire la distinction entre les résultats de retour en temps réel et non en temps réel, veuillez consulter l'exemple suivant :

 <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

Grâce à l'exemple ci-dessus, vous pouvez avoir une bonne compréhension de quels éléments sont mis à jour en temps réel. document.getElementById renvoie le résultat en temps réel. Après y avoir ajouté un sous-élément, le nombre de tous les sous-éléments est à nouveau obtenu, qui a été mis à jour de 2 à 3 d'origine (cela ne tient pas compte du fait que certains navigateurs comme Chrome sera vide et se résoudra également en un nœud enfant).

La différence entre Element.querySelector et Element.querySelectorAll et le sélecteur jQuery(element).find(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 Trouver tous les nœuds du document qui correspondent à la description du sélecteur, y compris l'élément lui-même

jQuery(element).find(selector) Trouver tous les nœuds du document qui correspondent à la description du sélecteur, à l'exclusion de l'élément lui-même

L'analyse complète ci-dessus des sélecteurs avancés javascript querySelector et querySelectorAll est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence et j'espère que vous soutiendrez Script Home.