Heim > Artikel > Web-Frontend > So verwenden Sie die querySelector-Methode

So verwenden Sie die querySelector-Methode

不言Original: 2019-02-14 15:23:1520667Durchsuche

Die Methode querySelector() kann verwendet werden, um ein Element im Dokument zurückzugeben, das mit dem angegebenen CSS-Selektor übereinstimmt. Wenn Sie alle Elemente zurückgeben müssen, müssen Sie stattdessen die Methode querySelectorAll() verwenden spezifische Verwendung der querySelector-Methode.

Werfen wir zunächst einen Blick auf die grundlegende Syntax von querySelector()

document.querySelector(CSS selectors)

CSS-Selektoren repräsentieren das CSS von einem oder mehreren Auswahl passender Elemente. Elemente können anhand ihrer ID, Klasse, ihres Typs, ihrer Attribute, Attributwerte usw. ausgewählt werden.

Hinweis: Bei mehreren Selektoren verwenden Sie Kommas, um sie zu trennen.

Sehen wir uns unten ein konkretes Beispiel an

Der Code lautet wie folgt

<!DOCTYPE html>
<html>
<head>
   <title></title>
</head>
<body>
<h2 class="example">文本的标题</h2>
<p class="example"> 文本的段落。</p> 
<button onclick="myFunction()">按钮</button>
<script>
function myFunction() {
    document.querySelector(".example").style.backgroundColor = "red";
}
</script>
</body>
</html>

Der Effekt ist wie folgt: Wenn auf die „Schaltfläche“ geklickt wird, ändert sich die Hintergrundfarbe des Der Texttitel ändert sich wie folgt: Rot

So verwenden Sie die querySelector-Methode

Dieser Artikel endet hier. Für weitere spannende Inhalte können Sie auf andere verwandte Kolumnen-Tutorials auf der chinesischen PHP-Website achten! ! !

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die querySelector-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：So verwenden Sie die insertBefore()-Methode von jQueryNächster Artikel：So verwenden Sie die insertBefore()-Methode von jQuery

In Verbindung stehende Artikel

Mehr sehen