Fügen Sie einem Tag mithilfe von Javascript ein Attribut hinzu. Bearbeiten von Elementattributen in jQuery. Methoden zum Arbeiten mit Attributen in JavaScript

In diesem Artikel machen wir uns mit DOM-Eigenschaften und -Attributen vertraut, überlegen, wie sie sich unterscheiden und wie man richtig mit ihnen arbeitet. Schauen wir uns an, welche Methoden JavaScript zum Ausführen von Operationen an Attributen bietet.

Attribute sind HTML-Entitäten, mit denen wir Elementen im HTML-Code bestimmte Daten hinzufügen können.

Wenn ein Browser eine Seite anfordert, erhält er ihren HTML-Quellcode. Anschließend wird dieser Code analysiert und darauf basierend ein DOM erstellt. Bei diesem Vorgang werden HTML-Attribute von Elementen in entsprechende DOM-Eigenschaften übersetzt.

Wenn der Browser beispielsweise die folgende HTML-Codezeile liest, erstellt er die folgenden DOM-Eigenschaften für dieses Element: id , className , src und alt .

Auf diese Eigenschaften wird im JavaScript-Code als Eigenschaften eines Objekts zugegriffen. Das Objekt ist hier ein DOM-Knoten (Element).

Ein Beispiel, in dem wir die Werte der DOM-Eigenschaften für das oben angegebene Element abrufen und ihre Werte an die Konsole ausgeben:

// Element abrufen var brandImg = document.querySelector("#brand"); // die Werte der DOM-Eigenschaften des Elements auf der Konsole anzeigen console.log(brandImg.id); // „Marke“ console.log(brandImg.className); // „Marke“ console.log(brandImg.src); // "/logo.png" console.log(brandImg.alt); // "Site-Logo"

Einige DOM-Eigenschaftsnamen stimmen nicht mit Attributnamen überein. Eines davon ist das Klassenattribut. Dieses Attribut entspricht der DOM-Eigenschaft className. Dieser Unterschied ist auf die Tatsache zurückzuführen, dass „class“ ein Schlüsselwort in JavaScript ist, reserviert ist und nicht verwendet werden kann. Aus diesem Grund entschieden sich die Entwickler des Standards, aus Gründen der Konformität einen anderen Namen zu verwenden, der als className gewählt wurde.

Eine weitere Nuance hängt mit der Tatsache zusammen, dass die Übersetzung von HTML-Attributen in angegeben ist Quellcode In einem Dokument werden DOM-Eigenschaften nicht immer eins zu eins implementiert.

Wenn ein Element ein nicht standardmäßiges HTML-Attribut aufweist, wird keine entsprechende Eigenschaft im DOM erstellt.

// das Element abrufen mydiv = document.querySelector("#mydiv"); // Den Wert der Alt-Eigenschaft des Elements abrufen und an die Konsole ausgeben console.log(mydiv.alt); // undefiniert // den Wert des Alt-Attributs des Elements abrufen und an die Konsole ausgeben console.log(mydiv.getAttribute("alt")); // „…“

Ein weiterer Unterschied besteht darin, dass die Werte bestimmter HTML-Attribute und ihrer entsprechenden DOM-Eigenschaften unterschiedlich sein können. Diese. Ein Attribut kann einen Wert haben und eine darauf basierende DOM-Eigenschaft kann einen anderen haben.

Eines dieser Attribute wird überprüft.

Der Wert des überprüften HTML-Attributs ist in diesem Fall leere Zeile. Die diesem Attribut entsprechende Eigenschaft im DOM hat jedoch den Wert true . Weil Gemäß den Regeln des Standards reicht es aus, dieses Attribut nur im HTML-Code zu erwähnen, um es auf „true“ zu setzen, und es spielt keine Rolle, welchen Wert es haben wird.

Darüber hinaus wird, selbst wenn wir im HTML-Code für ein Eingabeelement mit dem Typ „Kontrollkästchen“ das geprüfte Attribut nicht angeben, im DOM dennoch eine geprüfte Eigenschaft dafür erstellt, die jedoch den Wert „false“ hat.

Darüber hinaus ermöglicht JavaScript auch die Arbeit mit Attributen. Dafür gibt es in der DOM API spezielle Methoden. Es ist jedoch ratsam, sie nur dann zu verwenden, wenn Sie wirklich auf diese Weise mit Daten arbeiten müssen.

Gleichzeitig müssen Sie wissen, dass sich auch das entsprechende Attribut ändert und umgekehrt, wenn wir die DOM-Eigenschaft eines Elements ändern. Allerdings wird dieser Vorgang in Browsern nicht immer eins zu eins durchgeführt.

Die Hauptunterschiede zwischen DOM-Eigenschaften und -Attributen sind:

