Heim > Artikel > Web-Frontend > Eine kurze Diskussion über JS, das benutzerdefinierte Attribute von DOM-Objekten (Tags) liest
Eine kurze Diskussion über JS, das benutzerdefinierte Attribute von DOM-Objekten (Tags) liest
- 高洛峰Original
- 2016-12-06 13:06:021528Durchsuche
Das DOM-Objekt ist ein sehr grundlegendes Element für js. Wenn wir js schreiben, werden wir es auf jeden Fall bearbeiten. Wir können problemlos benutzerdefinierte Attribute hinzufügen, z. B.:
<div id="test" class="hello"></div>
var test = document.getElementById("test");
test.adang = "adang";
alert(test.adang);
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. Ich verwende diese Methode häufig beim Schreiben von js. Sie kann einem bestimmten DOM-Objekt problemlos einige spezielle Daten hinzufügen.
Eine weitere Frage kommt mir in den Sinn. Diese Attribute können in js hinzugefügt werden. Können sie also in Tags wie Flex hinzugefügt werden? Tatsächlich können Attribute wie id und src in js oder auf Tags hinzugefügt werden. Auf beide Arten kann js Daten abrufen. Hier ist zu sagen, dass die Klasse etwas Besonderes ist, aber der Klassenname muss beim Aufruf in js verwendet werden.
In HTML unterstützte Attribute wie ID, Titel und Quelle können in Tags festgelegt und dann von js aufgerufen werden. Was also, wenn es sich um ein benutzerdefiniertes Attribut wie „adang“ in meinem obigen Beispiel handelt? Ist das DOM zugänglich? Ich habe 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>
<div id="test"></div>
</body>
</html>
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>
<div id="test" adang="adang"></div>
</body>
</html>
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.