Detaillierte Erklärung, wie JavaScript die Attribute des DOM-Objekts liest und den Code implementiert-js-Tutorial-php.cn

Detaillierte Erklärung, wie JavaScript die Attribute des DOM-Objekts liest und den Code implementiert

伊谢尔伦

Freigeben： 2017-07-20 11:50:46

Original

1550 Leute haben es durchsucht

Das DOM-Objekt ist ein sehr grundlegendes Element für js. Wenn wir js schreiben, werden wir es im Allgemeinen definitiv bearbeiten. Wir können problemlos benutzerdefinierte Attribute hinzufügen, z. B.:

<p id="test" class="hello"></p>

var test = document.getElementById("test");

test.adang = "adang";

alert(test.adang);

Nach dem Login kopieren

Wir werden feststellen, dass dem DOM-Element mit der Test-ID ein Attribut zugewiesen wurde namens adang wurde hinzugefügt, und dann kann dieses Attribut in js aufgerufen werden. Diese Methode wird häufig beim Schreiben von js verwendet. Sie kann einem bestimmten DOM-Objekt problemlos einige spezielle Daten hinzufügen. Es fühlt sich an, als wäre das DOM-Objekt wie ein nützlicher Container, in den eine Menge Daten eingefügt werden kann.

In HTML unterstützte Attribute wie ID, Titel und Quelle können in Tags festgelegt und dann von js aufgerufen werden. Was ist also, wenn es sich um ein benutzerdefiniertes Attribut wie „adang“ im obigen Beispiel handelt? Ist das DOM zugänglich? Wir haben ein Experiment wie folgt durchgeführt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<script type="text/javascript">
window.onload=function(){
  var test = document.getElementById("test");
  test.adang = "adang";
  alert(test.adang);
}
</script>
<body>
<p id="test"></p> 
</body>
</html>

Nach dem Login kopieren

Die Verwendung von js zum Erweitern benutzerdefinierter Attribute führt dazu, dass das gewünschte Ergebnis normal ausgegeben wird, IE und Unter FF ist alles normal.

Dann habe ich einen zweiten Code geschrieben, wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<script type="text/javascript">
window.onload=function(){
  var test = document.getElementById("test");
  alert(test.adang);
}
</script>
<body>
<p id="test" adang="adang"></p> 
</body>
</html>

Nach dem Login kopieren

Dieses Mal habe ich die erweiterten Attribute auf das HTML-Tag geschrieben . Die normale Ausgabe von adang erfolgt unter IE, die Ausgabe unter FF ist jedoch undefiniert.

Aber es ist sehr seltsam, wenn Sie die von DOM bereitgestellte Methode getAttribute("") verwenden, können Sie die benutzerdefinierten Attribute abrufen, die wir in das Tag geschrieben haben, egal ob unter IE oder FF.

Aus Kompatibilitätsgründen müssen wir also getAttribute("") verwenden, um den Wert des benutzerdefinierten Label-Attributs abzurufen.

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung, wie JavaScript die Attribute des DOM-Objekts liest und den Code implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!