• Der Attributwert ist immer eine Zeichenfolge, und der DOM-Eigenschaftswert ist ein bestimmter Datentyp (nicht unbedingt eine Zeichenfolge).
• Beim Attributnamen wird die Groß-/Kleinschreibung nicht beachtet, und bei den DOM-Eigenschaften wird die Groß-/Kleinschreibung nicht beachtet. Diese. Im HTML-Code können wir beispielsweise das HTML-ID-Attribut als Id, ID usw. schreiben. Gleiches gilt für den Attributnamen, den wir gesondert angeben JavaScript-Methoden damit zu arbeiten. Auf die entsprechende DOM-Eigenschaft können wir jedoch nur über die ID und sonst nichts zugreifen.

Die Arbeit mit den Eigenschaften von Elementen in JavaScript erfolgt, wie oben erwähnt, wie mit den Eigenschaften von Objekten.

Um jedoch auf die Eigenschaft eines Elements zugreifen zu können, muss diese zunächst abgerufen werden. Sie können ein DOM-Element in JavaScript beispielsweise mithilfe der universellen Methode querySelector und einer Sammlung abrufen DOM-Elemente, zum Beispiel über querySelectorAll .

Betrachten Sie als erstes Beispiel das folgende HTML-Element:

Text der Informationsmeldung... var alarm = document.querySelector("#alert"); // Holen Sie sich das Element

Darauf aufbauend analysieren wir, wie man DOM-Eigenschaften erhält, sie ändert und neue hinzufügt.

DOM-Eigenschaftswerte lesen:

// den Wert der DOM-Eigenschafts-ID abrufen var AlertId = Alert.id; // "alert" // den Wert der DOM-Eigenschaft abrufen className var AlertClass = Alert.ClassName; // „alert alarm-info“ // Wert des DOM-Eigenschaftstitels abrufen var AlertId = Alert.title; // "Hilfstext..."

DOM-Eigenschaftswerte ändern:

// Um ​​den Wert einer DOM-Eigenschaft zu ändern, müssen Sie ihr lediglich einen neuen Wert zuweisen. warning.title = "Neuer Tooltip-Text"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}

DOM-Eigenschaften hinzufügen:

Alert.lang = "ru"; // setze die lang-Eigenschaft auf „ru“ alarm.dir = „ltr“; // setze die dir-Eigenschaft auf „ltr“

Ein Beispiel, in dem wir alle Klassenwerte, die die p-Elemente auf der Seite haben, an die Konsole ausgeben:

