Beispiel für die Verwendung von GetArttribute -Methoden in JS

GetAttribute () -Methode

Bisher haben wir zwei Möglichkeiten eingeführt, bestimmte Elementknoten abzurufen: Eine besteht darin, die GetelementById () -Methode zu verwenden, und die andere ist die Verwendung der GetElementsByTagName () -Methode. Nachdem wir dieses Element gefunden haben, können wir die Methode GetTTribute () verwenden, um die Werte seiner verschiedenen Attribute abzufragen.

Die Methode GetAtTribute () ist eine Funktion. Es hat nur einen Parameter - den Namen des Attributs, das Sie abfragen möchten:

Object.GetAttribute (Attribut)

Die GetAtTribute () -Methode kann jedoch nicht über das Dokumentobjekt aufgerufen werden, das sich von anderen Methoden unterscheidet, die wir zuvor eingeführt haben. Wir können es nur über ein Element -Knotenobjekt aufrufen.

Sie können es beispielsweise mit der GetElementsByTagName () -Methode kombinieren, um das Titelattribut jedes <p> -Elements wie unten gezeigt abzufragen:

 var text = document.getElementsByTagName ("p") für (var i = 0; i <text.length; i ++) {alert (text [i] .getAttribute ("title");}

Wenn Sie den oben genannten Code am Ende des zuvor angegebenen Beispieldokuments "Einkaufsliste" einfügen und die Seite in einem Webbrowser neu laden, wird auf dem Bildschirm ein Dialogfeld für das Alter mit der Textnachricht "A Gentle Reminder" angezeigt.

Es gibt nur ein <p> -Tit -Attributs im Einkaufslistendokument. Wenn das Dokument ein oder mehrere <p> Elemente ohne Titelattribut enthält, gibt der entsprechende Aufruf von GetAtTribute ("Titel") NULL zurück. Null ist ein Nullwert in der JavaScript -Sprache, und seine Bedeutung lautet: "Das, was Sie gesagt haben, existiert nicht." Wenn Sie dies persönlich überprüfen möchten, geben Sie den folgenden Text in den vorhandenen Textabsatz in das Einkaufslistendokument ein:

<p> Dies ist nur Test </p>

Laden Sie dann die Seite neu. Dieses Mal sehen Sie zwei Altersdialoge. Das zweite Dialogfeld ist leer oder zeigt nur das Wort "null" an. Die spezifische Situation hängt davon ab, wie Ihr Webbrowser den Nullwert anzeigt.

Wir können unser Skript so ändern, dass es nur dann eine Nachricht erfolgt, wenn die Titeleigenschaft existiert. Wir werden eine IF -Anweisung hinzufügen, um zu überprüfen, ob der Rückgabewert der Methode von GetAtTribute () null ist. Wir nutzen diese Gelegenheit und haben auch mehrere Variablen hinzugefügt, um die Lesbarkeit des Skripts zu verbessern:

 var ts = document.getElementsByTagName ("li"); für (var i = 0; i <tsgth; i ++) {text = ts [i] .getAttribute ("title"); if (text! = null) {alert (text)}}}}}}}}}}}}

Wenn Sie diese Seite neu laden, sehen Sie nur ein Änderungsdialogfeld mit der Nachricht "A Gentle Erinnerung", wie unten gezeigt.

Wir können diesen Code sogar auf kürzere reduzieren. Bei Überprüfung, ob ein bestimmter Daten ein Nullwert ist, überprüfen wir tatsächlich, ob es vorhanden ist. Diese Art von Scheck kann vereinfacht werden, um die geprüften Daten als Bedingung für die Anweisung direkt zu verwenden. Wenn (etwas) völlig äquivalent zu if (etwas! = null) ist, aber ersterer ist offensichtlich prägnanter. Zu diesem Zeitpunkt wird der Zustand der IF -Aussage wahr sein, wenn etwas existiert. Wenn etwas nicht existiert, ist die Bedingung der IF -Aussage falsch.

In diesem Beispiel können wir mit if (title_text), solange wir if (title_text! Um die Lesbarkeit des Codes weiter zu erhöhen, können wir diese Gelegenheit auch nutzen, um Altersanweisungen zu schreiben, und wenn Aussagen über dieselbe Zeile, die sie den englischen Sätzen in unserem täglichen Leben näher bringen können:

 var ts = document.getElementsByTagName ("li"); für (var i = 0; i <tsgth; i ++) {text = ts [i] .getAttribute ("title"); if (text) alert (text)}}}}}}}}

