Javascript-Suche nach Tag. Javascript und JQuery wählen ein Element nach Klasse aus (Klassenattribut). Also schreiben wir das Skript von Grund auf

Innerhalb des Dokuments, das dem angegebenen Selektor oder der angegebenen Gruppe von Selektoren entspricht. Wenn keine Übereinstimmungen gefunden werden, wird null zurückgegeben.

Hinweis: Der Abgleich erfolgt mithilfe einer Tiefendurchquerung der Knoten des Dokuments vor der Reihenfolge, beginnend mit dem ersten Element im Markup des Dokuments und einer Iteration durch aufeinanderfolgende Knoten in der Reihenfolge der Anzahl der untergeordneten Knoten.

Hinweis: Zeichen, die nicht Teil der Standard-CSS-Syntax sind, müssen mit einem Backslash-Zeichen maskiert werden. Da JavaScript auch Backslash-Escapezeichen verwendet, sollten Sie beim Schreiben von Zeichenfolgenliteralen mit diesen Zeichen besonders vorsichtig sein. Weitere Informationen finden Sie unter.

Wenn der angegebene Selektor mit einer ID übereinstimmt, die fälschlicherweise mehr als einmal im Dokument verwendet wird, wird das erste Element mit dieser ID zurückgegeben.

Um einen Abgleich mit einer ID oder Selektoren durchzuführen, die nicht der Standard-CSS-Syntax entsprechen (z. B. durch die unangemessene Verwendung eines Doppelpunkts oder Leerzeichens), müssen Sie das Zeichen mit einem Backslash („\“) maskieren. Da der Backslash in JavaScript auch ein Escape-Zeichen ist, müssen Sie ihn bei der Eingabe einer Literalzeichenfolge maskieren zweimal(einmal für den JavaScript-String und ein anderes Mal für querySelector()):

console.log("#foo\bar"); // "#fooar" (\b ist das Backspace-Steuerzeichen) document.querySelector("#foo\bar"); // Stimmt mit nichts überein console.log("#foo\\bar"); // "#foo\bar" console.log("#foo\\\\bar"); // "#foo\\bar" document.querySelector("#foo\\\\bar"); // Übereinstimmung mit dem ersten Div document.querySelector("#foo:bar"); // Stimmt mit nichts überein document.querySelector("#foo\\:bar"); // Übereinstimmung mit dem zweiten Div

In diesem Beispiel wird das erste Element im Dokument mit der Klasse „myclass“ zurückgegeben:

Var el = document.querySelector(".myclass");

Selektoren können auch sehr leistungsfähig sein, wie das folgende Beispiel zeigt. Hier wird das erste Element mit dem Namen „login“ () zurückgegeben, das sich innerhalb einer Klasse befindet, deren Klasse „user-panel main“ () im Dokument ist:

Var el = document.querySelector("div.user-panel.main input");

Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, schauen Sie sich bitte https://github.com/mdn/browser-compat-data an und senden Sie uns eine Pull-Anfrage.

Kompatibilitätsdaten auf GitHub aktualisieren

Zusätzlich zur Tatsache, dass wir Elemente auf Webseiten anhand ihrer ID auswählen können, können wir Elemente auch anhand ihres Klassenattributs auswählen.

Die Aufgabe ist auch sehr häufig. Wenn ich meine Skripte schreibe, muss ich diesen Selektor sehr oft verwenden.

Nehmen wir an, wir haben den folgenden Code auf der Seite.

Die Aufgabe ist einfach: Sie müssen ein Element mit der Klasse class="elem" auswählen und mit Javascript einige Aktionen damit ausführen.

Schauen wir uns verschiedene Möglichkeiten an, wie das geht.

Option 1. Verwenden Javascript-Methode getElementsByClassName.

Wenn Sie keine zusätzlichen Bibliotheken verwenden, können Sie mit der Methode getElementsByClassName(“class_name”) auf ein Element zugreifen.

Zum Beispiel in Bezug auf Quellcode können Sie die folgenden Codezeilen hinzufügen.

Inhalte blockieren. Alert(document.getElementsByClassName("elem").innerHTML);

Als Ergebnis erhalten wir, wenn alles korrekt funktioniert, ein Popup-Fenster, in dem der Text angezeigt wird, der sich im div-Block befindet.

Bitte beachten Sie, dass das Ergebnis der Ausführung der getElementsByClassName-Methode ein Array von Elementen ist, weil Auf einer Seite können mehrere Elemente mit derselben Klasse vorhanden sein.

Aus diesem Grund müssen Sie am Ende der document.getElementsByClassName("elem")-Konstruktion angeben, dass das Nullelement des Arrays () angezeigt wird. Das Zählen in Javascript beginnt bei Null, nicht bei Eins.

