In diesem Tutorial werden die Grundlagen der Arbeit mit Ereignissen, Attributen und getElementById in JavaScript behandelt.

In den vorherigen Lektionen haben wir die Grundfunktionen der JavaScript-Sprache untersucht. Beginnend mit dieser Lektion werden wir uns mit dem befassen, wofür JavaScript selbst bestimmt ist - wir werden die Elemente ändern Html Seiten und reagieren auf Benutzeraktionen. Unsere Skripte werden unterhaltsamer und nützlicher.

Wir werden zunächst unseren Code lehren, zu reagieren auf Benutzeraktionen Seite? ˅. Zum Beispiel klickt der Benutzer irgendwo mit der Maus, und unser Antwortcode muss diesen Klick verarbeiten und einige Informationen auf dem Bildschirm anzeigen.

Benutzeraktionen, die wir über JavaScript verfolgen können, werden aufgerufen veranstaltungen... Ereignisse können wie folgt sein: schrei mit der Maus auf das Seitenelement, orientierungshilfe mit der Maus auf das Seitenelement oder umgekehrt - pflege Mauszeiger vom Element weg und so weiter. Darüber hinaus gibt es Ereignisse, die nicht von Benutzeraktionen abhängen, z. B. das Ereignis, dass eine HTML-Seite in den Browser geladen wird.

In JavaScript gibt es verschiedene Wege Arbeit mit Ereignissen. Wir werden mit dem einfachsten beginnen.

Grundlagen der Arbeit mit Ereignissen

Der einfachste Weg, die Reaktion eines Elements auf ein bestimmtes Ereignis festzulegen, besteht darin, es mithilfe eines Attributs für ein bestimmtes Tag anzugeben. Zum Beispiel ein Ereignis Mausklick stimmt mit dem Attribut überein onclick, Veranstaltung Maus schweben - Attribut onmouseoverund die Veranstaltung "Cursor verlässt Element" - Attribut onmouseout.

Der Wert des Attributs mit dem Ereignis ist JavaScript-Code... Im folgenden Beispiel durch Klicken auf die Schaltfläche Die Funktion wird ausgeführt aufmerksam:

Und jetzt auf Klick Die Funktion wird für das Element ausgeführt func:

Funktion func () (alert ("!");)

Kann gemacht werden nicht eine Funktionund ein paar:

Funktion func1 () (Warnung ("1");) Funktion func2 () (Warnung ("2");)

Bitte beachten Sie, dass wenn Sie innerhalb eines Attributs doppelte Anführungszeichen benötigen (z. B. für eine Zeichenfolge) und die äußeren Anführungszeichen des Attributs ebenfalls doppelt sind - onclick \u003d "alert ("! ")" - Ein solcher Code funktioniert nicht.

Es gibt verschiedene Möglichkeiten, damit umzugehen: Sie können die äußeren Anführungszeichen in einfache Anführungszeichen ändern onclick \u003d "alert ("! ")"Sie können inneren Anführungszeichen auch mit einem Backslash entkommen onclick \u003d "alert ("! ")" oder übertragen Sie einfach JavaScript-Code von einem Attribut auf eine Funktion und lassen Sie nur den Funktionsnamen im Attribut onclick \u003d "func ()".

Das gleiche wird passieren, wenn Sie extern Verwenden Sie einfache Anführungszeichen für das Attribut und einfache Anführungszeichen für die Zeichenfolge: onclick \u003d "alert ("! ")" - hier wird auch alles auf ähnliche Weise gelöst.

Attributtabelle für Ereignisse

Arbeiten mit getElementById

Jetzt lernen wir, wie man Elemente empfängt Html Seiten und verschiedene ausführen manipulation (Wir können zum Beispiel ihren Text und ihre Farbe und viele andere nützliche Dinge ändern).

Angenommen, wir haben auf der Seite ein Tag mit dem Attribut ich würde in der Bedeutung prüfung... Schreiben wir einen Link zu diesem Tag in eine Variable elem... Dazu müssen wir die Methode verwenden getElementByIddas bekommt das Element durch seine ich würde.

Diese Aufnahme wird stattfinden auf Klick auf die Schaltfläche setzen wir das Attribut auf onclick... Durch Klicken auf diese Schaltfläche wird die Funktion ausgelöst funcwas auf finden wird Html Seitenelement mit ich würde gleich prüfung und werde schreiben link dazu in eine Variable elem:

