querySelector vs querySelectorAll in Javascript-js-Tutorial-php.cn

querySelector vs querySelectorAll in Javascript

Susan Sarandon

Freigeben： 2024-10-17 06:29:02

Original

1031 Leute haben es durchsucht

querySelector vs querySelectorAll in javascript

querySelector vs. querySelectorAll werden beide zum Auswählen und Bearbeiten von DOM-Elementen verwendet, haben jedoch ein unterschiedliches Verhalten

1.querySelector
Gibt das erste passende Element im DOM zurück, das den CSS-Selektor erfüllt. Wenn keine Übereinstimmung gefunden wird, wird null zurückgegeben.

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

Nach dem Login kopieren

Im obigen Codebeispiel können wir im Skript-Tag sehen, dass ich ein Tag ausgewählt habe und wir nur das erste passende Element erhalten, nicht alle.

2.querySelectorAll
Gibt alle übereinstimmenden Elemente als NodeList zurück, bei der es sich um eine Sammlung von Elementen handelt. Wenn keine Übereinstimmung gefunden wird, wird eine leere NodeList zurückgegeben.

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

Nach dem Login kopieren

Im obigen Codebeispiel können wir im Skript-Tag sehen, dass ich ein Tag ausgewählt habe und wir alle passenden Elemente als NodeList erhalten.

Das obige ist der detaillierte Inhalt vonquerySelector vs querySelectorAll in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!