Damit das Skript mit einem Element der Seite funktioniert, muss dieses Element zuerst gefunden werden. Es gibt verschiedene Möglichkeiten, dies in JavaScript zu tun. Das gefundene Element wird normalerweise einer Variablen zugewiesen, und später verweist srkipt über diese Variable auf das Element und führt einige Aktionen damit aus.

Suche nach ID

Wenn das ID-Attribut für ein Element im Seitencode festgelegt ist, 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)

Parameter:

id - die ID des zu findenden Elements. id ist eine Zeichenfolge, daher muss sie in Anführungszeichen gesetzt werden.

Erstellen wir eine Seite, fügen ein Element hinzu, weisen ihr eine ID zu und suchen dieses Element im Skript:

HTML Quelltext:

JavaScript:

Wir haben das gefundene Element dem Variablenblock zugewiesen und die Variable auf der Konsole gedruckt. Öffnen Sie Ihre Browserkonsole, in der ein Element aufgelistet sein sollte.

Da die Suche nach ID der einfachste und bequemste Weg ist, wird sie häufig verwendet. Wenn Sie mit einem Element im Skript arbeiten müssen, wird das ID-Attribut für dieses Element im Seitencode festgelegt, auch wenn es nicht zuvor festgelegt wurde. Und sie finden das Element anhand der ID.

Suche nach Klasse

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

document.getElementsByClassName (Klasse)

Parameter:

klasse - Die Klasse der zu findenden Elemente

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

Fügen wir der Seite Elemente hinzu und geben Sie ihnen eine Klasse. Wir werden einige der Elemente in den zuvor erstellten Block einfügen. Lassen Sie uns den anderen Teil außerhalb des Blocks erstellen. Die Bedeutung davon wird etwas später klar sein. Die Seite sieht nun folgendermaßen aus:

HTML Quelltext:

JavaScript:

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

Suche nach Tag

Die Methode getElementsByTagName () findet alle Elemente mit einem bestimmten Tag. Es gibt auch ein Pseudo-Array mit den gefundenen Elementen zurück.

document.getElementsByTagName (Tag)

Parameter:

tag - das Tag der zu findenden Elemente

Lassen Sie uns alle p-Tags finden, die sich auf der Seite befinden:

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

Suche nach Selektor

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 worden wäre, wenn er für einen solchen Selektor angegeben worden wäre. Das Vorhandensein eines solchen Selektors im Seitenstil ist jedoch überhaupt nicht erforderlich. Diese Methoden haben nichts mit CSS zu tun. Die querySelectorAll () -Methode findet alle Elemente, die mit dem Selektor übereinstimmen. Die querySelector () -Methode findet ein Element, das das erste im Seitencode ist. Diese Methoden können alle zuvor beschriebenen Methoden zum Auffinden von Elementen ersetzen, da es einen ID-Selektor, einen Tag-Selektor und viele andere gibt.

document.querySelector (Selektor)

document.querySelectorAll (Selektor)

Selektoren werden genauso geschrieben wie in CSS. Denken Sie daran, Anführungszeichen zu setzen.

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

HTML Quelltext:

Diese Methoden können auch nach Elementen suchen, die nicht im gesamten Dokument, sondern in einem konkreten Element enthalten sind.

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

Benachbarte Elemente

Für das gefundene Element finden Sie Nachbarn. Jedes Element ist ein Objekt, und benachbarte Elemente können ü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 Sie das Element nach dem Block:

Untergeordnete Elemente

Die Eigenschaft children enthält eine Reihe von untergeordneten Elementen.

element.children

Lassen Sie uns die Kinder des Blocks finden.

Dokumentobjektmodell - DOM ist nichts anderes als eine Baumstruktur, die aus Tags besteht, die in existieren Html Dokument.

Wir haben all diese Elemente Htmlbefinden sich nebeneinander, die wir empfangen möchten, und lesen dann die Daten in ihnen oder ändern sie. Es gibt viele Möglichkeiten, diese Tags zu finden, da sie in einer Baumstruktur angeordnet sind. In diesem Artikel erfahren Sie, wie Sie zwei integrierte Funktionen verwenden JavaScript, sowie querySelector und querySelectorAll zum suchen html Stichworte.

QuerySelector-Methode

Das Wesentliche der Funktionsweise der Methoden verstehen querySelector und querySelectorAll Schauen Sie sich den folgenden HTML-Code an:

