Einführung in die Verwendung von getAttribute in JavaScript

Während unseres Entwicklungsprozesses glaube ich, dass jeder weiß, dass die getAttribute()-Methode in JavaScript eine Funktion ist und getAttribute() nur einen Parameter hat – den, den Sie abfragen möchten Der Name des -Attributs . Heute stellen wir Ihnen die Verwendung von getAttribute in JavaScript vor!

getAttribute()-Methode

Bisher haben wir Ihnen zwei Methoden zum Abrufen bestimmter Elementknoten vorgestellt: Eine besteht darin, die getElementById()-Methode zu verwenden, und die andere ist Die erste besteht 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 getAttribute()-Methode ist eine Funktion. Es gibt nur einen Parameter – den Namen des Attributs, das Sie abfragen möchten:
object.getAttribute(attribute)
Die Methode getAttribute() kann jedoch nicht über das Objekt document aufgerufen werden ist das, was wir zuvor vorgestellt haben. Die anderen Methoden sind unterschiedlich. Wir können es nur über ein Elementknotenobjekt aufrufen.
Sie können es beispielsweise mit der Methode getElementsByTagName() kombinieren, um das Titelattribut jedes e388a4556c0f65e1904146cc1a846bee-Elements abzufragen, wie unten gezeigt:

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

Wenn Sie den obigen Code einfügen, gehen Sie zu Klicken Sie auf das Ende des zuvor angegebenen Beispieldokuments „Einkaufsliste“ und laden Sie die Seite in Ihrem Webbrowser erneut. Auf dem Bildschirm wird ein Änderungsdialogfeld mit der Textnachricht „Eine sanfte Erinnerung“ angezeigt.
Es gibt nur ein e388a4556c0f65e1904146cc1a846bee-Element mit einem Titelattribut im Dokument „Einkaufsliste“. Wenn dieses Dokument auch ein oder mehrere e388a4556c0f65e1904146cc1a846bee-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 zunächst nach dem vorhandenen Textabsatz folgenden Text in das Einkaufslistendokument ein:

<p>This is just test</p>

und 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.
Unser Skript kann so geändert werden, dass nur dann eine Meldung angezeigt wird, 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. Bei dieser Gelegenheit haben wir auch ein paar Variablen hinzugefügt, 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 Ihnen nur noch die Meldung „Eine sanfte Erinnerung“ angezeigt Öffnen Sie das Dialogfeld „Ändern“, 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 diese Gelegenheit außerdem nutzen, um 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 können:

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 die Methode setAttribute() erfordert, dass wir zwei Parameter an sie ü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"));

上面这些语句将在屏幕上弹出两个alert对话框：第一个alter对话框出现在setAttribute()方法被调用之前，它将是一片空白或显示着单词“null”；第二个出现在title属性值被设置之后，它将显示着“a list of goods”消息。
在上例中，我们设置了一个现有节点的title属性，但这个属性原先并不存在。这意味着我们发出的setAttribute()调用实际完成了两项操作：先把这个属性创建出来，然后再对其值进行设置。如果我们把setAttribute()方法用在元素节点的某个现有属性上，这个属性的当前值将被覆盖。
在“购物清单”示例文档里，e388a4556c0f65e1904146cc1a846bee元素已经有了一个title属性，这个属性的值是a gentle reminder。我们可以用setAttribute()方法来改变它的当前值：

<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"))
}
}

上面这段代码将先从文档里把已经带有title属性的e388a4556c0f65e1904146cc1a846bee元素全部检索出来，然后把它们的title属性值全部修改为brand new title text。具体到“购物清单”文档，属性值a gentle reminder将被覆盖。
这里有一个非常值得关注的细节：通过setAttribute()方法对文档做出的修改，将使得文档在浏览器窗口里的显示效果和/或行为动作发生相应的变化，但我们在通过浏览器的view source（查看源代码）选项去查看文档的源代码时看到的仍将是原来的属性值——也就是说，setAttribute()方法做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容、再以动态方式对它们进行刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力和诱人之处：对页面内容的刷新不需要最终用户在他们的浏览器里执行页面刷新操作就可以实现。

总结：

相信小伙伴们通过本文的认真学习以后，对JavaScript中getAttribute的使用有了进一步的了解和认识，希望通过本文介绍对你的工作有所帮助！

相关推荐：

javascript setAttribute, getAttribute 在不同浏览器上的不同表现

js中 aaa.style 和 aaa.getAttribute('style') 等价吗，有无区别？

有趣的script标签用getAttribute方法来自脚本吧

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von getAttribute in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!