Detaillierte Einführung in den Unterschied zwischen Eigenschaften und Attributen in JavaScript_Grundkenntnisse

1. Definition

Eigenschaft: Attribut. Der Typ HTMLElement erbt direkt von Element und fügt einige Attribute hinzu, die den folgenden fünf Standardmerkmalen jedes HTML-Elements entsprechen. dir, Klassenname. Ein DOM-Knoten ist ein Objekt und kann daher wie andere JavaScript-Objekte benutzerdefinierte Eigenschaften und Methoden hinzufügen. Der Wert der Eigenschaft kann ein beliebiger Datentyp sein und unterscheidet zwischen Groß- und Kleinschreibung. Benutzerdefinierte Eigenschaften werden nicht im HTML-Code angezeigt, sondern sind nur in js vorhanden.

Attribut: Attribut, anders als Attribut, Attribut kann nur eine Zeichenfolge sein, Groß-/Kleinschreibung wird nicht beachtet, erscheint in innerHTML, alle Attribute können über die Klassenarray-Attribute aufgelistet werden.

2. Ähnlichkeiten

Standard-DOM-Eigenschaften und -Attribute werden synchronisiert. Erkannte (nicht benutzerdefinierte) Eigenschaften werden DOM-Objekten in Form von Attributen hinzugefügt. Zum Beispiel ID, Ausrichtung, Stil usw. Zu diesem Zeitpunkt können Sie die Eigenschaft bedienen oder die DOM-Methode zum Bedienen von Merkmalen wie getAttribute () verwenden, um das Attribut zu bedienen. Der an getAttribute() übergebene Attributname ist jedoch derselbe wie der tatsächliche Attributname. Daher muss „class“ übergeben werden, wenn der Attributwert der Klasse abgerufen wird.

3. Unterschiede

1). Bei einigen Standard-Feature-Operationen gibt es Unterschiede in den von getAttribute und dem Punkt (.) erhaltenen Werten. Wie href, src, value, style, onclick und andere Event-Handler.
2).href: getAttribute ruft den tatsächlichen Wert von href ab, während der Punkt die vollständige URL abruft, daher gibt es Browserunterschiede.

Code kopieren Der Code lautet wie folgt:

<script><br>       var a = document.body.children[0]<br> a.href = '/'<br> alarm( 'attribute:' a.getAttribute('href') ) // '/'<br> alarm( 'property:' a.href ) // IE: '/', andere: vollständige URL<br> </script>

Das Abrufen des Werts von src erfolgt ähnlich wie bei href, der IE gibt jedoch auch die vollständige URL zurück Der Wert verfügt außerdem über einige integrierte Eigenschaften für die unidirektionale Synchronisierung.
Beispielsweise wird input.value vom Attribut synchronisiert (d. h. die Eigenschaft wird vom Attribut synchronisiert)

Code kopieren Der Code lautet wie folgt:

<script><br>       var input = document.body.children[0];<br> ​​​​ input.setAttribute('value', 'new');<br> alarm( input.value ); // 'new', input.value geändert<br> alarm( input.getAtrribute(value) ); // 'new'<br> </script>

Das Attribut kann jedoch nicht von der Eigenschaft synchronisiert werden:

Code kopieren Der Code lautet wie folgt:

<script><br>         var input = document.body.children[0];<br> ​​​​ input.value = 'new';<br> Alert(input.getAttribute('value')); // 'Markup', nicht geändert!<br> </script>

getAttribute ruft den Anfangswert ab, während der Punkt den Anfangswert oder den geänderten Wert von .value erhält. Wenn der Besucher beispielsweise bestimmte Zeichen eingibt, behält das Attribut „value“ den ursprünglichen Wert bei, nachdem die Eigenschaft aktualisiert wurde. Mit dem Originalwert kann überprüft werden, ob sich die Eingabe geändert hat, bzw. zurückgesetzt werden.

Bei Ereignishandlern wie style und onclick gibt die getAttribute-Methode beim Zugriff eine Zeichenfolge zurück, und der Punkt gibt die entsprechende Objekt- und Ereignisbehandlungsfunktion zurück.

Für das geprüfte Attribut in der Eingabe

Code kopieren Der Code lautet wie folgt:

<script><br> var input = document.body.children[0]<br> alarm( input.checked ) // true<br> alarm( input.getAttribute('checked') ) // leere Zeichenfolge<br> </script>

getAttribute ruft den Wert ab, den Sie tatsächlich festgelegt haben. Der Punkt gibt einen booleschen Wert zurück.

Unterschiede in der Browserkompatibilität

1. In IE 2. IE

Code kopieren Der Code lautet wie folgt:

document.body.abba = 1 // Eigenschaft zuweisen (kann jetzt von getAttribute gelesen werden)
document.body.ABBA = 5 // Eigenschaft mit einem anderen Fall zuweisen
// muss eine Eigenschaft namens „ABba“ ohne Berücksichtigung der Groß-/Kleinschreibung erhalten.
alarm( document.body.getAttribute('ABba') ) // 1

Immobilie bevorzugen

In tatsächlichen Anwendungen verwenden 98 % der DOM-Vorgänge Eigenschaften.
Es gibt nur zwei Situationen, in denen Sie Attribute verwenden müssen

1. Passen Sie die HTML-Attribute an, da sie nicht mit den DOM-Eigenschaften synchronisiert sind.
2. Greifen Sie auf integrierte HTML-Attribute zu, die nicht über Eigenschaften synchronisiert werden können. Beispielsweise der Wert des INPUT-Tags.