Detaillierte Erläuterung des Unterschieds zwischen Attribut und Eigenschaft in JavaScript_Grundkenntnisse

Die Attribute und Eigenschaften von DOM-Elementen werden leicht miteinander verwechselt und können nicht klar unterschieden werden. Es handelt sich um verschiedene Dinge, die jedoch eng miteinander verbunden sind. Viele unerfahrene Freunde, darunter auch ich in der Vergangenheit, sind oft verwirrt.

Attribut wird in chinesische Begriffe als „Merkmale“ übersetzt, und Eigenschaft wird in chinesische Begriffe als „Attribute“ übersetzt. Von der wörtlichen Bedeutung im Chinesischen gibt es tatsächlich einen kleinen Unterschied.

Attribut ist ein Attributknoten, um alle Attributknoten zu speichern. Kurz gesagt, es ist ein Array. wie ein Container, aber es ist nicht derselbe Container wie ein Array. Jeder numerische Attributindex speichert einen Attributknoten in Form eines Name-Wert-Paares (name="value").

Code kopieren Der Code lautet wie folgt:

hello

Der HTML-Code des obigen div-Elements enthält Klasse, ID und benutzerdefinierte Gameid. Diese Merkmale werden in Attributen gespeichert, ähnlich der folgenden Form:

Code kopieren Der Code lautet wie folgt:

[ class="box", id="box", gameid ="880 " ]

Sie können wie folgt auf den Attributknoten zugreifen:

Kopieren Sie den CodeDer Code ist wie folgt:

var elem = document.getElementById( 'box' );
console.log( elem.attributes[0].name ); // class
console.log ( elem.attributes[0].value ); // box

Aber IE6-7 speichert viele Dinge in Attributen und die obige Zugriffsmethode liefert andere Ergebnisse als der Standardbrowser. Um einen Attributknoten zu erhalten, verwenden Sie normalerweise direkt die getAttribute-Methode:

Kopieren Sie den Code Der Code lautet wie folgt:

console.log( elem.getAttribute('gameid') ); // 880

Um einen Attributknoten festzulegen, verwenden Sie die setAttribute-Methode. Um ihn zu löschen, verwenden Sie removeAttribute:

Code kopieren Der Code lautet wie folgt:

elem.setAttribute('testAttr', 'testVal') ;
console.log( elem.removeAttribute('gameid') ); // undefiniert

Attribute werden dynamisch aktualisiert, wenn Attributknoten hinzugefügt oder gelöscht werden.
Eigenschaft ist eine Eigenschaft. Wenn das DOM-Element als gewöhnliches Objektobjekt betrachtet wird, ist Eigenschaft eine Eigenschaft, die im Objekt in Form eines Name-Wert-Paares (name="Wert") gespeichert ist. Es ist viel einfacher, Eigenschaften hinzuzufügen und zu löschen, nicht anders als bei gewöhnlichen Objekten:

Code kopieren Der Code lautet wie folgt:

elem.gameid = 880; //
console.log( elem.gameid) hinzufügen // Holen Sie sich
löschen Sie elem.gameid // Löschen Sie

Der Grund, warum Attribute und Eigenschaften leicht miteinander verwechselt werden, liegt darin, dass viele Attributknoten auch ein entsprechendes Eigenschaftsattribut haben. Beispielsweise sind die ID und die Klasse des obigen div-Elements sowohl Attribute als auch entsprechende Eigenschaften, unabhängig davon, welches verwendet wird . Auf Methoden kann zugegriffen und diese geändert werden.

Code kopieren Der Code lautet wie folgt:

console.log( elem.getAttribute(' id') ); // box
console.log( elem.id ); // box
elem.id = 'hello';
console.log( elem.getAttribute('id') ) ; // Hallo

Bei benutzerdefinierten Attributknoten oder benutzerdefinierten Eigenschaften haben die beiden jedoch nichts miteinander zu tun.

Code kopieren Der Code 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:

Code kopieren Der Code lautet wie folgt:

console.log( elem.getAttribute('gameid') ); // 880
console.log( elem.gameid ); // 880
elem.areaid = '900';
console.log( elem.getAttribute('areaid') ) // 900

Viele unerfahrene Freunde könnten leicht in diese Grube fallen.
Einige standardmäßige gemeinsame Attributknoten von DOM-Elementen verfügen über entsprechende Eigenschaftsattribute. Einige Eigenschaften haben einen booleschen Typ, z. B. einige Formularelemente:

Code kopieren Der Code lautet wie folgt:

var radio = document.getElementById( 'radio' );
console.log( radio.getAttribute('checked') ); // geprüft
console .log( radio.checked ); // true

Für diese speziellen Attributknoten ist der entsprechende Eigenschaftswert wahr, solange der Knoten vorhanden ist, wie zum Beispiel:

Code kopierenDer Code lautet wie folgt:

var radio = document.getElementById( 'radio' );
console.log( radio.getAttribute('checked') ); // irgendetwas
console.log( radio.checked ); // true

Um Attribut und Eigenschaft besser unterscheiden zu können, lässt sich abschließend grundsätzlich zusammenfassen, dass Attributknoten im HTML-Code sichtbar sind, während Eigenschaft nur ein gewöhnliches Name-Wert-Paar-Attribut ist.

Code kopieren Der Code lautet wie folgt:

// gameid und id sind beide Attributknoten
//Auf die ID kann auch über die Eigenschaft zugegriffen und diese geändert werden

hello

// areaid ist nur eine Eigenschaft
elem.areaid = 900;