Beispiel für die Verwendung der getAttribute-Methode in js_javascript-Kenntnissen

getAttribute()-Methode

Bisher haben wir Ihnen zwei Möglichkeiten zum Abrufen bestimmter Elementknoten vorgestellt: Eine besteht darin, die Methode getElementById() zu verwenden, und die andere darin, die Methode getElementsByTagName() zu verwenden. Nachdem wir dieses Element gefunden haben, können wir die Methode getAttribute() verwenden, um die Werte seiner verschiedenen Attribute abzufragen.
Die Methode getAttribute() ist eine Funktion. Es gibt nur einen Parameter – den Namen des Attributs, das Sie abfragen möchten:
object.getAttribute(attribute)
Allerdings kann die Methode getAttribute() im Gegensatz zu den anderen zuvor vorgestellten Methoden nicht über das Dokumentobjekt aufgerufen werden. Wir können es nur über ein Elementknotenobjekt aufrufen.
Sie können es beispielsweise mit der Methode getElementsByTagName() kombinieren, um das Titelattribut jedes

-Elements wie folgt abzufragen:

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

Wenn Sie den obigen Code am Ende des zuvor angegebenen Beispieldokuments „Einkaufsliste“ einfügen und die Seite in einem Webbrowser neu laden, wird eine Textnachricht „Eine sanfte Erinnerung“ auf dem Bildschirm angezeigt .
Es gibt nur ein

-Element mit einem Titelattribut im Dokument „Einkaufsliste“. Wenn dieses Dokument auch ein oder mehrere

-Elemente ohne Titelattribut enthält, gibt der entsprechende getAttribute("title")-Aufruf null zurück. Null ist der Nullwert in der JavaScript-Sprache, was bedeutet: „Das, worüber Sie sprechen, existiert nicht.“ Wenn Sie dies selbst überprüfen möchten, fügen Sie nach dem vorhandenen Textabsatz zunächst den folgenden Text in Ihr Einkaufslistendokument ein:

Das ist nur ein Test

Laden Sie dann die Seite neu. Dieses Mal sehen Sie zwei Änderungsdialogfelder, und das zweite Dialogfeld ist leer oder zeigt nur das Wort „null“ an – je nachdem, wie Ihr Webbrowser Nullwerte anzeigt.
Wir können unser Skript so ändern, dass es nur dann eine Meldung anzeigt, wenn das Titelattribut vorhanden ist. Wir werden eine if-Anweisung hinzufügen, um zu prüfen, ob der Rückgabewert der getAttribute()-Methode null ist. Wir nutzten diese Gelegenheit und fügten auch einige Variablen hinzu, um die Lesbarkeit des Skripts zu verbessern:

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

Wenn Sie diese Seite jetzt neu laden, wird nur ein Änderungsdialogfeld mit der Meldung „Eine sanfte Erinnerung“ angezeigt, wie unten gezeigt.
Wir können diesen Code sogar kürzer machen. Wenn wir prüfen, ob ein Datenelement null ist, prüfen wir tatsächlich, ob es existiert. Diese Prüfung kann vereinfacht werden, indem die geprüften Daten direkt als Bedingung der if-Anweisung verwendet werden. if (something) ist völlig äquivalent zu if (something != null), ersteres ist jedoch offensichtlich prägnanter. Wenn zu diesem Zeitpunkt etwas existiert, ist die Bedingung der if-Anweisung wahr; wenn etwas nicht existiert, ist die Bedingung der if-Anweisung falsch.
Speziell für dieses Beispiel können wir einen prägnanteren Code erhalten, solange wir if (title_text != null) durch if (title_text) ersetzen. Um die Lesbarkeit des Codes weiter zu verbessern, können wir außerdem die Gelegenheit nutzen, die alter-Anweisung und die if-Anweisung in derselben Zeile zu schreiben, wodurch sie den englischen Sätzen in unserem täglichen Leben näher kommen:

var ts=document.getElementsByTagName("li");
for (var i=0; i<ts.length;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 Methode setAttribute() unterscheidet sich wesentlich von ihnen: Sie ermöglicht es uns, den Wert des Attributknotens zu ändern.
Ähnlich wie die Methode getAttribute() ist auch die Methode setAttribute() eine Funktion, die nur über das Elementknotenobjekt aufgerufen werden kann, aber für die Methode setAttribute() müssen wir ihr zwei Parameter übergeben:
obiect.setAttribute(attribute,value)
Im folgenden Beispiel ruft die erste Anweisung das Element ab, dessen ID-Attributwert „Kauf“ ist, und die zweite Anweisung setzt den Titelattributwert dieses Elements auf eine Warenliste:

var shopping=document.getElementById("purchases")
shopping.setAttribute("title","a list of goods")

Wir können die Methode getAttribute() verwenden, um zu beweisen, dass sich der Wert des Titelattributs dieses Elements tatsächlich geändert hat:

var shopping=document.getElementById("purchases");
alert(shopping.getAttribute("title"));
shopping.setAttribute("title","a list of goods");
alert(shopping.getAttribute("title"));

Mit den obigen Anweisungen werden zwei Warndialogfelder auf dem Bildschirm angezeigt: Das erste Änderungsdialogfeld wird angezeigt, bevor die Methode setAttribute() aufgerufen wird. Es ist leer oder zeigt das Wort „null“ an Wenn der Attributwert „title“ festgelegt ist, wird die Meldung „Warenliste“ angezeigt.
Im obigen Beispiel haben wir das Titelattribut eines vorhandenen Knotens festgelegt, dieses Attribut war jedoch ursprünglich nicht vorhanden. Das bedeutet, dass der von uns ausgegebene Aufruf setAttribute() tatsächlich zwei Vorgänge abgeschlossen hat: Zuerst wurde das Attribut erstellt und dann sein Wert festgelegt. Wenn wir die Methode setAttribute() auf ein vorhandenes Attribut eines Elementknotens anwenden, wird der aktuelle Wert dieses Attributs überschrieben.
Im Beispieldokument „Einkaufsliste“ verfügt das Element

bereits über ein Titelattribut, dessen Wert eine sanfte Erinnerung darstellt. Wir können die Methode setAttribute() verwenden, um ihren aktuellen Wert zu ändern:

<script type="text/javascript">
var ts=document.getElementsByTagName("li");
for (var i=0; i<ts.length;i++)
{
var text=ts[i].getAttribute("title");
alert(ts[i].getAttribute("title"))
if(text)
{
ts[i].setAttribute("title","我会成功！")
alert(ts[i].getAttribute("title"))
}
}

Der obige Code ruft zunächst alle

-Elemente mit Titelattributen aus dem Dokument ab und ändert dann alle ihre Titelattributwerte in einen brandneuen Titeltext. Speziell für das Dokument „Einkaufsliste“ wird der Attributwert „Eine sanfte Erinnerung“ überschrieben.
Hier lohnt es sich, auf ein Detail zu achten: Änderungen am Dokument über die Methode setAttribute () führen zu entsprechenden Änderungen im Anzeigeeffekt und/oder Verhalten des Dokuments im Browserfenster, wenn wir jedoch die Browseransicht verwenden Wenn Sie den Quellcode eines Dokuments mithilfe der Option „Quelle“ ändern, werden Ihnen weiterhin die ursprünglichen Attributwerte angezeigt. Das heißt, dass Änderungen, die mit der Methode setAttribute() vorgenommen werden, nicht im Quellcode des Dokuments selbst widergespiegelt werden. Dieses Phänomen der „Inkonsistenz zwischen Erscheinungsbild und Innerem“ ist auf den Arbeitsmodus des DOM zurückzuführen: Laden Sie zuerst den statischen Inhalt des Dokuments und aktualisieren Sie ihn dann dynamisch. Die dynamische Aktualisierung hat keinen Einfluss auf den statischen Inhalt des Dokuments. Das ist die wahre Stärke und der Reiz des DOM: Um den Seiteninhalt zu aktualisieren, muss der Endbenutzer keinen Seitenaktualisierungsvorgang in seinem Browser durchführen.