In diesem Beispiel haben wir eine div mit id main und vier verschachtelte Elemente div und img, von denen jeder einen Klassenwert hat bildbehälter und profilbild beziehungsweise. In den nächsten Abschnitten werden wir die Funktionen anwenden querySelector und querySelectorAll Darauf HTML Quelltext und sehen, was passiert.

querySelector

Funktion querySelector funktioniert so:

Var element \u003d document.querySelector ("< CSS selector >");

QuerySelector-Funktion nimmt ein Argument und dieses Argument ist CSS-Auswahl für das Element, das Sie finden möchten. Was zurückkommt querySelector-Funktionist das erste Element, das gefunden wird, auch wenn es andere Elemente gibt, die diesem Selektor ähnlich sein können.

Anschauen Html aus unserem vorherigen Beispiel, wenn wir zugreifen möchten divwessen ID ist mainmüssen Sie Folgendes schreiben:

Var element \u003d document.querySelector ("# main");

Soweit main ist ein Bezeichner, die Selektorsyntax, um ihn zu erhalten, wäre #Main ... Ebenso die Klassenauswahl bildbehälter :

Var element \u003d document.querySelector (". Pic-container");

Der erste Block wird zurückgegeben div dessen Klassenwert ist bildbehälter ... Verbleibende Elemente div mit Klassenwert bildbehälter werden einfach ignoriert.

Die Selektorsyntax für diese Funktion wurde nicht speziell erstellt, sodass Sie die genaue Syntax verwenden können, die Sie für Selektoren in einem Stylesheet verwenden würden!

Das ist alles, und im nächsten Artikel werde ich Ihnen die folgende Funktion erläutern querySelectorAll.

JavaScript verfügt wie CSS über Funktionen, mit denen Sie auf HTML-Elemente verweisen können, um den Seiteninhalt zu transformieren. In CSS wird dies durch Schreiben von Selektoren erreicht. Es gibt verschiedene Möglichkeiten, diese Funktionalität in JavaScript zu organisieren. Hier ist eine davon:

Var primaryHeadings \u003d document.getElementsByTagName ("h1");

Dieser Code extrahiert alle h1-Header und fügt sie grob gesagt in die Variable primaryHeadings ein. Wenn die Seite mehrere Überschriften enthält, werden alle in einem Array platziert.

Var ou812 \u003d document.getElementById ("eddie");

Dieser Code wählt das Element mit id \u003d "eddie" aus.

Var guitars \u003d document.getElementsByClassName ("Achsen");

Wir können Elemente auch anhand ihrer Klassennamen auswählen.

Fügen Sie etwas Sizzle hinzu

Verschiedene JavaScript-Frameworks bieten ihre eigenen Funktionen zum Erstellen von Selektoren. Eines der erfolgreichsten war Sizzle, das sich später in jQuery verwandelte. Im Gegensatz zu seinem Nachkommen konnte Sizzle nur mit dem DOM arbeiten und es manipulieren. Wenn Sie nicht alle Funktionen von jQuery benötigen, können Sie Sizzle noch heute als eigenständige Bibliothek herunterladen.

Mit der Entwicklung dieser Bibliotheken wurde das Schreiben von Selektoren erheblich reduziert und transformiert:

$ ("# dave"). css ()

Dieser Code extrahiert das HTML-Element mit id \u003d "dave" und ermöglicht es Ihnen, mit seinen CSS-Stilen zu arbeiten.

Sizzle ist nicht die einzige JavaScript-Bibliothek zum Bearbeiten von HTML-Code. Es gibt auch andere Optionen, wie Rangy. Meiner Meinung nach ist jedoch alles oben Genannte veraltet, bevor das, was Sie in diesem Artikel weiter erwartet.

Die nächste Stufe von JavaScript

Viele Entwickler haben jQuery so oft verwendet, dass sie die dramatischen Änderungen in JavaScript selbst nicht einmal bemerkt haben.

Die JavaScript Selector API ist der offizielle Teil der HTML5-Spezifikation und kann zum Schreiben von XHTML-Seiten verwendet werden. Die neue Syntax ist sehr einfach:

Document.querySelector ("# eddie")

Dieser Code entspricht absolut document.getElementById ("eddie"). Nicht beeindruckend? Was ist damit:

Document.querySelector ("# eddie h1 + p")

Mit der neuen Funktionalität können Sie das DOM mithilfe komplexer CSS-Ausdrücke bearbeiten.

Die querySelector-Methode ruft nur das erste gefundene Element ab. Um alle abzurufen, müssen Sie querySelectorAll verwenden:

Var hiFrets \u003d document.querySelectorAll ("table # frets tr: n-tes Kind (3)")

