Erster Paragraph
Zweiter Absatz
JavaScript - DOM: Methoden zum Auffinden von Knoten. Javascript- und Jquery-Selektoren. Auswählen eines Elements anhand der ID Eigenschaften und Attribute des Dokumentobjekts in JavaScript
Der DOM-Standard bietet verschiedene Möglichkeiten, ein Element zu finden. Dies sind getElementById, getElementsByTagName und getElementsByName.
Javascript-Bibliotheken bieten leistungsfähigere Suchmethoden.
Suche nach ID
Der bequemste Weg, ein Element im DOM zu finden, besteht darin, es anhand der ID abzurufen. Rufen Sie dazu document.getElementById (id) auf.
Der folgende Code ändert beispielsweise die Textfarbe im div "e c id \u003d" dataKeeper "in blau:
Document.getElementById ("dataKeeper"). Style.color \u003d "blau"
Suche nach Tag
Der nächste Weg besteht darin, alle Elemente mit einem bestimmten Tag abzurufen und das gewünschte unter ihnen zu suchen. Dafür ist document.getElementsByTagName (Tag) gedacht. Es gibt ein Array von Elementen zurück, die dieses Tag haben.
Zum Beispiel können Sie das zweite Element (die Nummerierung im Array beginnt bei Null) mit dem li-Tag erhalten:
Document.getElementsByTagName ("LI")
Interessanterweise kann getElementsByTagName nicht nur für Dokumente aufgerufen werden, sondern im Allgemeinen für jedes Element, das ein Tag (keinen Text) hat.
Dadurch werden nur Objekte gefunden, die sich unter diesem Element befinden.
Der folgende Aufruf ruft beispielsweise eine Liste der LI-Elemente ab, die sich im ersten div-Tag befinden:
Document.getElementsByTagName ("DIV"). GetElementsByTagName ("LI")
Holen Sie sich alle Nachkommen
Wenn Sie elem.getElementsByTagName ("*") aufrufen, wird eine Liste aller untergeordneten Elemente des elem-Knotens zurückgegeben sie umgehen.
Zum Beispiel auf einem DOM wie diesem:
Code wie folgt:
Var div \u003d document.getElementById ("d1") var elems \u003d div.getElementsByTagName ("*") für (var i \u003d 0; i Druckt die Sequenz: ol1, li1, li2. Die Methode document.getElementsByName (name) gibt alle Elemente zurück, deren Name (Namensattribut) dem angegebenen entspricht. Es funktioniert nur mit den Elementen, für die die Spezifikation explizit ein Namensattribut bereitstellt: Form, Eingabe, a, Auswahl, Textbereich und eine Reihe anderer, seltener. Die document.getElementsByName-Methode funktioniert nicht mit anderen Elementen wie divs, p usw. Es gibt andere Möglichkeiten, das DOM zu durchsuchen: XPath, cssQuery usw. In der Regel werden sie von Javascript-Bibliotheken implementiert, um die Standardbrowserfunktionen zu erweitern. Es gibt auch eine getElementsByClassName-Methode zum Suchen von Elementen nach Klassen, die jedoch im IE überhaupt nicht funktioniert, sodass sie von niemandem in ihrer reinen Form verwendet wird. Ein häufiger Tippfehler ist mit einem fehlenden Buchstaben verbunden s im Methodennamen getElementById, während in anderen Methoden dieser Buchstabe lautet: getElement sNamentlich. Die Regel ist einfach: ein Element - Element, viele - Element s ... Alle * Element-Methoden s* Gibt eine Liste der Knoten zurück. Die letzte Lektion befasste sich mit der Methode getElementsByTagName, die ein Array zurückgibt ( gruppe) Seitenelemente nach Tag-Namen. Hier ist eine etwas praktischere Arbeit mit Javascript und der getElementById-Methode, die gibt einen Verweis auf das Element zurückund konzentriert sich auf seine einzigartige ID. Die Methode getElementById ist wie getElementsByTagName eine Methode des Dokumentobjekts. Der Methodenname übersetzt wörtlich: element durch ID abrufen. Beliebiges Element ( tegu) des Webdokuments kann dank dessen eine eigene ID-ID zugewiesen werden das Element wird einzigartig und Sie können darauf zugreifen, um damit zu arbeiten. Passt aufe: Der Methodenname enthält kein s am Ende des Wortes Element ( im Gegensatz zur Methode getElementsByTagName). Dies dient der Vereinfachung und zeigt an, dass die Methode zum Auswählen eines Elements verwendet wird.
Ein bisschen Klarstellung für das obige Code-Snippet ... Nach dem Zugriff auf das Element ( tegu) Webseite nach ID-ID mit der Methode getElementById arbeiten wir bereits als Objekt damit, dh wir erhalten Zugriff auf die Attribute des Tags sowie auf die Eigenschaften des Objekts. Daher sind die Attributwerte bereits Eigenschaftswerte. Arbeiten wir weiter mit dem vorherigen Beispiel ...
Erläuterungen zum Beispielcode ... Ich hoffe, Sie sind in all dem nicht verwirrt. Sie müssen gleichzeitig verstehen, was auf der programmatischen Ebene von Javascript und auf der Ebene des Dokumentmarkups geschieht. Das img-Tag ist ein eindeutiges Objekt. Die Attribute width und alt des Tags sind Eigenschaften des Objekts. Attributwerte "128" und "Nachdenklicher Pinguin" - Dies sind Eigenschaftswerte. // So sieht es aus einer Javascript-Perspektive aus: var unique \u003d ( breite: "128", alt: "Nachdenklicher Pinguin" }
So funktioniert die Methode getElementById, die einen Verweis auf ein beliebiges Element zurückgibt ( etikett) einer Webseite, wenn sie eine eindeutige ID hat. Als nächstes arbeiten wir mit diesem Element auf Javascript-Ebene. schon wie bei einem Objekt... Es sollte angemerkt werden, dass: wie in der vorherigen Lektion hier - Wenn Sie mit der Methode getElementById arbeiten, sollte die Skriptaufrufzeile am Ende des HTML-Dokuments stehen JQuery bietet weitere Optionen zum Auswählen von Elementen in einem Webdokument. Neben der Tatsache, dass Sie auf Webseiten Elemente anhand ihrer ID auswählen können, können wir Elemente auch anhand des Klassenattributs auswählen. Die Aufgabe ist auch sehr häufig. Wenn ich meine Skripte schreibe, benutze ich diesen Selektor häufig. Nehmen wir an, wir haben den folgenden Code auf einer Seite. Die Aufgabe ist einfach: Sie müssen ein Element mit der Klasse \u003d "elem" auswählen und einige Aktionen mit Javascript ausführen. Schauen wir uns einige Optionen dazu an. Option 1. Verwenden Sie die Javascript-Methode getElementsByClassName. Wenn Sie keine zusätzlichen Bibliotheken verwenden, können Sie mit der Methode getElementsByClassName ("class_name") auf das Element verweisen. Wenn Sie sich beispielsweise auf den Quellcode beziehen, können Sie die folgenden Codezeilen hinzufügen. Suche nach Namen: getElementsByName
andere Methoden
"Nachdenklicher Pinguin">
Inhalt blockieren.
Inhalt blockieren.
Wenn alles korrekt funktioniert, wird ein Popup-Fenster angezeigt, in dem der Text im div-Block angezeigt wird.
Beachten Sie, dass das Ergebnis der Ausführung der Methode getElementsByClassName ein Array von Elementen ist. Auf der Seite können sich mehrere Elemente mit derselben Klasse befinden.
Aus diesem Grund müssen Sie am Ende des Konstrukts document.getElementsByClassName ("elem") angeben, dass das Nullelement des Arrays () angezeigt wird. Die Javascript-Zählung beginnt bei Null und nicht bei Eins.
Das Problem bei der Verwendung der Methode getElementsByClassName besteht jedoch darin, dass diese Methode in älteren Browserversionen nicht unterstützt wird.
Es gibt einige Tricks, um dies zu umgehen, aber dies ist zusätzlicher Code. Sie können beispielsweise reguläre Ausdrücke verwenden:
If (document.getElementsByClassName \u003d\u003d undefined) (document.getElementsByClassName \u003d function (cl) (var retnode \u003d; var myclass \u003d new RegExp ("\\\\ b" + cl + "\\\\ b"); var elem \u003d this.getElementsByTagName ( "*"); für (var i \u003d 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 beheben. Aber um ehrlich zu sein, ist es für mich nicht sehr akzeptabel, die Seite mit unnötigem Code zu verstopfen. Daher verwende ich meistens die zweite Lösung für das Problem.
Option 2. Verwenden der Jquery-Bibliothek.
Die Verwendung der Jquery-Bibliothek erleichtert die Lösung des Problems der Auswahl von Elementen anhand ihres Klassenattributs erheblich. Sie müssen die Konstruktion verwenden:
Hier ist elem der Klassenname, der dem Element zugewiesen ist.
Denken Sie daran, dass die Jquery-Bibliothek zuerst enthalten sein muss, damit dies funktioniert. Es wird im Abschnitt hinzugefügt
Eine Möglichkeit, dies zu tun, besteht darin, die folgende Codezeile hinzuzufügen:Es muss eine Internetverbindung vorhanden sein, damit die Bibliothek geladen werden kann.
Mal sehen, wie das mit einem Beispiel funktioniert.
Inhalt blockieren.
Das Skript selbst muss sich wie im vorherigen Beispiel unter dem Code des Elements befinden, mit dem Sie interagieren möchten.
Daher gibt es zwei Möglichkeiten, mit Elementen zu interagieren, für die das Klassenattribut festgelegt ist. Wählen Sie diejenige aus, die am besten zu Ihnen passt, und verwenden Sie sie in der Praxis.
Die Aufgabe, mit der unerfahrene Javascript-Entwickler sehr häufig konfrontiert sind, ist die Auswahl eines Elements auf einer Webseite anhand seines ID-Attributs.
Nehmen wir an, wir haben Code auf der Seite.
Inhalt blockieren.
Wie können Sie ein Element mit id \u003d "elem" auswählen und damit eine Reihe von Aktionen ausführen?
Es gibt verschiedene Möglichkeiten, um das Problem zu lösen. Schauen wir sie uns jetzt an.
Option 1. Verwenden Sie die Javascript-Methode getElementById.
Es gibt eine Möglichkeit, wie Sie mit "reinem" Javascript-Code auf ein Element anhand seiner ID verweisen können, ohne Bibliotheken von Drittanbietern zu verwenden. Auf diese Weise wird die Methode ggetElementById ("element_id") verwendet. Daher verweisen wir auf das Element, das wir benötigen, anhand seiner ID.
Lassen Sie uns anhand eines einfachen Beispiels sehen, wie dies funktioniert.
Inhalt blockieren.
Beachten Sie, dass sich diese Codezeilen (Skript) unter dem Element selbst befinden. Dies ist eine Voraussetzung für den Betrieb dieses Skripts, weil Javascript-Code wird beim Laden der Seite ausgeführt. Wenn wir den obigen Code einfügen, verweisen wir auf ein Element auf der Seite, das noch nicht geladen wurde, d. H. Es befindet sich zum Zeitpunkt der Skriptausführung noch nicht im Code. Es gibt Möglichkeiten, dies zu vermeiden, aber das würde den Rahmen dieses Artikels sprengen.
Wenn alles richtig funktioniert, wird ein Popup-Fenster angezeigt. In diesem Fenster wird der Text angezeigt, der sich im div-Block befindet.
Lassen Sie uns nun sehen, wie Sie dieses Problem auf andere Weise lösen können.
Option 2. Verwenden der Jquery-Bibliothek.
Die zweite Option zum Auswählen eines Elements anhand seiner ID ist die Verwendung der Jquery-Bibliothek. In der Praxis wird diese Methode in modernen Skripten am häufigsten verwendet. Es ist viel bequemer und leichter zu merken.
Um auf ein Element anhand seiner ID zu verweisen, müssen Sie die folgende Konstruktion verwenden:
$ ("# elem")
Hier ist elem der Name, der im id-Attribut enthalten ist.
weil Wir werden eine Javascript-Bibliothek eines Drittanbieters namens Jquery verwenden, dann muss diese Bibliothek zuerst verbunden werden.
Es wird im Abschnitt hinzugefügt
Eine Möglichkeit, dies zu tun, besteht darin, die folgende Codezeile hinzuzufügen:
Es muss eine Internetverbindung vorhanden sein, damit die Bibliothek geladen werden kann.
Inhalt blockieren.
Das Skript selbst muss sich wie im vorherigen Beispiel unter dem Code des Elements befinden, mit dem Sie interagieren möchten.
Daher haben wir zwei Möglichkeiten analysiert, wie Sie ein Element auf einer Webseite anhand seines ID-Attributs auswählen und mit ihm interagieren können. Wählen Sie die Methode, die zu Ihnen passt, und wenden Sie sie in der Praxis an.
Letzte Aktualisierung: 1.11.2015
Um mit der DOM-Struktur in JavaScript zu arbeiten, wird das Dokumentobjekt definiert, das im globalen Fensterobjekt definiert ist. Das Dokumentobjekt bietet eine Reihe von Eigenschaften und Methoden zum Bearbeiten von Seitenelementen.
Gegenstände finden
Die folgenden Methoden werden verwendet, um Elemente auf einer Seite zu finden:
getElementById (Wert): Wählt ein Element aus, dessen ID-Attribut Wert ist
getElementsByTagName (Wert): Wählt alle Elemente mit einem Tag gleich Wert aus
getElementsByClassName (Wert): Wählt alle Elemente mit Klassenwert aus
querySelector (Wert): Wählt das erste Element aus, das dem Wert CSS-Selektor entspricht
querySelectorAll (Wert): Wählt alle Elemente aus, die dem Wert CSS-Selektor entsprechen
Suchen wir zum Beispiel ein Element anhand der ID:
Blockheader
Rufen Sie document.getElementById ("header") auf, um das Element mit id \u003d "header" zu finden. Mit der Eigenschaft innerText können Sie den Text des gefundenen Elements abrufen.
Suchen Sie nach einem bestimmten Tag:
Titel
Erster Paragraph
Zweiter Absatz
Rufen Sie document.getElementsByTagName ("p") auf, um alle Absatzelemente zu finden. Dieser Aufruf gibt ein Array gefundener Elemente zurück. Um die einzelnen Elemente des Arrays zu erhalten, müssen Sie sie daher in einer Schleife durchlaufen.
Wenn wir nur das erste Element erhalten müssen, können wir zum ersten Element der gefundenen Sammlung von Objekten gehen:
Var pElement \u003d document.getElementsByTagName ("p"); document.write ("Absatztext:" + pElement.innerText);
Ein Element nach Klasse erhalten:
Artikelüberschrift
Erster Paragraph
Zweiter Absatz
Auswahl per CSS-Selektor:
Zusammenfassung des Artikels
Der Ausdruck document.querySelector (". Annotation p") findet das Element, das dem Selektor .annotation p entspricht. Wenn die Seite mehrere Elemente enthält, die mit dem Selektor übereinstimmen, wählt die Methode das erste aus. Infolgedessen zeigt der Browser Folgendes an:
Artikelzusammenfassung Erster Absatz Zweiter Absatz Auswahltext: Artikelzusammenfassung
Um alle Elemente von einem Selektor abzurufen, können Sie auf ähnliche Weise die document.querySelectorAll-Methode verwenden, die ein Array gefundener Elemente zurückgibt:
Zusammenfassung des Artikels
Erster Paragraph
Zweiter Absatz
Browserausgabe:
Artikelzusammenfassung Erster Absatz Zweiter Absatz Auswahltext 0: Erster Absatz Auswahltext 1: Zweiter Absatz