Das Problem bei der Verwendung der getElementsByClassName-Methode besteht jedoch darin, dass diese Methode in älteren Browserversionen nicht unterstützt wird.

Es gibt einige Tricks, um dies zu umgehen, aber es handelt sich um redundanten Code. Sie können beispielsweise reguläre Ausdrücke verwenden:

If(document.getElementsByClassName == undefiniert) ( document.getElementsByClassName = function(cl) ( var retnode = ; var myclass = new RegExp("\\b"+cl+"\\b"); var elem = this.getElementsByTagName( "*"); für (var i = 0; i< elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) { retnode.push(elem[i]); } } return retnode; } };

Dies ist eine Möglichkeit, das Problem zu lösen. Aber um ehrlich zu sein, ist es für mich nicht sehr akzeptabel, eine Seite mit unnötigem Code zu überladen, daher verwende ich meistens die zweite Option, um das Problem zu lösen.

Option 2. Verwendung der Jquery-Bibliothek.

Durch die Verwendung der Jquery-Bibliothek lässt sich das Problem der Auswahl von Elementen anhand ihres Klassenattributs erheblich einfacher lösen. Sie müssen die folgende Konstruktion verwenden:

Hier ist elem der dem Element zugewiesene Klassenname.

Beachten Sie, dass die Jquery-Bibliothek zunächst eingebunden werden muss, damit dies funktioniert. Es wird im Abschnitt hinzugefügt. Eine Möglichkeit hierfür ist das Hinzufügen nächste Zeile Code:

Damit die Bibliothek geladen werden kann, muss eine Internetverbindung bestehen.

Sehen wir uns anhand eines Beispiels an, wie das funktioniert.

Das Skript selbst sollte sich wie im vorherigen Beispiel unter dem Code des Elements befinden, mit dem Sie interagieren möchten.

Es gibt also zwei Möglichkeiten, wie Sie mit Elementen interagieren können, für die das Klassenattribut festgelegt ist. Wählen Sie diejenige aus, die am besten zu Ihnen passt, und setzen Sie sie in die Praxis um.

Damit das Skript mit einem beliebigen Seitenelement funktioniert, muss dieses Element zunächst gefunden werden. Dafür gibt es in JavaScript mehrere Möglichkeiten. Das gefundene Element wird normalerweise einer Variablen zugewiesen, und anschließend greift das Skript über diese Variable auf das Element zu und führt einige Aktionen damit aus.

Wenn einem Element im Seitencode ein ID-Attribut zugewiesen wird, kann das Element anhand der ID gefunden werden. Dies ist der einfachste Weg. Das Element wird mit der Methode getElementById() des globalen Dokumentobjekts gesucht.

document.getElementById(id)

Optionen:

id – ID des zu findenden Elements. id ist eine Zeichenfolge und muss daher in Anführungszeichen stehen.

Lassen Sie uns eine Seite erstellen, ein Element hinzufügen, ihr eine ID geben und dieses Element im Skript suchen:

HTML Quelltext:

JavaScript:

Wir weisen das gefundene Element der Blockvariablen zu und geben die Variable an die Konsole aus. Öffnen Sie Ihre Browserkonsole. Das Element sollte dort aufgeführt sein.

Da die Suche nach ID am einfachsten und am meisten ist bequeme Weise, es wird oft verwendet. Wenn in einem Skript mit einem Element gearbeitet werden muss, wird das id-Attribut im Seitencode auf dieses Element gesetzt, auch wenn es zuvor nicht festgelegt wurde. Und sie finden das Element anhand der ID.

Mit der Methode getElementsByClassName() können Sie alle Elemente finden, die zu einer bestimmten Klasse gehören.

document.getElementsByClassName(Klasse)

Optionen:

Klasse – Klasse der zu findenden Elemente

Die Methode gibt ein Pseudo-Array zurück, das die gefundenen Elemente enthält. Es wird Pseudo-Array genannt, weil viele Array-Methoden dafür nicht funktionieren. Die Haupteigenschaft bleibt jedoch bestehen: Sie können auf jedes Element des Arrays zugreifen. Auch wenn nur ein Element gefunden wird, befindet es sich immer noch im Array.

Fügen wir der Seite Elemente hinzu und geben ihnen eine Klasse. Wir werden einige der Elemente innerhalb des Blocks platzieren, den wir zuvor erstellt haben. Den anderen Teil erstellen wir außerhalb des Blocks. Die Bedeutung davon wird etwas später klar werden. Jetzt sieht die Seite so aus:

HTML Quelltext:

JavaScript:

Jetzt werden nur noch die Elemente gefunden, die sich im Block befinden.

