jQuery-Selektor querySelector-Nutzungsanleitung_jquery

Einführung

HTML5 führt zwei neue Methoden, document.querySelector und document.querySelectorAll, in die Web-API ein, um Elemente bequemer aus dem DOM auszuwählen. Ihre Funktionen ähneln den Selektoren von jQuery. Dies erleichtert das Schreiben von nativem JavaScript-Code erheblich.
Verwendung

Die beiden Methoden verwenden eine ähnliche Syntax und erhalten beide einen String-Parameter. Dieser Parameter muss eine zulässige CSS-Auswahlsyntax sein.

Code kopieren Der Code lautet wie folgt:

element = document.querySelector('selectors');
elementList = document.querySelectorAll('selectors');

Der Parameter „selectors“ kann mehrere durch Kommas getrennte CSS-Selektoren enthalten.

Code kopieren Der Code lautet wie folgt:

element = document.querySelector('selector1,selector2,...');
elementList = document.querySelectorAll('selector1,selector2,...');

Mit diesen beiden Methoden können keine Elemente mit Pseudoklassenstatus gefunden werden. Beispielsweise erhält querySelector(':hover') nicht die erwarteten Ergebnisse.

querySelector

Code kopieren Der Code lautet wie folgt:

element = document.querySelector('div#container');//Gib das erste div
mit der ID des Containers zurück element = document.querySelector('.foo,.bar');//Gib das erste Element mit der Stilklasse foo oder bar zurück

querySelectorAll

Diese Methode gibt alle Elemente zurück, die die Bedingungen erfüllen, und das Ergebnis ist eine NodeList-Sammlung. Die Suchregeln sind die gleichen wie zuvor beschrieben.

elements = document.querySelectorAll('div.foo');//Alle Divs mit foo-Klassenstil zurückgeben
Es ist zu beachten, dass die Elemente in der zurückgegebenen nodeList-Sammlung nicht in Echtzeit vorliegen.