3.4.2 setAttribute () Methode

Alle Methoden, die wir Ihnen zuvor vorgestellt haben, können nur zum Abrufen von Informationen verwendet werden. Die setAttribute () -Methode hat einen wesentlichen Unterschied zu ihnen: Es ermöglicht uns, Änderungen am Wert des Attributknotens vorzunehmen.

Ähnlich wie bei der Methode GetAtTribute () ist die Methode setAtTribute () auch eine Funktion, die nur durch das Elementknotenobjekt aufgerufen werden kann. Die Methode setAttribute () erfordert jedoch, dass wir zwei Parameter an sie weitergeben:

Ohrfassungssetattribute (Attribut, Wert)

Im folgenden Beispiel wird in der ersten Anweisung das Element abgerufen, dessen ID -Attributwert der Kauf ist, und die zweite Anweisung setzt den Titel -Attributwert dieses Elements auf eine Warenliste:

 var Shopping = document.getElementById ("Einkäufe") Shopping.SetAttribute ("Titel", "Eine Liste von Waren")

Wir können die Methode von GetAtTribute () verwenden, um zu beweisen, dass sich der Titelattributwert dieses Elements tatsächlich geändert hat:

 var Shopping = document.getElementById ("Einkäufe"); alert (copping.getAttribute ("title"); copping.setAttribute ("title", "eine Liste von Waren"); Alert (Shopping.Getattribute ("Titel");

In den obigen Aussagen wird auf dem Bildschirm zwei Alarmdialogs angezeigt: Der erste Dialogfeld ALTER wird angezeigt, bevor die Methode setAttribute () aufgerufen wird. Es ist leer oder das Wort "null" wird angezeigt. Der zweite wird nach dem Einstellen des Titelattributwerts angezeigt. Die Meldung "Eine Liste von Waren" zeigt an.

Im obigen Beispiel haben wir das Titelattribut eines vorhandenen Knotens festgelegt, aber dieses Attribut existierte überhaupt nicht. Dies bedeutet, dass der SetAtTribute () -Anruf, den wir ausgeben, tatsächlich zwei Vorgänge abschließt: Erstellen Sie zuerst dieses Attribut und setzen Sie dann seinen Wert fest. Wenn wir die Methode SetAtTribute () für ein vorhandenes Attribut des Elementknotens verwenden, wird der aktuelle Wert dieses Attributs überschrieben.

Im Beispiel -Dokument "Einkaufsliste" hat das <p> -Element bereits ein Titelattribut, und der Wert dieses Attributs ist eine sanfte Erinnerung. Wir können die Methode SetAtTribute () verwenden, um ihren aktuellen Wert zu ändern:

 <script type = "text/javaScript"> var ts = document.getElementsByTagName ("li"); für (var i = 0; i <tsgth; i ++) {var text = ts [i] .getAttribute ("title"); alert (title "); alert (title] .getAttribute (" title ") if (text) {ts [i] .setAttribute (" title "," ich werde erfolgreich! ") alert (ts [i] .getatTribute (" title ")}}}}} arm

Der obige Code ruft zunächst alle <p> Elemente ab, die bereits Titelattribute aus dem Dokument haben, und ändern dann alle ihre Titelsattributwerte in brandneue Title -Text. Insbesondere für das Dokument "Einkaufslisten" wird der Eigenschaftswert eine sanfte Erinnerung überschrieben.

Hier ist ein sehr bemerkenswertes Detail: Die Änderungen des Dokuments über die SetAtTribute () -Methode veranlassen das Dokument, Effekte und/oder Verhalten im Browserfenster entsprechend zu ändern. Wenn wir den Quellcode des Dokuments durch die Source -Option des Browsers anzeigen, sehen wir, dass die ursprüngliche Attributwert, die von der von der Setattributs vorgenommenen Dokuments (). Dieses Phänomen von "inkonsistent innen und außen" stammt aus dem Arbeitsmodus von DOM: Laden Sie zuerst den statischen Inhalt des Dokuments und aktualisieren Sie sie dann dynamisch. Die dynamische Aktualisierung wirkt sich nicht auf den statischen Inhalt des Dokuments aus. Dies ist genau die wirkliche Leistung und Versuchung von DOM: Aktualisierungsseiteninhalte müssen keine Endbenutzer in ihren Browsern überstellen.