Dieser Code ruft jede dritte Zeile mit id \u003d "frets" aus der Tabelle ab.

Einige sehr wichtige Punkte

Bei der Verwendung der querySelector / All-Methode sollten Sie einige Einschränkungen beachten:

Nicht alle Browser unterstützen die neue Funktionalität. Wenn es für Sie wichtig ist, dass der Code unter IE6-7 funktioniert, ist es besser, Bibliotheken zu verwenden, die das DOM manipulieren können: Sizzle oder jQuery.

Selektoren müssen sehr sorgfältig zusammengestellt werden, da sie sonst von Browsern nicht verstanden werden und die oben genannten Methoden null zurückgeben. Seien Sie im Allgemeinen sehr vorsichtig, insbesondere wenn Sie CSS3-Selektoren verwenden.

Im Gegensatz zu getElementsByTagName gibt die querySelectorAll-Methode eine statische Liste der abgerufenen Elemente zurück, die sich zu einem bestimmten Zeitpunkt auf der Seite befinden. Dies bedeutet, dass Sie die querySelectorAll-Methode wiederverwenden müssen, wenn Sie dynamische Änderungen am Code vornehmen (Hinzufügen oder Entfernen von Elementen über JavaScript).

Probieren Sie neue Funktionen aus, um das Laden verschiedener Arten von Bibliotheken zu vermeiden.

In dieser Lektion werden die Methoden des Dokumentobjekts beschrieben, mit denen ein Knoten oder eine Sammlung von Knoten in einem Dokument gefunden werden kann. Und auch Methoden des Knotenobjekts (Knotens), die ähnliche Aktionen ausführen, jedoch bereits unter ihren untergeordneten Knoten.

Methoden zum Suchen eines Knotens oder einer Sammlung von Knoten in einem Baum

In der vorherigen Lektion haben wir die Eigenschaften untersucht, mit denen wir im Baum navigieren und die benötigten Knoten finden können. Das Auffinden von Knoten anhand ihrer Eigenschaften ist jedoch sehr schwierig und ineffektiv. Um Knoten in einem Baum zu finden, verwenden Webentwickler normalerweise dedizierte Methoden für das Dokumentobjekt oder den Knoten.

GetElementById () -Methode

Die Methode getElementById (elementID) gibt das Element im Dokument mit dem angegebenen Bezeichner (id \u003d "elementID") als Knotenobjekt zurück. Wenn das Element mit dem angegebenen Bezeichner nicht vorhanden ist, gibt diese Methode null zurück.

Gemäß dem Standard können nicht mehrere Elemente in einem Dokument mit demselben ID-Attributwert enthalten sein, d. H. Der Bezeichnerwert muss innerhalb desselben Dokuments eindeutig sein. Wenn Ihr Dokument jedoch mehrere Elemente mit der angegebenen ID enthält, gibt die Methode getElementById () das erste gefundene Element zurück.

document.getElementById (elementID)

Diese Methode verfügt über einen erforderlichen Parameter (elementID), bei dem es sich um eine Zeichenfolge handelt, die den Wert des ID-Attributs des Elements enthält, das Sie abrufen möchten.

Ändern Sie beispielsweise die Farbe des Textes eines Elements mit id \u003d "nameArticie".

Artikelüberschrift

• 1 Punkt
• 2 Punkt
• 3 Punkt

GetElementsByClassName () -Methode

Die Methode getElementsByClassName (className) gibt alle gefundenen Elemente im Dokument (für Dokument) oder unter untergeordneten Knoten (für Knoten) zurück, die den angegebenen Klassennamen (class \u003d "className") als NodeList-Objekt (Sammlung von Knoten) haben. Mit anderen Worten, diese Methode gibt ein NodeList-Objekt zurück, bei dem es sich um eine Sammlung von Elementen (Knoten) handelt, deren Klassenname im Parameter dieser Methode angegeben ist.

Um die Anzahl der gefundenen Knoten zu ermitteln, müssen Sie die Eigenschaft length des NodeList-Objekts verwenden. Um alle Knoten in der Sammlung zu durchlaufen, können Sie die folgende Schleife verwenden:

