querySelector vs querySelectorAll en javascript-js tutoriel-php.cn

querySelector vs querySelectorAll en javascript

Susan Sarandon

Libérer： 2024-10-17 06:29:02

original

939 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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!