Das Attribut und die Eigenschaft des DOM -Elements sind leicht zu mischen und können nicht unterschieden werden. Die beiden sind verschiedene Dinge, aber die beiden sind eng miteinander verbunden. Viele neue Freunde, einschließlich mir in der Vergangenheit, verstehen es oft nicht.
Das Attribut wird in den chinesischen Begriff "Eigenschaften" übersetzt und die Eigenschaft in den chinesischen Begriff "Attribut" übersetzt. Aus der wörtlichen Bedeutung des Chinesens gibt es in der Tat einen kleinen Unterschied. Lassen Sie uns zuerst über Attribut sprechen.
Attribut ist ein Feature -Knoten. Jedes DOM -Element hat ein entsprechendes Attributattribut, um alle Attributknoten zu speichern. Attribute sind ein Behälter einer Array -Klasse. Um genau zu sein, ist es Namenodemap. Kurz gesagt, es ist ein Container, der einem Array ähnelt, aber nicht ganz das gleiche wie ein Array. Jeder numerische Index der Attribute speichert einen Attributknoten in der Form eines Namens-Wert-Paares (name = ”value”).
Kopieren Sie den Code wie folgt: <div id = "box" gameId = "880"> Hallo </div>
Der HTML -Code des obigen Div -Elements umfasst Klassen, ID und benutzerdefinierte GameID. Diese Funktionen werden in Attributen gespeichert, ähnlich wie die folgende Form:
Kopieren Sie den Code wie folgt: [, id = "box", gameId = "880"]
Sie können auf den Attributknoten wie diesen zugreifen:
Die Codekopie lautet wie folgt:
var elem = document.getElementById ('box');
console.log (Elem.Attributes [0] .Name); // Klasse
console.log (Elem.Attributes [0] .Value); // Kasten
IE6-7 speichert jedoch viele Dinge in Attributen, und die obige Zugriffsmethode unterscheidet sich von den Rückgabergebnissen des Standardbrowsers. Normalerweise müssen Sie einen Attributknoten abrufen und die GetAttribute -Methode direkt verwenden:
Kopieren Sie den Code wie folgt: console.log (elem.getAttribute ('gameId')); // 880
Um einen Attributknoten für die Verwendung der SetAttribute -Methode festlegen, verwenden Sie RemoveTtribute zum Löschen:
Die Codekopie lautet wie folgt: Elem.SetatTribute ('testattr', 'testval');
console.log (Elem.removeAttribute ('GameId')); // undefiniert
Attribute werden dynamisch aktualisiert, wenn Attributknoten hinzugefügt oder entfernt werden.
Eigentum ist ein Eigentum. Wenn das DOM-Element als gewöhnliches Objekt angesehen wird, handelt es sich um eine Eigenschaft, die im Objekt in Form eines Namenswertepaares gespeichert ist (name = "Wert"). Es ist viel einfacher, Eigenschaften hinzuzufügen und zu löschen, und es unterscheidet sich nicht von gewöhnlichen Objekten:
Die Codekopie lautet wie folgt:
elem.gameid = 880; // Hinzufügen
console.log (elem.gameid) // GET
löschen elem.gameid // löschen
Der Grund, warum Attribut und Eigenschaft leicht zu mischen sind, ist, dass viele Attributknoten ein entsprechendes Eigenschaftsattribut haben, wie z.
Die Codekopie lautet wie folgt:
console.log (elem.getAttribute ('id')); // Kasten
console.log (elem.id); // Kasten
Elem.id = 'Hallo';
console.log (elem.getAttribute ('id')); // Hallo
Für benutzerdefinierte Attributknoten oder benutzerdefinierte Eigenschaften haben die beiden jedoch nichts miteinander zu tun.
Die Codekopie lautet wie folgt:
console.log (Elem.getAttribute ('gameId')); // 880
console.log (elem.gameid); // undefiniert
Elem.AreAid = '900';
console.log (Elem.getAttribute ('AreaId')) // null
Für IE6-7 gibt es keine Unterscheidung zwischen Attribut und Eigenschaft:
Die Codekopie lautet wie folgt:
console.log (Elem.getAttribute ('gameId')); // 880
console.log (elem.gameid); // 880
Elem.AreAid = '900';
console.log (Elem.getAttribute ('AreaId')) // 900
Viele Anfänger fallen wahrscheinlich leicht in diese Grube.
Einige gemeinsame Attributknoten von DOM -Elementen haben entsprechende Eigenschaftenattribute. Besonderes ist einige Eigenschaften mit dem Wert des Booleschen Typs, wie z. B. irgendwelche Formelemente:
Die Codekopie lautet wie folgt:
<Eingabe type = "radio" checked = "checked" id = "raido">
var radio = document.getElementById ('Radio');
console.log (radio.getAttribute ('geprüft')); // überprüft
console.log (Radio.Conted); // WAHR
Für diese speziellen Attributknoten ist nur dann der entsprechende Eigenschaftswert wahr, wie beispielsweise der entsprechende Eigenschaftswert ist:
Die Codekopie lautet wie folgt:
<Eingabe type = "radio" checked = "Anything" id = "raido">
var radio = document.getElementById ('Radio');
console.log (radio.getAttribute ('geprüft')); // irgendetwas
console.log (Radio.Conted); // WAHR
Um zwischen Attribut und Eigenschaft besser zu unterscheiden, kann es schließlich zusammengefasst werden, dass Attributknoten im HTML-Code sichtbar sind und Eigenschaft nur ein normales Attribut für Namenswerten ist.
Die Codekopie lautet wie folgt:
// Sowohl GameId als auch ID sind Attributknoten
// Die ID kann auch über die Eigenschaft zugegriffen und geändert werden
<div GameId = "880" id = "box"> Hallo </div>
// AreaId ist nur Eigentum
Elem.Areaid = 900;