Jetzt in der Variablen elem Wir haben einen Link zu einem Element mit einem Attribut ich würde in der Bedeutung prüfung... Die Variable selbst elem ist ein objekt.

Dieses Objekt und das HTML-Tag der Seite sind miteinander verknüpft. Wir können alle Eigenschaften des Objekts ändern elem Gleichzeitig sehen wir die Änderungen auf der HTML-Seite, die mit dem Element auftreten, das wir erhalten haben.

Mal sehen, wie das in der Praxis passiert.

Die Grundlagen der Arbeit mit HTML-Attributen über JavaScript

Wir werden nun die Attribute der Tags lesen und ändern. Lassen Sie uns noch einmal gegeben werden eingang mit id gleich test und taste, indem Sie darauf klicken, welche Funktion gestartet werden soll func:

Innerhalb der Funktion func Wir werden unseren Input bekommen von seiner ID und schreiben Sie einen Link dazu in eine Variable elem:

Funktion func () (var elem \u003d document.getElementById ("test");)

Lassen Sie uns nun den Inhalt der Attribute unserer Eingabe anzeigen. Um beispielsweise auf das Wertattribut zuzugreifen, schreiben Sie Folgendes: elem.valueDabei ist elem die Variable, in die wir mit getElementById einen Link zu unserem Element geschrieben haben, und value ist das Attribut des Tags, an dem wir interessiert sind.

Auf diese Weise können wir den Inhalt des Attributs per Alarm ausgeben - alert (elem.value) - oder schreiben Sie es in eine Variable. Lass uns das machen:

Funktion func () (var elem \u003d document.getElementById ("test"); alert (elem.value); // druckt "!")

Wir können die Werte anderer Attribute auf die gleiche Weise lesen, zum Beispiel wie folgt: elem.id - Wir berechnen den Wert des ID-Attributs und so - elem.type - der Wert des Typattributs. Siehe Beispiel:

Funktion func () (var elem \u003d document.getElementById ("test"); alert (elem.value); // druckt "!" alert (elem.id); // druckt "test" alert (elem.type); // druckt "Text")

Sie können nicht nur Attributwerte lesen, sondern auch veränderung Sie. Um beispielsweise den Wert eines Attributs zu ändern wertmüssen Sie es nur der Konstruktion zuordnen elem.value:

Funktion func () (var elem \u003d document.getElementById ("test"); elem.value \u003d "(! LANG: www"; //присвоим новое значение атрибуту value } !}

Der HTML-Code sieht folgendermaßen aus (der Wert des Wertattributs wird zu www):

Nun, jetzt der schwierigste Teil - Sie können betreten verboten Variable elemund bauen kette von Punkten wie diesen:

Funktion func () (alert (document.getElementById ("test"). value); // zeigt "!" an)

Auf die gleiche Weise (in einer Kette) ist es möglich, und zu produzieren umschreiben von Attributen:

Funktion func () (document.getElementById ("test"). value \u003d "(! LANG: www"; }!}

In den meisten Fällen wird jedoch eine Variable eingeführt praktisch... Vergleichen Sie zwei Beispiele - jetzt habe ich eine Variable eingeführt elem und ich kann dabei beliebig viele Attribute lesen getElementById namens nur einmal:

Funktion func () (var elem \u003d document.getElementById ("test"); elem.value \u003d "(! LANG: www"; elem.type = "submit"; }!}

Jetzt führe ich keine neue Variable ein und muss deshalb aufrufen getElementById zweimal:

Funktion func () (document.getElementById ("test"). value \u003d "(! LANG: www"; document.getElementById("test").type = "submit"; }!}

Meiner Meinung nach wurde dieser Code schwieriger, obwohl es eine Zeile weniger dauert. Auch wenn ich den Wert ändern möchte ich würde Von Test bis WWW zum Beispiel muss ich es an vielen Stellen tun, was nicht sehr praktisch ist.

zum Browser. Suchen von Elementen auf der Seite, die die Methode ausführt getElementByIdist hübsch langsam Operation ( im Allgemeinen ist jede Arbeit mit Seitenelementen eine langsame Operation - Merk dir das).

In unserem Fall, wenn wir jedes Mal verwenden getElementByIdDann verarbeitet der Browser die HTML-Seite jedes Mal und sucht nach einem Element mit der angegebenen ID mehrere Zeiten (es spielt keine Rolle, dass die IDs identisch sind - der Browser führt alle Aktionen mehrmals aus), wobei nutzlose Vorgänge ausgeführt werden, die den Browser verlangsamen können.

Wenn wir die Variable verwenden elem - Auf der Seite wird keine Suche durchgeführt (das Element wurde bereits gefunden und der Link dazu liegt in der Variablen elem).

Ausnahmen: Klasse und für Attribute

Sie haben bereits gelernt, wie Sie mit Attributen über JavaScript arbeiten, und jetzt ist es an der Zeit, Ihnen dies mitzuteilen nicht so einfach - Beim Arbeiten mit Attributen gibt es eine Ausnahme. - Dies ist ein Attribut klasse.

Dieses Wort ist besondere in JavaScript und deshalb können wir nicht einfach schreiben elem.classum den Attributwert zu lesen klasse... Stattdessen solltest du schreiben elem.className.

Das folgende Beispiel zeigt den Wert eines Attributs klasse:

Funktion func () (var elem \u003d document.getElementById ("test"); alert (elem.className);)

Übrigens gibt es andere Attribute, die anders als die Eigenschaft benannt sind. Zum Beispiel das Attribut zum () stimmt die Eigenschaft mit dem Namen überein htmlFür.

Damit arbeiten

Jetzt arbeiten wir mit Ihnen an einem speziellen Objekt dies, das auf das aktuelle Element zeigt (das Element, in dem das Ereignis aufgetreten ist). Darüber hinaus zeigt es an, als ob dieses Element bereits von der Methode empfangen wurde getElementById.

Mal sehen, wie man damit arbeitet dies und was ist die Bequemlichkeit dieses Ansatzes.

Angenommen, wir haben die Aufgabe, den Inhalt seines Werts durch Klicken auf eine Eingabe anzuzeigen.

Bisher können Sie nur eine solche Entscheidung treffen:

Funktion func () (var elem \u003d document.getElementById ("test"); alert (elem.value);)

Im Prinzip ist diese Lösung gut, aber stellen wir uns jetzt vor, dass wir viele Eingaben haben und indem wir auf jede klicken, müssen wir ihren Wert anzeigen.

In diesem Fall erhalten wir ungefähr Folgendes:

Funktion func1 () (var elem \u003d document.getElementById ("test1"); alert (elem.value);) Funktion func2 () (var elem \u003d document.getElementById ("test2"); alert (elem.value);) Funktion func3 () (var elem \u003d document.getElementById ("test3"); alert (elem.value);)

Jetzt ist der Nachteil unseres Ansatzes deutlich sichtbar - für jede Eingabe müssen wir unsere eigene Klickbehandlungsfunktion erstellen, und diese Funktionen tun fast dasselbe.

Wenn wir 10 Eingänge haben, müssen wir 10 Funktionen ausführen, was nicht bequem ist.

Vereinfachen wir unsere Aufgabe: Wir übergeben die ID des aktuellen Elements als Parameter an die Funktion. Und statt einer großen Anzahl von Funktionen wird alles auf eine Funktion reduziert:

Funktion func (id) (var elem \u003d document.getElementById (id); alert (elem.value);)

Diese Lösung hat jedoch immer noch einen Nachteil: Jedes Element muss eine andere ID eingeben, was ebenfalls etwas unpraktisch ist.

Schauen wir uns also endlich die Möglichkeit an, das Problem zu lösen dies.

Machen wir es so, dass jede Eingabe beim Klicken ihren Inhalt anzeigt. Übergeben Sie dazu das Objekt als Parameter der Funktion dies, so: func (dies).

Dies wird als Parameter an die Funktion übergeben und in eine Variable überführt elem... Dieses Element verhält sich wie folgt: var elem \u003d document.getElementById (...), aber Sie müssen es nicht auf diese Weise empfangen, alles ist bereits fertig und Sie können es verwenden. Z.B, elem.value gibt den Wert unserer Eingabe an und so weiter.

Hier ist die einfachste Lösung für unser Problem:

Funktion func (elem) (alert (elem.value);)

CSS-Grundlagen

IM JavaScript arbeite mit dem CSS-Eigenschaften Dies geschieht durch Ändern des Werts des Stilattributs für das Element. Zum Beispiel zu ändern farbe Sie müssen die folgende Kette bauen - elem.style.color - und weisen Sie ihm den gewünschten Farbwert zu:

Funktion func () (var elem \u003d document.getElementById ("test"); elem.style.color \u003d "red";)

Sie können die Variable auch weglassen elemund bauen sehr lange Kette.

innerHTML
var text \u003d element.innerHTML;
element.innerHTML \u003d "";
Durch das Zuweisen einer neuen innerHTML wird der Code überschrieben, auch wenn der neue Wert an den aktuellen Wert angehängt wird (+ \u003d). Auf diese Weise hinzugefügte Skripte werden nicht ausgeführt.

outerHTML
Enthält das gesamte Element, kann nicht geändert werden. Technisch gesehen wird beim Schreiben in diese Eigenschaft ein neues Element erstellt, das das alte ersetzt. Verweise auf das alte Element in Variablen werden nicht geändert.

daten
textNode.data - Inhalt von Textknoten und Kommentaren

textinhalt
element.textContent - Der Text innerhalb des Elements ohne Tags.
Es gibt auch eine benutzerdefinierte innerText-Eigenschaft, die viel mit textContent gemeinsam hat.

Sichtbarkeit der Elemente

versteckt
element.hidden \u003d true
Das versteckte Attribut wird in IE11 nicht unterstützt.

Attribute

Die meisten Standardattribute im DOM werden zu Eigenschaften des Objekts:
element.id \u003d "id"
Für nicht standardmäßige Attribute wird keine Eigenschaft erstellt (undefiniert).

Sie können Ihre eigenen DOM-Eigenschaften erstellen:
element.myData \u003d (Name: "John", Nachname: "Smith");
und Methoden:
element.myFunc \u003d function () (alert this.nodeName);
Dies funktioniert, weil DOM-Knoten reguläre JavaScript-Objekte sind. Solche nicht standardmäßigen Eigenschaften und Methoden wirken sich nicht auf die Anzeige des Tags aus und sind nur in JavaScript sichtbar.

Zugriff auf Tag-Attribute:
element.hasAttribute (Name)
element.getAttribute (Name)
element.setAttribute (Name, Wert)
element.removeAttribute (Name)
element.attributes ist ein Pseudo-Array von Attributen.

Attribute unterscheiden nicht zwischen Groß- und Kleinschreibung (HTML) und Eigenschaften unterscheiden zwischen Groß- und Kleinschreibung (JavaScript).
Der Attributwert ist immer eine Zeichenfolge.

Attribut: a.getAttribute ("href") - zeigt genau an, was in HTML enthalten ist
Eigenschaft: a.href - kann vom Attributwert abweichen
Meistens hängt eine Eigenschaft von einem Attribut ab, nicht jedoch umgekehrt. Das Ändern der Eigenschaft wirkt sich nicht auf das Attribut aus.

Mit Klassen arbeiten

Das Klassenattribut hat zwei Eigenschaften:
className - Zeichenfolge
classList - Objekt

methoden des classList-Objekts:
element.classList.contains ("class") - Überprüfen Sie, ob das Objekt die angegebene Klasse enthält
element.classList.add ("Klasse")
element.classList.remove ("Klasse")
element.classList.toggle ("Klasse")

classList ist ein Pseudo-Array und kann durch eine for-Schleife iteriert werden.

datenattribute

Benutzerdefinierte Datenattribute sind nicht nur als Attribute verfügbar, sondern auch über die Dataset-Eigenschaft
data-about \u003d "irgendein Wert"
element.dataset.about

Reihenfolge der Knoten

parent.contains (child) - wahr oder falsch
prüft, ob der untergeordnete Knoten im übergeordneten Knoten verschachtelt ist

nodeA.compareDocumentPosition (nodeB) - Enthält Informationen zum Inhalt und zur relativen Reihenfolge der Elemente. Der Rückgabewert ist eine bitweise Maske:

Hinzufügen und Entfernen von Knoten

var div \u003d document.createElement ("div")
document.createTextNode ("text")

parent.appendChild (Element) - Das Element wird am Ende des übergeordneten Elements hinzugefügt
parent.insertBefore (Element, nextSibling) - Das Element wird vor nextSibling hinzugefügt
parent.insertBefore (Element, parent.firstChild) - am Anfang hinzugefügt
parent.insertBefore (element, null) - funktioniert wie appendChild
Alle Einfügemethoden geben den eingefügten Knoten zurück.
Wenn Sie ein Element verschieben, müssen Sie es nicht zuerst von der alten Stelle entfernen. Die Einfügemethoden tun dies automatisch.

element.insertAdjacentHTML (where, html) - fügt an einer beliebigen Stelle im Dokument beliebigen HTML-Code ein. Wo gibt an, wo HTML in Bezug auf das Element eingefügt werden soll - beforeBegin, afterBegin, beforeEnd, afterEnd.
element.insertAdjacentElement (wobei newElement)
element.insertAdjacentText (wobei Text)
Die letzten beiden Methoden werden in Firefox nicht unterstützt

node.append (... node) - fügt Knoten am Ende eines Knotens ein.
node.prepend (... node) - fügt Knoten am Anfang eines Knotens ein.
node.after (... node) - fügt Knoten nach node ein,
node.before (... node) - fügt Knoten vor dem Knoten ein,
node.replaceWith (... node) - fügt Knoten anstelle von node ein.
Hier sind Knoten Knoten oder Zeichenfolgen in beliebiger Anzahl und Kombination, die durch Kommas getrennt sind.

var fragment \u003d document.createDocumentFragment () ist eine Nachahmung eines DOM-Knotens, der beim Einfügen in ein Dokument verschwindet und nur seine untergeordneten Elemente belässt. In modernen Browsern nicht zu empfehlen.

element.cloneNode (true) - tiefe Kopie des Elements
element.cloneNode (false) - Kopie ohne Kinder

parent.removeChild (Element)
parent.replaceChild (newElement, Element)
element.remove () - Entfernt das Element direkt, ohne auf das übergeordnete Element zu verweisen.
Methoden geben den Remote-Knoten zurück

Arbeiten mit dem DOM

Jedes Window-Objekt hat eine Eigenschaft dokumentdas bezieht sich auf das Document-Objekt. Dieses Dokumentobjekt ist kein eigenständiges Objekt. Es ist das Herzstück einer umfangreichen API, die als Document Object Model (DOM) bezeichnet wird und den Zugriff auf Dokumentinhalte bestimmt.

DOM-Modellübersicht

Dokumentobjektmodell (DOM) ist eine grundlegende API, mit der Sie mit HTML- und XML-Inhalten arbeiten können. Die DOM-An(API) ist nicht besonders komplex, aber es gibt viele Architekturmerkmale, die Sie kennen sollten.

Zunächst sollten Sie verstehen, dass verschachtelte Elemente von HTML- oder XML-Dokumenten als Baum von DOM-Objekten dargestellt werden. Die Baumansicht eines HTML-Dokuments enthält Knoten, die Elemente oder Tags darstellen, z und

Und Knoten, die Textzeilen darstellen. Ein HTML-Dokument kann auch Knoten enthalten, die HTML-Kommentare darstellen. Betrachten Sie das folgende einfache HTML-Dokument:

Dies ist ein HTML-Dokument

Beispiel einfach Text.

Die DOM-Darstellung dieses Dokuments ist in der folgenden Abbildung dargestellt:

Für diejenigen, die noch nicht mit Baumstrukturen in der Computerprogrammierung vertraut sind, ist es nützlich zu wissen, dass die Terminologie für ihre Beschreibung aus Stammbäumen entlehnt wurde. Der Knoten direkt über diesem Knoten wird aufgerufen elternteil in Bezug auf diesen Knoten. Knoten befinden sich eine Ebene unter einem anderen Knoten tochtergesellschaft in Bezug auf diesen Knoten. Knoten, die sich auf derselben Ebene befinden und dasselbe übergeordnete Element haben, werden aufgerufen pflege-... Knoten, die eine beliebige Anzahl von Ebenen unter einem anderen Knoten liegen, sind dessen Nachkommen. Eltern, Großeltern und alle anderen Knoten über diesem Knoten sind seine Vorfahren.

Jedes Rechteck in diesem Diagramm ist ein Dokumentknoten, der durch ein Objekt dargestellt wird Knoten... Beachten Sie, dass die Abbildung drei verschiedene Arten von Knoten zeigt. Die Wurzel des Baums ist der Dokumentknoten, der das gesamte Dokument darstellt. Knoten, die HTML-Elemente darstellen, sind Elementknoten, und Knoten, die Text darstellen, sind Textknoten. Dokument, Element und Text sind Unterklassen des Knotens. Dokument und Element sind die beiden wichtigsten Klassen im DOM.

Der Knotentyp und seine Untertypen bilden die im folgenden Diagramm dargestellte Typhierarchie. Beachten Sie die formalen Unterschiede zwischen den generischen Dokument- und Elementtypen sowie den HTMLDocument- und HTMLElement-Typen. Der Dokumenttyp repräsentiert ein HTML- und XML-Dokument, und die Element-Klasse repräsentiert ein Element dieses Dokuments. Die Unterklassen HTMLDocument und HTMLElement repräsentieren speziell ein HTML-Dokument und seine Elemente:

In diesem Diagramm sollte auch beachtet werden, dass es viele Untertypen der HTMLElement-Klasse gibt, die bestimmte Arten von HTML-Elementen darstellen. Jede dieser Eigenschaften definiert JavaScript-Eigenschaften, die die HTML-Attribute eines bestimmten Elements oder einer Gruppe von Elementen widerspiegeln. Einige dieser spezifischen Klassen definieren zusätzliche Eigenschaften oder Methoden, die nicht die Syntax der HTML-Markup-Sprache widerspiegeln.

Dokumentelemente auswählen

Die meisten JavaScript-Client-Programme arbeiten auf die eine oder andere Weise, um Dokumentelemente zu bearbeiten. Zur Laufzeit können diese Programme die globale Dokumentvariable verwenden, die auf das Dokumentobjekt verweist. Um jedoch eine Manipulation von Dokumentelementen durchführen zu können, muss das Programm die Elementobjekte, die auf diese Elemente im Dokument verweisen, irgendwie abrufen oder auswählen. Das DOM definiert verschiedene Möglichkeiten zur Auswahl von Elementen. Sie können ein Element oder Elemente eines Dokuments auswählen:

durch den Wert des id-Attributs;

durch den Wert des Namensattributs;

nach Tag-Name;

durch den Namen der Klasse oder CSS-Klassen;

durch Zufall mit einem bestimmten CSS-Selektor.

Alle diese Auswahlverfahren werden in den folgenden Unterabschnitten beschrieben.

Auswählen von Elementen anhand des ID-Attributwerts

Alle HTML-Elemente haben ID-Attribute. Der Wert dieses Attributs muss innerhalb des Dokuments eindeutig sein. Keine zwei Elemente im selben Dokument dürfen denselben ID-Attributwert haben. Mit der Methode können Sie ein Element anhand des eindeutigen Werts des ID-Attributs auswählen getElementById () Dokumentobjekt:

Var section1 \u003d document.getElementById ("section1");

Dies ist die einfachste und gebräuchlichste Methode zur Auswahl von Elementen. Wenn ein Skript in der Lage sein muss, einen bestimmten Satz von Dokumentelementen zu bearbeiten, weisen Sie den ID-Attributen dieser Elemente Werte zu und nutzen Sie die Möglichkeit, anhand dieser Werte nach ihnen zu suchen.

In Versionen von Internet Explorer vor IE8 sucht die Methode getElementById () ohne Berücksichtigung der Groß- und Kleinschreibung nach ID-Attributwerten und gibt auch Elemente zurück, die mit dem Namensattributwert übereinstimmen.

Auswählen von Elementen anhand des Werts des Namensattributs

Das HTML-Attribut name war ursprünglich zum Benennen von Formularelementen vorgesehen, und der Wert dieses Attributs wurde verwendet, als die Formulardaten an den Server gesendet wurden. Wie das id-Attribut weist das name-Attribut einem Element einen Namen zu. Im Gegensatz zu id muss der Wert des Namensattributs jedoch nicht eindeutig sein: Mehrere Elemente können gleichzeitig denselben Namen haben. Dies ist häufig der Fall, wenn Optionsfelder und Kontrollkästchen in Formularen verwendet werden. Im Gegensatz zu id ist das Attribut name nur für bestimmte HTML-Elemente zulässig, einschließlich Formulare, Formularelemente und Elemente.