Var absätze = document.querySelectorAll("p"); for (var i = 0, length = absätze.länge ; i< length; i++) { if (paragraphs[i].className) { console.log(paragraphs[i].className); }

Ein Beispiel, in dem wir die lang-Eigenschaft auf alle Elemente mit der Inhaltsklasse mit dem Wert „ru“ setzen:

Var content = document.querySelectorAll(".content"); für (var i = 0, Länge = Inhalt.Länge; i< length; i++) { contents[i].lang = "ru"; }

Attribute werden zunächst im HTML-Code festgelegt. Obwohl sie in gewisser Weise mit Eigenschaften verbunden sind, sind sie nicht dasselbe. In den meisten Fällen sollten Sie mit Eigenschaften arbeiten und nur dann auf Attribute zugreifen, wenn Sie sie wirklich benötigen.

Attributwerte sind im Gegensatz zu DOM-Eigenschaften, wie oben erwähnt, immer eine Zeichenfolge.

JavaScript verfügt über vier Methoden zum Ausführen von attributbezogenen Vorgängen:

• .hasAttribute("attribute_name") – prüft, ob das Element das angegebene Attribut hat. Wenn das Element über das zu prüfende Attribut verfügt, dann diese Methode gibt true zurück, andernfalls false.
• .getAttribute("attribute_name") – ruft den Attributwert ab. Wenn das Element nicht über das angegebene Attribut verfügt, gibt diese Methode eine leere Zeichenfolge ("") oder null zurück.
• .setAttribute("attribute_name", "attribute_value") – setzt das angegebene Attribut mit dem angegebenen Wert auf das Element. Wenn das Element das angegebene Attribut hat, ändert diese Methode einfach seinen Wert.
• .removeAttribute("attribute_name") – entfernt das angegebene Attribut aus dem Element.

Schauen wir uns Beispiele an.

Sehr interessantes Beispiel mit dem Wertattribut.

Lassen Sie uns den Wert des Wertattributs und den Wert der DOM-Eigenschaft ermitteln:

// den Wert des Wertattributs des Elements abrufen name.getAttribute("value"); // „Bob“ // den Wert der DOM-Eigenschaft abrufen value name.value; // „Bob“ // aktualisiere den Wert des Wertattributs und setze ihn auf einen neuen Wert name.setAttribute(“value“, „Tom“); // „Tom“ // den Wert der DOM-Eigenschaft abrufen value name.value; // „Tom“

Dieses Beispiel zeigt, dass der Browser bei einer Änderung des Wertattributs automatisch die DOM-Eigenschaft value entsprechend ändert.

Machen wir nun das Gegenteil, nämlich den Wert der DOM-Eigenschaft zu ändern und zu prüfen, ob sich der Attributwert ändert:

// einen neuen Wert für den DOM-Eigenschaftswert festlegen name.value = "John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}

Dieses Beispiel zeigt, dass die Änderung einer DOM-Eigenschaft nicht immer zu einer entsprechenden Änderung des Attributs führt. Diese. In diesem Fall ändert die Änderung der Eigenschaft value DOM nicht das entsprechende Attribut.

Das Gleiche passiert, wenn der Benutzer Text in dieses Feld eingibt. Der DOM-Eigenschaftswert enthält den tatsächlichen Wert und das entsprechende Attribut enthält den ursprünglichen Wert oder den Wert, den wir beispielsweise mit der setAttribute-Methode festgelegt haben.

Dieses Beispiel zeigt, dass es richtiger ist, immer mit DOM-Eigenschaften zu arbeiten und Sie nur dann auf das Attribut zugreifen müssen, wenn es wirklich notwendig ist.

Auch wenn Sie den von uns in HTML festgelegten Anfangswert benötigen, können Sie die Eigenschaft verwenden. Die Eigenschaft, die den Anfangswert des Wertattributs enthält, heißt defaultValue .

Name.defaultValue; //Tom

Ein weiteres sehr interessantes Beispiel, aber jetzt mit dem href-Attribut.

Ein Beispiel, bei dem wir den Wert des Links abrufen müssen, wie er im HTML festgelegt wurde.

var page2 = document.querySelector("#link"); page2.getAttribute("href"); // Seite2.html Seite2.href; // vollständige URL, zum Beispiel: http://localhost/page2.html

In diesem Beispiel enthalten das href-Attribut und die href-DOM-Eigenschaft unterschiedliche Bedeutungen. Das href-Attribut ist das, was wir im Code festlegen, und die DOM-Eigenschaft ist die vollständige URL. Dieser Unterschied wird durch den Standard bestimmt, dass der Browser den href-Wert in die vollständige URL auflösen muss.

Wenn wir also den Inhalt des Attributs abrufen müssen, können wir in diesem Fall nicht auf die Methode getAttribute verzichten.

Schauen wir uns abschließend das ausgewählte Attribut an.

Ein Beispiel, das zeigt, wie Sie den Wert der ausgewählten Auswahloption erhalten können:

keine Bewertung 1 2 3 4 5 // das ausgewählte Element abrufen var mark = document.querySelector("#mark"); // 1 Weg mark.querySelector("option:checked").value; // Methode 2 mark.value;

Ein Beispiel, das zeigt, wie Sie die ausgewählten Optionswerte in einem ausgewählten Element abrufen können:

keine Bewertung 1 2 3 4 5 // das ausgewählte Element abrufen var mark = document.querySelector("#mark"); // Methode 1 (durch Erstellen eines Arrays und Füllen mit den Werten der ausgewählten Optionen) var arr = ; for (var i = 0, length = mark.options.length; i< length; i++) { if (mark.options[i].selected) { arr.push(mark.options[i].value); } } // 2 способ (более современный, с использованием DOM-свойства selectedOptions) var arr = Array.from(mark.selectedOptions, option =>Optionswert)

In JavaScript verfügt jedes Element über eine Attributeigenschaft, mit der alle seine Attribute als NamedNodeMap-Objekt abgerufen werden können.

Diese Methode kann verwendet werden, wenn Sie beispielsweise alle Attribute eines Elements durchlaufen müssen.

Auf ein Attribut in dieser Sammlung wird über seinen Index oder mithilfe der Item-Methode zugegriffen. Attribute in dieser Sammlung werden ab 0 gezählt.

Lassen Sie uns beispielsweise alle Attribute eines bestimmten Elements in der Konsole anzeigen:

Ich LIEBE JAVASCRIPT

Darüber hinaus können Sie mit dieser Sammlung auch mit den folgenden Methoden arbeiten:

• .getNamedItem("attribute_name") – ruft den Wert des angegebenen Attributs ab (wenn das angegebene Attribut im Element nicht vorhanden ist, ist das Ergebnis null).
• .setNamedItem("attribute_node") – fügt einem Element ein neues Attribut hinzu oder aktualisiert den Wert eines vorhandenen. Um ein Attribut zu erstellen, müssen Sie die Methode document.createAttribute() verwenden, der der Attributname als Parameter übergeben werden muss. Anschließend muss dem erstellten Attribut über die Eigenschaft value ein Wert zugewiesen werden.
• .removeNamedItem("attribute_name") – entfernt das angegebene Attribut aus einem Element (gibt das entfernte Attribut als Ergebnis zurück).

Ein Beispiel für die Arbeit mit Attributen über die Methoden getNamedItem, setNamedItem und removeNamedItem:

Ich LIEBE JAVASCRIPT

• Drucken Sie alle Dokumentelemente, die das id-Attribut haben, auf der Konsole aus.
• Fügen Sie allen Bildern auf der Seite ein Titelattribut hinzu, wenn sie dieses Attribut nicht haben. Setzen Sie den Attributwert auf den Wert des Alt-Attributs.

In diesem Tutorial geht es um das Lesen und Ändern von Elementattributen in jQuery.

Attribute sind ein Name/Wert-Paar, das Elementen in einem Tag zugewiesen wird. Beispiele für Attribute ( href, Titel, src, Klasse):

• attr() zum Lesen, Hinzufügen und Ändern von Attributen
• RemoveAttr() zum Entfernen von Attributen

In dieser Lektion wird die Arbeit mit den Methoden attr() und removeAttr() behandelt.

Für die Arbeit mit CSS-Klassen gibt es spezielle jQuery-Methoden, die in einer anderen Lektion beschrieben werden. Wenn Sie in jQuery an einem Projekt arbeiten, müssen Sie häufig CSS-Klassen manipulieren, und das Klassenattribut kann mehrere Klassennamen enthalten, was die Arbeit damit wesentlich komplexer macht als mit anderen Attributen.

Wenn Sie mit den Werten von Eingabefeldern arbeiten möchten, ist es besser, die Methode val() zu verwenden, die nicht nur eine vereinfachte Möglichkeit bietet, mit dem Attribut value zu arbeiten, sondern auch Werte lesen und festlegen kann in den ausgewählten Elementen der Auswahlliste.

Das Lesen des Werts eines Elementattributs ist einfach. Sie müssen lediglich die Methode attr() aufrufen jQuery-Objekt das das Element enthält, und übergibt ihm den Namen des zu lesenden Attributs. Die Methode gibt den Attributwert zurück:

// Den Wert des „href“-Attributs der #myLink-Elementwarnung ausgeben ($(“a#myLink“).attr(“href“));

Wenn Ihr jQuery-Objekt mehrere Elemente enthält, liest die Methode attr() die Attributwerte nur für das erste Element im Satz.

Die Methode attr() kann auch zum Hinzufügen oder Ändern von Attributwerten verwendet werden:

• If-Attribut existiert nicht im Element wird es so sein hinzugefügt und ihm wird der angegebene Wert zugewiesen.
• If-Attribut ist bereits vorhanden, sein Wert wird sein Aktualisiert gegebener Wert.

Es gibt drei Möglichkeiten, die Methode attr() zum Hinzufügen oder Ändern von Attributen zu verwenden:

Um das Attribut eines Elements festzulegen oder zu ändern, müssen Sie die Methode attr() aufrufen und dabei den Attributnamen und -wert angeben. Zum Beispiel:

// Ändern Sie den Wert des „href“-Attributs des #myLink-Elements in den Wert „http://www.example.com/“ // (wenn das „href“-Attribut nicht existiert, wird es automatisch erstellt) $("a#myLink"). attr("href", "http://www.example.com/");

Es ist auch möglich, dasselbe Attribut für mehrere Elemente festzulegen:

Mithilfe einer Karte können Sie mehrere Attribute gleichzeitig für ein oder mehrere Elemente festlegen. Dies ist eine Liste von Name/Wert-Paaren, die wie folgt aussieht:

( Name1: Wert1, Name2: Wert2, ... )

Das folgende Beispiel legt zwei Attribute gleichzeitig für das img-Element fest:

// Legen Sie die Attribute „src“ und „alt“ für das img-Element fest #myPhoto $("img#myPhoto").attr(( "src": "mypic.jpg", "alt": "My Photo" )) ;

Sie können auch Attribute für mehrere Elemente festlegen:

// Legen Sie die Attribute „src“ und „alt“ für alle img-Elemente fest $("img").attr(( "src": "mypic.jpg", "alt": "My Photo" ));

Anstatt Attributwerte an die attr()-Methode zu übergeben, können Sie den Namen der Callback-Funktion übergeben. Auf diese Weise können Sie Attributwerte für mehrere Elemente basierend auf der Position des Elements, einem vorhandenen Attributwert oder anderen Eigenschaften dynamisch festlegen.

Die Rückgabefunktion muss zwei Argumente annehmen:

• Index der Position des aktuell ausgewählten Elements im Satz (beginnt bei Null)
• alter Attributwert für das aktuell ausgewählte Element

Der von der Funktion zurückgegebene Wert wird verwendet, um den Attributwert zu ersetzen.

Zusätzlich zur aktuellen Position des Elements und dem alten Wert des Attributs kann Ihre Funktion mit auf das Element selbst zugreifen Stichwort Das. Auf diese Weise können Sie über die Callback-Funktion auf jede Elementeigenschaft oder Methode zugreifen.

Das Beispiel verwendet eine Rückruffunktion, um jedem Bild auf der Seite basierend auf der Position des Bildes und seinem src-Attribut ein alt-Attribut hinzuzufügen:

$(init); function init() ( // Setze das „alt“-Attribut für alle „img“-Elemente $(“img“).attr(“alt“, setAltText); function setAltText(index, attributeValue) ( ​​​​return („Figure“ + (Index +1) + ": " + this.src); ) )

Nach der Ausführung des Codes verfügt das erste Bild über ein Alt-Attribut mit dem Wert „Abbildung 1: myphoto.jpg“ und das zweite Bild über ein Alt-Attribut mit dem Wert „Abbildung 2: yourphoto.jpg“.

Um ein Attribut aus einem Element zu entfernen, müssen Sie die Methode „removeAttr()“ aufrufen und ihr den Namen des zu entfernenden Attributs übergeben. Zum Beispiel:

// Entfernen Sie das Attribut „title“ aus dem #myLink-Element $("a#myLink").removeAttr("title");

Sie können die Methode „removeAttr()“ auch für ein jQuery-Objekt aufrufen, das mehrere Elemente enthält. Die Methode „removeAttr()“ entfernt das angegebene Attribut aus allen Elementen:

// Entfernen Sie das „title“-Attribut von allen Links $(“a“).removeAttr(“title“);

In dieser Lektion wurden Fragen der Arbeit mit Elementattributen in jQuery behandelt:

• Attributwerte lesen
• Ein Attribut festlegen
• Mehrere verschiedene Attribute gleichzeitig festlegen
• Verwenden einer Rückruffunktion zum dynamischen Festlegen von Attributwerten für eine Reihe von Elementen
• Attribute von einem Element entfernen

Legt den Wert eines Attributs für das angegebene Element fest. Wenn das Attribut bereits vorhanden ist, wird der Wert aktualisiert. andernfalls wird ein neues Attribut mit dem angegebenen Namen und Wert hinzugefügt.

Boolesche Attribute gelten als wahr, wenn sie überhaupt auf dem Element vorhanden sind, unabhängig von ihrem tatsächlichen Wert; in der Regel sollten Sie die leere Zeichenfolge („“) im Wert angeben (manche Leute verwenden den Namen des Attributs); das funktioniert, ist aber kein Standard). Nachfolgend finden Sie eine praktische Demonstration.

Da der angegebene Wert in eine Zeichenfolge konvertiert wird, bewirkt die Angabe von null nicht unbedingt das, was Sie erwarten. Anstatt das Attribut zu entfernen oder seinen Wert auf null zu setzen, wird stattdessen der Wert des Attributs auf die Zeichenfolge „null“ gesetzt. Wenn Sie ein Attribut entfernen möchten, rufen Sie removeAttribute() auf.

Im folgenden Beispiel wird setAttribute() verwendet, um Attribute für eine festzulegen.

Dies zeigt zwei Dinge:

• Der erste Aufruf von setAttribute() oben zeigt die Änderung des Werts des Namensattributs in „helloButton“. Sie können dies mit dem Seiteninspektor Ihres Browsers (Chrome, Edge, Firefox, Safari) sehen.
• Um den Wert eines booleschen Attributs festzulegen, z. B. „disabled“, können Sie einen beliebigen Wert angeben. Empfohlene Werte sind ein leerer String oder der Name des Attributs. Wichtig ist nur, dass, wenn das Attribut überhaupt vorhanden ist, unabhängig von seinem tatsächlichen Wert, sein Wert wird als wahr angesehen. Das Fehlen des Attributs bedeutet, dass sein Wert false ist. Indem wir den Wert des Attributs „disabled“ auf die leere Zeichenfolge („“) setzen, setzen wir „disabled“ auf „true“, was dazu führt, dass die Schaltfläche deaktiviert wird.

DOM-Methoden, die sich mit Elementattributen befassen:

• DOM Level 2 Core: setAttribute (eingeführt in DOM Level 1 Core)

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

Die Verwendung von setAttribute() zum Ändern bestimmter Attribute, insbesondere des Werts in XUL, funktioniert inkonsistent, da das Attribut den Standardwert angibt. Um auf die aktuellen Werte zuzugreifen oder diese zu ändern, sollten Sie die Eigenschaften verwenden. Verwenden Sie beispielsweise Element.value anstelle von Element.setAttribute() .

Sie können eine benutzerdefinierte erstellen verbindliche Bindung, das den Wert eines bestimmten beobachtbaren booleschen Werts prüft, bevor Attribute hinzugefügt werden oder nicht. Sehen Sie sich dieses Beispiel an:

Ko.bindingHandlers.attrIf = ( update: function (element, valueAccessor, allBindingsAccessor) ( var h = ko.utils.unwrapObservable(valueAccessor()); var show = ko.utils.unwrapObservable(h._if); if (show) ( ko.bindingHandlers.attr.update(element, valueAccessor, allBindingsAccessor); ) else ( for (var k in h) ( if (h.hasOwnProperty(k) && k.indexOf("_") !== 0) ( $(element).removeAttr(k); ) ) ) ) ); Verknüpfung

Ich wünschte, ich könnte einfach @gbs antworten, aber ich kann nicht. Meine Lösung wäre, zwei identische HTML-Elemente zu haben: eines mit dem Attribut, eines ohne es und eine Knockout-Bedingung, um eines davon entsprechend dem Element hinzuzufügen. Ich bin mir dieser allgemeinen Erwartung auch bewusst, aber welche Lösung ist effizienter?

In der Lektion wird der Anfang des Themas behandelt: Das Dokumentobjektmodell (JavaScript DOM) ist die Grundlage für dynamisches HTML, Objektzugriffsmethoden werden untersucht und Methoden zur Verarbeitung von Javascript-Ereignissen werden berücksichtigt.

• Im Allgemeinen handelt es sich bei einem Objekt um einen zusammengesetzten Datentyp, der viele Werte zu einer gemeinsamen Einheit zusammenfasst und es ermöglicht, Werte bei Bedarf unter ihrem Namen zu speichern und abzurufen.

Wir haben bereits früher begonnen, uns mit dem Konzept in Javascript vertraut zu machen.

• In Javascript gibt es so etwas wie DOM - Dokumentobjektmodell— Objektmodell einer Webseite (HTML-Seite).
• Dokument-Tags oder, wie man auch sagt, Dokumentknoten sind seine Objekte.

Schauen wir uns das Diagramm an Objekthierarchie in JavaScript und wo in der Hierarchie sich das in diesem Thema behandelte Dokumentobjekt befindet.

Das Skriptelement verfügt über die folgenden Attribute:

Beispiel:

/* Ermöglicht das parallele Laden von JS-Dateien und die sofortige Ausführung nach dem Laden, ohne auf die Verarbeitung des Rests der Seite warten zu müssen. */ /* Ermöglicht dem Browser, mit dem parallelen Laden von JS-Dateien zu beginnen, ohne die weitere Verarbeitung der Seite zu stoppen. Ihre Ausführung erfolgt nach vollständiger Analyse des Dokumentobjektmodells */

Das Dokumentobjekt repräsentiert eine Webseite.

Wichtig: Um in JavaScript auf die Eigenschaften und Methoden eines Objekts zuzugreifen, wird wie bei der Arbeit mit anderen Objekten die Punktnotation verwendet:

diese. Zuerst wird das Objekt selbst geschrieben, dann wird seine Eigenschaft, sein Attribut oder seine Methode durch einen Punkt und ohne Leerzeichen angegeben

Schauen wir uns ein Beispiel an:

Beispiel: Es soll ein Tag in einem HTML-Dokument vorhanden sein

Mein Element

und spezifisch für ihn CSS-Stil(sogar zwei Stile, der zweite wird für die Aufgabe nützlich sein):

.small( Farbe:rot; Schriftgröße:klein; ) .big( Farbe:blau; Schriftgröße:groß; )

Notwendig:

Da es sich um eine Javascript-Sprache handelt, können Sie jede Eigenschaft mit einem beliebigen Wert für ein Objekt erstellen und festlegen. Aber zuerst erhalten wir Zugriff auf das Objekt (der Zugriff auf das Objekt wird später in dieser Lektion ausführlich besprochen):

// Auf das Objekt über seine ID zugreifen var element = document.getElementById("MyElem"); element.myProperty = 5; // die Eigenschaft zuweisen alarm(element.myProperty); // in einem Dialogfeld anzeigen

Die nächste Aufgabe bezieht sich auf ein Objektattribut. Ein Objektattribut sind die Attribute des Tags. Diese. in unserem Fall gibt es zwei davon: das class-Attribut mit dem Wert small und das id-Attribut. Wir werden mit dem Klassenattribut arbeiten.

Fügen wir nun Javascript-Code hinzu, um den Attributwert unseres Objekts anzuzeigen. Der Code muss sein nach Haupt-Tags:

// Auf das Objekt über seine ID zugreifen var element = document.getElementById("MyElem"); alarm(element.getAttribute("class")); // in einem Dialogfeld anzeigen

Und die letzte Aufgabe: Ändern des Attributwerts. Wir haben einen Stil dafür. "groß". Ersetzen wir den Wert Klassenattribut für diesen Stil:

// Auf das Objekt über seine ID zugreifen var element = document.getElementById("MyElem"); element.setAttribute("class","big");

Dadurch wird unser Element größer und blau gefärbt (Klasse groß).

Schauen wir uns nun die im Beispiel verwendeten Methoden zum Arbeiten mit Attributen genauer an.

Attribute können hinzugefügt, gelöscht und geändert werden. Dafür gibt es spezielle Methoden:

• Ein Attribut hinzufügen (einen neuen Wert dafür festlegen):

getAttribute(attr)

• Überprüfen, ob dieses Attribut vorhanden ist:

removeAttribute(attr)

Verschiedene Möglichkeiten, mit Attributen zu arbeiten

Beispiel: Drucken Sie den Wert des Wertattributs eines Textblocks.

• Es sei ein Textblock vorhanden:

var elem = document.getElementById("MyElem"); var x = „Wert“;

• Schauen wir uns verschiedene Möglichkeiten an, um den Attributwert abzurufen (verwenden Sie die Methode „alert()“ für die Ausgabe):

elem.getAttribute("value")

elem.getAttribute("value")

2. Punktnotation:

elem.attributes.value

elem.attributes.value

3. Klammernotation:

var element = document.getElementById("t1"); alarm(...) element.setAttribute(...);


Sie können Attributwerte auch auf verschiedene Arten festlegen:

var x = „Schlüssel“; // key - Attributname, val - Wert für das Attribut // 1. elem.setAttribute("key", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes[ " key"] = "val" // 4. elem.setAttribute(x, "val")

Eigenschaften von Körperelementen

Über das Dokumentobjekt können Sie mit einigen nützlichen Eigenschaften auf den Hauptteil des Dokuments – das Body-Tag – zugreifen.

Das Body-Tag hat beispielsweise zwei Eigenschaften: die Breite und Höhe des Clientfensters:

document.body.clientHeight – Höhe des Clientfensters
document.body.clientWidth – Breite des Clientfensters


Aber das Wichtigste ist, wie wir bereits gelernt haben, dass über das Dokumentobjekt durch spezielle Methoden Zugriff auf alle Seitenelemente, also Tags, gewährt wird.

Wichtig: Wenn Sie auf diese Weise auf Seiten-Tags zugreifen, muss sich das Skript am Ende des Elementbaums befinden, bevor der Textkörper geschlossen wird! Denn zum Zeitpunkt der Ausführung des Skripts sollten alle Elemente bereits vom Browser auf dem Bildschirm „gezeichnet“ sein

Job js8_1 . Zeigen Sie eine Meldung über die Größe des Browserfensters an: zum Beispiel: „Abmessungen des Browserfensters 600 x 400“

Zugriff auf Dokumentelemente in JavaScript

Es gibt mehrere Möglichkeiten, auf Objekte zuzugreifen oder nach ihnen zu suchen:

Betrachten wir jede der Optionen genauer.

Syntax: document.getElementById(id)

Die Methode getElementById() gibt das Element selbst zurück, das dann für den Zugriff auf Daten verwendet werden kann

Beispiel: Die Seite hat ein Textfeld mit dem Attribut id="cake":

...

Notwendig

alarm(document.getElementById("cake").value); // gibt „Anzahl der Kuchen“ zurück

Sie können das Gleiche tun, indem Sie über eine Variable auf das Objekt zugreifen:

var a=document.getElementById("cake"); alarm(a.value); // den Wert des Wertattributs anzeigen, d. h. Text „Anzahl Kuchen“

Wichtig: Das Skript muss nach dem Tag stehen!

Syntax:
document.getElementsByTagName(name);

Beispiel: Die Seite verfügt über ein Textfeld (Eingabe-Tag) mit einem Wertattribut:

...

Erforderlich: Zeigt den Wert seines Wertattributs an

Die Methode getElementsByTagName ermöglicht den Zugriff über eine Variable auf alle Eingabeelemente (d. h. ein Array von Eingabeelementen), auch wenn dieses Element das einzige auf der Seite ist. Um auf ein bestimmtes Element zuzugreifen, beispielsweise auf das erste, geben wir dessen Index an (das Array beginnt bei Index Null).

✍ Lösung:

Wir greifen über den Index auf ein bestimmtes Element zu:

var a =document.getElementsByTagName("input"); alarm(a.value); // gibt „Anzahl der Kuchen“ zurück

Syntax:
document.getElementsByName(name);

Die Methode getElementsByName("...") gibt ein Array von Objekten zurück, deren Namensattribut dem als Methodenparameter angegebenen Wert entspricht. Wenn es nur ein solches Element auf der Seite gibt, gibt die Methode dennoch ein Array (mit nur einem einzelnen Element) zurück.

Beispiel: Nehmen wir an, das Dokument enthält ein Element:

var element = document.getElementsByName("MyElem"); alarm(element.value);

In diesem Beispiel gibt es ein Element, aber die Referenz bezieht sich auf das Nullelement des Arrays.

Wichtig: Die Methode funktioniert nur mit den Elementen, für die das Namensattribut explizit in der Spezifikation angegeben ist: Dies sind form , input , a , select , textarea und eine Reihe anderer, seltenerer Tags.

Die Methode document.getElementsByName funktioniert nicht mit anderen Elementen wie div , p usw.

Der Zugriff auf Kinder erfolgt in Javascript über die Eigenschaft childNodes. Die Eigenschaft gehört zum übergeordneten Objekt.

document.getElementById(roditel).childNodes;

Schauen wir uns ein Beispiel an, bei dem Bild-Tags in einem Container namens div-Tag platziert werden. Somit ist das div-Tag das übergeordnete Element der Bilddaten, und die img-Tags selbst sind dementsprechend untergeordnete Elemente des div-Tags:

Lassen Sie uns nun ausgeben Modales Fenster Werte von Array-Elementen mit Nachkommen, d.h. img-Tags:

var myDiv=document.getElementById("div_for_img"); // Auf den übergeordneten Container zugreifen var childMas=myDiv.childNodes; // Array von Nachkommen für (var i =0; i< childMas.length;i++){ alert(childMas[i].src); }

Beachten Sie, dass es praktisch ist, eine Schleife zu verwenden, um die Elemente eines untergeordneten Arrays zu durchlaufen. Diese. In unserem Beispiel erhalten wir einen Zyklus:

For (var a in childMas)( alarm(childMas[a].src); )

Schauen wir uns andere Methoden anhand eines Beispiels an:

1 3 4

Zugang:

... // unerwünschte und veraltete Elementzugriffsmethoden: Alert(document.forms.name); // f alarm(document.forms.elements.type); // Textalarm (document.forms.elements.options.id); // o2-Alarm(document.f.b.type); // Schaltflächenalarm (document.f.s.name); // SS-Alert(document.f.s.options.id); // o2 // bevorzugte Methoden für den Zugriff auf Elemente alarm(document.getElementById("t").type); // Textalarm(document.getElementById("s").name); // ss Alert(document.getElementById("s").options.id); // 02 Alert(document.getElementById("o3").text); // 4 ...

Beispiel: Erstellen Sie in einem HTML-Dokument eine Schaltfläche und ein Textfeld. Färben Sie mithilfe eines Skripts den Hintergrund der Schaltfläche (style.backgroundColor-Eigenschaft der Schaltfläche) und zeigen Sie die Beschriftung an "Hallo!" im Textfeld (Wertattribut).

HTML Quelltext:

document.getElementById("t1").value = "Hallo!"; document.getElementById("b1").style.backgroundColor = "red";!}