Die Methode getElementsByTagName() findet alle Elemente mit einem bestimmten Tag. Außerdem wird ein Pseudo-Array mit den gefundenen Elementen zurückgegeben.

document.getElementsByTagName(tag)

Optionen:

Etikett - Element-Tag die es zu finden gilt

Suchen wir alle p-Tags auf der Seite:

Diese Methode kann auch nicht auf das gesamte Dokument, sondern auf ein bestimmtes Element angewendet werden. Finden Sie alle p-Tags im Block.

Es gibt die Methoden querySelector() und querySelectorAll(), die Elemente finden, die einem bestimmten Selektor entsprechen. Das heißt, es werden Elemente gefunden, auf die der Stil angewendet würde, wenn er in einem solchen Selektor angegeben würde. Gleichzeitig ist das Vorhandensein eines solchen Selektors im Seitenstil überhaupt nicht erforderlich. Diese Methoden haben nichts mit CSS zu tun. Die Methode querySelectorAll() findet alle Elemente, die dem Selektor entsprechen. Und die Methode querySelector() findet ein Element, das das erste im Seitencode ist. Diese Methoden können alle zuvor besprochenen Methoden zur Suche nach Elementen ersetzen, da es einen Selektor nach ID, einen Selektor nach Tag und viele andere gibt.

document.querySelector(Selektor)

document.querySelectorAll(Selektor)

Selektoren werden genauso geschrieben wie in CSS, vergessen Sie jedoch nicht, Anführungszeichen zu setzen.

Fügen wir der Seite eine Liste hinzu und suchen sie mithilfe des Selektors. Wir suchen nur nach einem Element und wissen mit Sicherheit, dass es das erste sein wird, da es nur eines auf der Seite gibt. Daher ist es in diesem Fall bequemer, die Methode querySelector() zu verwenden. Wenn Sie diese Methode verwenden, müssen Sie jedoch berücksichtigen, dass in Zukunft dieselben Elemente zur Seite hinzugefügt werden können. Dies gilt jedoch für die meisten Methoden.

HTML Quelltext:

Diese Methoden können auch nicht im gesamten Dokument, sondern innerhalb eines bestimmten Elements nach Elementen suchen.

Im Beispiel haben wir nur Tag-Selektoren verwendet. Versuchen Sie, Seitenelemente mit anderen Selektoren zu finden.

Sie können Nachbarn für das gefundene Element finden. Jedes Element ist ein Objekt und angrenzende Elemente kann über die Eigenschaften dieses Objekts erhalten werden. Die Eigenschaft previousElementSibling enthält das vorherige Element und die Eigenschaft nextElementSibling enthält das nächste Element.

element. previousElementSibling

element.nextElementSibling

Suchen wir das Element nach dem Block:

Die Kindereigenschaft enthält ein Array von Kindern.

element.children

Suchen wir die untergeordneten Elemente des Blocks.

Der DOM-Standard bietet mehrere Möglichkeiten, ein Element zu finden. Diese Methoden sind getElementById, getElementsByTagName und getElementsByName.

JavaScript-Bibliotheken bieten leistungsfähigere Suchmethoden.

Der bequemste Weg, ein Element im DOM zu finden, besteht darin, es anhand der ID abzurufen. Verwenden Sie dazu den Aufruf document.getElementById(id)

Der folgende Code ändert beispielsweise die Textfarbe im div „e c id="dataKeeper" in Blau:

Document.getElementById("dataKeeper").style.color = "blue"

Die nächste Möglichkeit besteht darin, alle Elemente mit einem bestimmten Tag abzurufen und unter ihnen nach dem zu suchen, das Sie benötigen. Hierzu wird Document.getElementsByTagName(tag) verwendet. Es gibt ein Array von Elementen zurück, die dieses Tag haben.

Sie können beispielsweise das zweite Element (die Nummerierung im Array beginnt bei Null) mit dem li-Tag abrufen:

Document.getElementsByTagName("LI")

Interessanterweise kann getElementsByTagName nicht nur für document aufgerufen werden, sondern allgemein für jedes Element, das ein Tag (nicht Text) hat.

In diesem Fall werden nur die Objekte gefunden, die sich unter diesem Element befinden.

Der folgende Aufruf ruft beispielsweise die Liste der LI-Elemente ab, die sich im ersten div-Tag befinden:

Document.getElementsByTagName("DIV").getElementsByTagName("LI")

Der Aufruf von elem.getElementsByTagName("*") gibt eine Liste aller untergeordneten Elemente des Knotens elem zurück in der Reihenfolge, in der sie begangen werden.

Zum Beispiel in diesem DOM:

Dieser Code:

Var div = document.getElementById("d1") var elems = div.getElementsByTagName("*") for(var i=0; i