Introduction à la méthode querySelector() en JavaScript pour obtenir des éléments HTML

QuerySelector() est une méthode qui peut détecter et obtenir n'importe quel élément HTML à partir de JavaScript. Bien que JavaScript ait des méthodes telles que getElemenById() et getElemetnsByClasNamo() qui peuvent obtenir des éléments HTML depuis le début, si vous utilisez querySelector(), alors vous pouvez spécifier sélectivement des éléments HTML au sens jQuery sans connaître la valeur de l'attribut id, la valeur de l'attribut de classe, etc.

En bref, vous pouvez utiliser querySelector() pour récupérer n'importe quel élément HTML.

Regardons d'abord la syntaxe de base de querySelector()

QuerySelector() sera généralement exécuté sur la plage cible.

document.querySelector( CSS选择器 )

Dans ce cas, querySelector() sera exécuté sur l'ensemble du document. Des éléments HTML arbitraires peuvent être obtenus en spécifiant des sélecteurs CSS de type jQuery pour les paramètres.

Il est à noter que le programme se terminera lorsqu'il obtiendra le premier élément HTML correspondant.

En d'autres termes, si vous souhaitez obtenir plusieurs éléments, vous devez créer un processus en boucle, ou utiliser le querySelectorAll().

dont nous parlerons plus tard. Continuons à voirComment utiliser querySelector() ?

Obtenez l'élément HTML avec les attributs ID et Class

L'exemple est le suivant

HTML

<h1 class="sample">标题示例</h1>
<p id="test">内容示例</p>

JavaScript

var elem1 = document.querySelector('.sample');
var elem2 = document.querySelector('#test');
console.log(elem1);
console.log(elem2);

Les résultats en cours d'exécution sont les suivants

Vous pouvez voir que chaque paramètre de querySelector() spécifie un sélecteur CSS.

Ainsi, le même querySelector() peut également obtenir n'importe quel élément HTML selon la méthode de spécification des paramètres.

Il ressort du résultat de l'exécution que l'élément a été obtenu.

Voyons comment utiliser querySelectorAll()

querySelectorAll() peut obtenir plusieurs éléments HTML.

Jetons d'abord un coup d'œil à sa syntaxe de base

document.querySelectorAll(CSS选择器)

De cette façon, la méthode et la plage cible des paramètres spécifiés sont les mêmes que querySelector().

La plus grande différence est que vous obtenez tous les éléments HTML correspondants !

Puisque queryselector() ne peut récupérer que le premier élément correspondant, nous pouvons utiliser querySelectorAll() pour obtenir plusieurs éléments.

Regardons un exemple spécifique

Code HTML

<ul>
  <li class="list">列表１</li>
  <li class="list">列表２</li>
  <li class="list">列表３</li>
</ul>

Dans cet exemple, plusieurs éléments de liste sont organisés.

Pour récupérer tous les éléments de cette liste, vous pouvez effectuer ce qui suit

JavaScript

var elem = document.querySelectorAll('.list');
console.log(elem);

Dans cet exemple, la valeur de l'attribut de classe "list" est spécifiée comme querySelectorAll() paramètres.

Cela spécifiera tous les éléments de la liste, afin que tous les éléments de la liste puissent être obtenus.

Bien sûr, vous pouvez définir l'élément "li" tel quel, mais veillez à l'équilibrer avec d'autres éléments de la liste.

Les éléments obtenus par querySelectorAll() sont appelés NodeList, qui stocke une structure de données similaire à un tableau.

Ci-dessous, nous utilisons « forEach » pour traiter un élément à la fois, ce qui traite efficacement le tableau à plusieurs reprises.

var elem = document.querySelectorAll('.list');
elem.forEach(function(value) {
    console.log(value);
})

Les résultats d'exécution sont les suivants

Dans cet exemple, les résultats obtenus à l'aide de querySelectorAll() sont bouclés par l'instruction forEach.

En spécifiant le paramètre "value", chaque élément HTML peut être obtenu comme le résultat ci-dessus.

Remarque : Vous pouvez effectuer un traitement arbitraire sur des éléments HTML obtenus à l'aide de querySelectorAll() !

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!