Var elementsList \u003d document.getElementsByClassName ("list"); für (var i \u003d 0; i

document.getElementByClassName (className);
Knoten (Knoten) .getElementByClassName (Klassenname);

Diese Methode verfügt über einen erforderlichen Parameter (className), bei dem es sich um eine Zeichenfolge handelt, die den Namen der Klasse von Elementen enthält, die Sie empfangen möchten. Wenn Sie Elemente mit mehreren angegebenen Klassen abrufen möchten, müssen diese im Parameter dieser Methode durch ein Leerzeichen getrennt werden. Holen Sie sich beispielsweise eine Sammlung von Knoten mit den Klassen classl und class2:

Document.getElementsByClassName ("classl class2");

Ändern Sie beispielsweise die Hintergrundfarbe von Elementen mit einer Listenklasse:

Artikelüberschrift

• 1 Punkt
• 2 Punkt
• 3 Punkt

• 1 Punkt
• 2 Punkt

Rufen Sie beispielsweise eine Sammlung von Elementen (Knoten) ab, die die Listenklasse haben. Als nächstes erhalten Sie 2 Knoten in dieser Sammlung, d. H. Knoten mit Index 1. Ändern Sie dann die Hintergrundfarbe des resultierenden Knotens.

// Eine Sammlung von Elementen mit der Listenklasse abrufen var elementsList \u003d document.getElementsByClassName ("list"); // Den 2. Knoten in der Sammlung abrufen var secondList \u003d elementsList; // Ändere die Hintergrundfarbe des Elements secondList.style.backgroundColor \u003d "red";

GetElementsByTagName () -Methode

Die Methode getElementsByTagName (Tagname) gibt alle gefundenen Elemente im Dokument (für Dokument) oder unter untergeordneten Knoten (für Knoten) zurück, die das angegebene Tag als NodeList-Objekt haben (Sammlung von Knoten). Das Abrufen eines bestimmten Knotens in einer Sammlung erfolgt über den Index. Die Zählung der Elemente (Knoten) in der Sammlung beginnt bei 0.

document.getElementsByTagName (tagname);
Knoten (Knoten) .getElementsByTagName (Tagname);

Diese Methode verfügt über einen erforderlichen Parameter (Tagname), bei dem es sich um eine Zeichenfolge handelt, die den Tagnamen in Großbuchstaben enthält. Wenn Sie eine Zeichenfolge angeben, die ein Sternchen ("*") als Parameter enthält, erhalten wir alle Elemente im Dokument (für das Dokumentobjekt) oder alle untergeordneten Elemente des Knotens (für das Knotenobjekt).

Verwenden Sie die Eigenschaft length des NodeList-Objekts, um die Anzahl der gefundenen Knoten in der Auflistung abzurufen. Um alle Knoten in der Sammlung zu durchlaufen, können Sie die folgende Schleife verwenden:

Var elementsList \u003d document.getElementsByTagName ("LI"); für (var i \u003d 0; i

Ändern Sie beispielsweise die Hintergrundfarbe von LI-Elementen:

Artikelüberschrift

• 1 Punkt
• 2 Punkt
• 3 Punkt

Holen Sie sich beispielsweise eine Sammlung von UL-Elementen. Dann erhalten Sie 1 Knoten in dieser Sammlung, d. H. Knoten mit Index 0. Rufen Sie dann die Sammlung der untergeordneten LI-Knoten für diesen Knoten ab. Ändern Sie abschließend die Schriftgröße für jedes Element in dieser Sammlung.

// Sammlung der UL-Elemente abrufen var elementsUL \u003d document.getElementsByTagName ("UL"); // 1 Knoten in dieser Sammlung abrufen var elementUL \u003d elementsUL; // Hole die Sammlung von LI Children des elementUL-Knotens var elementsLI \u003d elementUL.getElementsByTagName ("LI"); // iteriere über alle Elemente in der Sammlung für (var i \u003d 0; i

GetElementsByName () -Methode

Die Methode getElementsByName (name) gibt alle gefundenen Elemente im Dokument zurück, die den angegebenen Namen (Wert des Namensattributs) als NodeList-Objekt (Sammlung von Knoten) haben.

Elemente (Knoten) werden der Sammlung in der Reihenfolge hinzugefügt, in der sie im Baum angezeigt werden. Das Abrufen eines bestimmten Knotens in einer Sammlung erfolgt über den Index. Die Zählung der Elemente (Knoten) in der Sammlung beginnt bei 0.

Var elementsList \u003d document.getElementsByName ("phone"); für (var i \u003d 0; i

Hinweis: HTML5 hat das Attribut name veraltet und es für die meisten Elemente durch das Attribut id ersetzt.

document.getElementsByName (Name)

Diese Methode verfügt über einen erforderlichen Parameter (Name), bei dem es sich um eine Zeichenfolge handelt, die den Wert des Attributs name enthält.

Ändern Sie beispielsweise die Hintergrundfarbe von Elementen mit einem Namensattribut mit dem Wert phone (name \u003d "phone"):

Telefon: Ein anderes Telefon:

QuerySelector () -Methode

Die querySelector () -Methode gibt das erste gefundene Element im Dokument (für Dokument) oder unter untergeordneten Knoten (für Knoten) zurück, das dem als Parameter für diese Methode angegebenen CSS-Selektor entspricht. Wenn kein Element mit dem CSS-Selektor übereinstimmt, gibt diese Methode null zurück.

document.querySelector (cssSelector)
node.querySelector (cssSelector)

Diese Methode verfügt über einen erforderlichen Parameter (cssSelector), bei dem es sich um eine Zeichenfolge handelt, die einen CSS-Selektor enthält, nach dem das Element ausgewählt wird.

Ändern Sie beispielsweise die Textfarbe des ersten gefundenen Elements, das dem Selektor #main p entspricht:

Rufen Sie beispielsweise eine Sammlung von DIV-Elementen in einem Dokument ab. Dann erhalten Sie 1 Knoten in dieser Sammlung, d. H. Knoten mit Index 0. Suchen Sie für diesen Knoten unter seinen untergeordneten Knoten das erste Element, das dem CSS-Selektor h1 + p entspricht. Ändern Sie dann die Schriftgröße dieses Elements.

// Eine Sammlung von DIV-Elementen abrufen var elementsDIV \u003d document.getElementsByTagName ("DIV"); // 1 Knoten in dieser Sammlung abrufen var elementDIV \u003d elementsDIV; // Den p-Knoten unmittelbar nach dem h1-Knoten abrufen // Nach dem Knoten unter den untergeordneten Knoten des Knotens suchen, der in der elementDIV-Variablen var elementP \u003d elementDIV.querySelector ("h1 + p") gespeichert ist; // Ändere die Schriftgröße des Elements elementP.style.fontSize \u003d "30px";

QuerySelectorAll () -Methode

Die querySelectorAll () -Methode gibt alle gefundenen Elemente im Dokument (für Dokument) oder unter untergeordneten Knoten (für Knoten) zurück, die dem als Parameter für diese Methode angegebenen CSS-Selektor als NodeList-Objekt (Sammlung von Knoten) entsprechen. Die Knoten in der Sammlung werden durch den Index referenziert. Die Zählung der Elemente (Knoten) in der Sammlung beginnt bei 0.

Verwenden Sie die Eigenschaft length des NodeList-Objekts, um die Anzahl der gefundenen Knoten abzurufen. Um alle Knoten in der Sammlung zu durchlaufen, können Sie die folgende Schleife verwenden:

Var elementsList \u003d document.querySelectorAll ("# main p"); für (var i \u003d 0; i

document.querySelectorAll (cssSelector);
Knoten (Knoten) .querySelectorAll (cssSelector);

Diese Methode verfügt über einen erforderlichen Parameter (cssSelector), bei dem es sich um eine Zeichenfolge handelt, die einen CSS-Selektor enthält, nach dem Elemente ausgewählt werden. Um mehrere Selektoren in einem Parameter dieser Methode anzugeben, müssen diese durch Kommas getrennt werden.

Ändern Sie beispielsweise die Textfarbe von Elementen, die dem Selektor #main p entsprechen:

Holen Sie sich beispielsweise einen untergeordneten Knoten mit dem ID-Attribut sidebar. Ändern Sie die Hintergrundfarbe der p untergeordneten Elemente des im vorherigen Schritt erhaltenen Knotens:

// Hole das Element (Knoten) mit id \u003d "sidebar" var sidebar \u003d document.getElementById ("sidebar"); // die Sammlung von Knoten abrufen, die mit dem Selektor "p" übereinstimmen var elementsListP \u003d sidebar.querySelectorAll ("p"); // iteriere über alle Elemente in der Sammlung für (var i \u003d 0; i

Die Aufgabe

Schreiben Sie JavaScript-Code mit den Methoden getElementById (), getElementsByClassName (), getElementsByTagName (), querySelector () und querySelectorAll () für die folgenden Aufgaben:

1. Holen Sie sich alle p-Elemente im Hauptblock;
2. Holen Sie sich den Seitenblock im Container div;
3. Holen Sie sich den Fußzeilenblock in den Körperbehälter.

Führen Sie jede Aufgabe auf so viele verschiedene Arten wie möglich aus.

Die Aufgabe, mit der Anfänger von Javascript-Entwicklern 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.

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.

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 Struktur 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.

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 erläutert, 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.