Option 2:

document.getElementById("t1").setAttribute("value","Hallo!"); document.getElementById("b1").style.backgroundColor = "red";

Aufgabe Js8_2. Erstellen Sie Textfeld-Tags wie im Bild gezeigt. Geben Sie ihnen die entsprechenden (in der Abbildung gezeigten) ID-Attributwerte. Fügen Sie mithilfe eines Skripts den Wert „0“ zu allen numerischen Feldern hinzu (unter der Annahme numerischer Werte).

Bleibt das Feld leer?

Benutzereingaben können nicht vertrauenswürdig sein. Es ist unangemessen anzunehmen, dass Benutzer bei der Eingabe von Daten Daten überprüfen. Das bedeutet, dass Sie hierfür Javascript verwenden müssen.

Um zu überprüfen, ob das Textfeld leer bleibt (z. B. nachdem der Benutzer die Daten eines Formulars ausgefüllt hat), sollten Sie auf die Eigenschaft value zurückgreifen. Wenn der Eigenschaftswert eine leere Zeichenfolge ("") ist, müssen Sie den Benutzer irgendwie darüber informieren.

if(document.getElementById("name").value=="") (einige Aktionen, zum Beispiel das Anzeigen einer Meldung, in der Sie aufgefordert werden, ein Feld auszufüllen);

