Introduction détaillée au sélecteur DOM natif et puissant querySelector (code ci-joint)

Cet article présente principalement quelques connaissances pertinentes sur le puissant sélecteur DOM natif querySelector. Les amis qui en ont besoin peuvent s'y référer

Dans le développement JavaScript traditionnel, trouver le DOM est souvent la première chose que les développeurs rencontrent. Il n'y a pas beaucoup de méthodes de sélection DOM fournies par JavaScript natif. Elles se limitent à la recherche par balise, nom, identifiant, etc. Si vous souhaitez faire une sélection plus précise, vous ne devez pas le faire. utilisez des expressions régulières qui semblent très lourdes ou utilisez une bibliothèque. En fait, tous les fabricants de navigateurs prennent désormais en charge les méthodes querySelector et querySelectorAll. Même Microsoft a envoyé IE 8 comme représentant pour prendre en charge cette fonctionnalité. querySelector et querySelectorAll constituent un autre moyen de trouver le DOM, ce qui facilite grandement leur utilisation. vous pouvez trouver le nœud dont vous avez besoin aussi rapidement qu'en utilisant les sélecteurs CSS.

L'utilisation de querySelector et querySelectorAll est très simple. Comme le titre l'indique, ils sont écrits exactement de la même manière que CSS. Pour les développeurs front-end, il s'agit d'une expérience d'apprentissage presque nulle. Si nous avons un p avec un identifiant test, pour obtenir cet élément, vous pourriez faire quelque chose comme ceci :

document.getElementById("test");
Maintenant, passons do Essayez d'utiliser la nouvelle méthode pour obtenir ce p :

document.querySelector("#test");
document.querySelectorAll("#test")[0];

Ce qui suit est une petite démonstration :

Je suis le p dont l'identifiant est test

C'est comme si il n'y a pas beaucoup de différence, n'est-ce pas ? Mais s'il s'agit d'une situation légèrement plus compliquée, la méthode originale deviendra très gênante. À ce stade, les avantages de querySelector et querySelectorAll entrent en jeu. Par exemple, dans l'exemple suivant, nous sélectionnerons le premier élément enfant p du sous-élément p de p avec test de classe dans le document. Bien sûr, c'est une bouchée, mais en utilisant la nouvelle méthode de cet article pour le sélectionner. L'élément est mieux que de le décrire avec des mots. Encore plus simple.

document.querySelector("p.test>p:first-child");
document.querySelectorAll("p.test>p:first-child")[0];

Ce qui suit est une petite démonstration :

Je suis la balise p dans la couche

Vous devriez maintenant avoir une compréhension très claire des paramètres dans le querySelector et querySelectorAll, oui, les paramètres qu'il reçoit sont exactement les mêmes que ceux des sélecteurs CSS. La différence entre querySelector et querySelectorAll est que querySelector est utilisé pour obtenir un élément, tandis que querySelectorAll peut obtenir plusieurs éléments. querySelector renverra le premier élément correspondant, ou Null s'il n'y a pas d'élément correspondant. querySelectorAll renvoie un tableau contenant des éléments correspondants. S'il n'y a aucun élément correspondant, le tableau renvoyé est vide. Dans le dernier exemple de cet article, nous utilisons querySelectorAll pour mettre en gras tous les éléments avec une accentuation de classe.

var emphasisText = document.querySelectorAll(".emphasis");
for( var i = 0 , j = emphasisText.length ; i < j ; i++ ){
  emphasisText[i].style.fontWeight = "bold";
}

Il s'agit d'une méthode native, plus rapide que jquery. L'inconvénient est que IE6 et 7 ne la supportent pas.

Spécification W3C et implémentation dans la bibliothèque

querySelector : renvoie le premier nœud Element correspondant dans les sous-arbres du nœud. S'il n'existe pas de tel nœud, la méthode doit renvoyer null (Renvoyer l'élément spécifié. Le premier de l'ensemble des sélecteurs correspondants dans le sous-arbre du nœud, s'il n'y a pas de correspondance, renvoie null)

querySelectorAll : renvoie une NodeList contenant tous les nœuds Element correspondants dans les sous-arbres du nœud, dans l'ordre du document If. il n'existe pas de tels nœuds, la méthode doit renvoyer une NodeList vide. (Renvoie l'ensemble de nœuds correspondant au sélecteur dans le sous-arbre du nœud d'élément spécifié, en utilisant une pré-recherche en profondeur ; s'il n'y a pas de correspondance, cette méthode renvoie un ensemble vide)

Il n'y a pas de problème lorsque BaseElement est un document, et l'implémentation de chaque navigateur est fondamentalement la même, cependant, lorsque BaseElement est un nœud dom ordinaire (un nœud dom qui prend en charge ces deux méthodes) ; du navigateur L'implémentation est un peu étrange, par exemple :

<p class= "test"  id= "testId" > 
   <p><span>Test</span></p> 
</p> 
<script type= "text/javascript" >   
   var  testElement= document.getElementById( &#39;testId&#39; ); 
   var  element = testElement.querySelector( &#39;.test span&#39; ); 
   var  elementList = document.querySelectorAll( &#39;.test span&#39; ); 
   console.log(element); // <span>Test</span>
   console.log(elementList); // 1  
</script>

Selon la compréhension du W3C, cet exemple devrait renvoyer : element: null elementList: []; nœuds enfants ; mais le navigateur semble ignorer baseElement et ne se soucie que des sélecteurs, ce qui signifie que baseElement est presque un document pour le moment ; cela n'est pas cohérent avec nos résultats attendus. Peut-être qu'à mesure que les navigateurs continuent de se mettre à niveau, ce problème sera unifié !

La sagesse humaine est toujours infinie. Andrew Dupont a inventé une méthode pour corriger temporairement cet étrange problème, qui consiste à spécifier l'identifiant de baseElement devant les sélecteurs pour limiter la plage de correspondance. Cette méthode est largement utilisée dans divers domaines ; framework pandémique ;

Implémentation de Jquery :

var  oldContext = context,
old = context.getAttribute( "id"  ),
nid = old || id,

try  {
	if  ( !relativeHierarchySelector || hasParent ) {
   	return  makeArray( context.querySelectorAll( "[id='"  + nid + "'] "  + query ), extra );
 	}  
} 
catch (pseudoError) {} 
finally {
	if  ( !old ) {
	 	oldContext.removeAttribute( "id"  );
	}
}

Ne regardons pas d'autres parties de ce code, regardons simplement comment il implémente cette méthode C'est un fragment de ; JQuery1.6 ; lorsque baseElement n'a pas d'ID, définissez-lui un id = "__sizzle__", puis ajoutez-le devant les sélecteurs lorsque vous l'utilisez pour limiter la plage ; context.querySelectorAll( "[id='" + nid + " '] " + query ; Enfin, comme cet ID lui-même n'est pas celui que baseElement devrait avoir, il doit être supprimé : oldContext.removeAttribute( "id" ); , implémentation Mootools :

var  currentId = _context.getAttribute( 'id' ), slickid = 'slickid__' ;
_context.setAttribute( 'id' , slickid);
_expression = '#'  + slickid + ' '  + _expression;
context = _context.parentNode;

Mootools和Jquery类似：只不过slickid = 'slickid__'；其实意义是一样的；方法兼容性：FF3.5+/IE8+/Chrome 1+/opera 10+/Safari 3.2+;IE 8 ：不支持baseElement为object；

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Node.Js实现端口重用步骤详解

js继承中的方法重写重点讲解

js方法的重写和重载的技巧详解

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!