Maison >interface Web >js tutoriel >querySelector vs querySelectorAll en javascript

querySelector vs querySelectorAll en javascript

Susan Sarandonoriginal: 2024-10-17 06:29:021043parcourir

querySelector vs querySelectorAll in javascript

querySelector vs querySelectorTous les deux sont utilisés pour sélectionner et manipuler des éléments DOM mais ils ont un comportement différent

1.querySelector
Renvoie le premier élément correspondant dans le DOM qui satisfait au sélecteur CSS. Si aucune correspondance n'est trouvée, il renvoie null.

<nav>
<!DOCTYPE html>
<html>
<body>
<nav class='nav'>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>

<script>

const link  = document.querySelector("a")
console.log(link); // <a href="/html/">HTML</a>

</script>

</body>
</html>

dans l'exemple de code ci-dessus, nous pouvons voir à l'intérieur de la balise de script, j'ai sélectionné une balise et nous obtenons un seul premier élément correspondant, pas tous.

2.querySelectorAll
Renvoie tous les éléments correspondants sous forme de NodeList, qui est une collection d'éléments. Si aucune correspondance n'est trouvée, il renvoie une NodeList vide.

<nav>
<!DOCTYPE html>
<html>
<body>
<nav class='nav'>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>

<script>

const link  = document.querySelectorAll("a")
console.log(link); // // [object NodeList] (4) [<a/>,<a/>,<a/>,<a/>]

</script>

</body>
</html>

dans l'exemple de code ci-dessus, nous pouvons voir à l'intérieur de la balise de script, j'ai sélectionné une balise et nous obtenons tous les éléments correspondants sous forme de NodeList.

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!

JavaScript css NULL if select Collection dom

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：JavaScript la méthode .then / .when.Article suivant：JavaScript la méthode .then / .when.

Articles Liés

Voir plus