suchen

Heim >Web-Frontend >js-Tutorial >querySelector vs querySelectorAll in Javascript

querySelector vs querySelectorAll in Javascript

Susan Sarandon
Susan SarandonOriginal
2024-10-17 06:29:021037Durchsuche

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>

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>

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!

JavaScript css NULL if select Collection dom
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JavaScript die .then / .when-Methode.Nächster Artikel：JavaScript die .then / .when-Methode.

In Verbindung stehende Artikel

Mehr sehen