Darüber hinaus können Sie auf ein Skript verzichten. Das Eingabe-Tag des Textfelds verfügt über ein Musterattribut. sein Wert ist angegeben regulären Ausdruck um die Daten in einem bestimmten Formulartextfeld zu validieren. Wenn das Attribut vorhanden ist Muster, dann wird das Formular erst abgesendet, wenn dieses Textfeld korrekt ausgefüllt ist.
Um beispielsweise zu prüfen, ob ein Feld leer bleibt:

Text statt Zahlenwert: isNaN-Funktion

Wenn für ein Feld die Eingabe eines numerischen Werts erforderlich ist, der Benutzer jedoch stattdessen Text eingibt, muss die Funktion isNaN verwendet werden. „ist keine Zahl?“), das den Typ der Eingabedaten überprüft und „true“ zurückgibt, wenn Textdaten anstelle von numerischen Daten eingegeben werden.

Das. Wenn „true“ zurückgegeben wird, muss der Benutzer aufgefordert werden, das richtige Format einzugeben, d. h. Nummer.

if(isNaN(document.getElementById("minutes").value))( Warnung, die Sie zur Eingabe numerischer Daten auffordert);

Gegeben sei eine Seite mit auszufüllenden Elementen:


Fragment HTML Quelltext:

Name:
Anzahl Donuts:
Protokoll:
Zusammenfassung:
Steuer:
Ergebnis:
...

Notwendig:
Füllen Sie die Lücken im folgenden Codeausschnitt aus, der überprüft, ob zwei Textfelder korrekt ausgefüllt sind: Name(id="name") und Protokoll(id="Minuten"). Verwenden Sie Überprüfungen, um sicherzustellen, dass das Feld leer bleibt („“) und dass das numerische Feld korrekt ausgefüllt ist (isNaN).

* Führen Sie die Aufgabe auch mit dem Musterattribut von Textfeldern durch.

Skriptfragment:

Der Code verwendet zuvor erlernte Bedingungen, um komplexe Bedingungen zu erstellen.

Ein neues Konzept für Sie ist der Aufruf einer Funktion als Button-Event-Handler:
onclick="placeOrder();"
Wenn auf die Schaltfläche geklickt wird, wird die Funktion placeOrder() aufgerufen