Attribute und Eigenschaften

Um JavaScript zu beherrschen, muss man verstehen, wie es mit dem Document Object Model (DOM) interagiert. Dieses Tutorial behandelt DOM-Attribute und -Eigenschaften und erklärt, wie man sie liest, ändert und synchronisiert, um Webseiten dynamisch zu manipulieren.

Einführung in das DOM in JavaScript

Das DOM stellt eine Webseite als hierarchischen Objektbaum dar und ermöglicht es Programmiersprachen wie JavaScript, mit dem Inhalt, dem Stil und der Struktur der Seite zu interagieren. Jedes Element im HTML-Dokument wird als Objekt im DOM gespiegelt, und diese Objekte besitzen Eigenschaften und Attribute, die mit JavaScript manipuliert werden können.

Unterschiede zwischen Attributen und Eigenschaften

Obwohl die Begriffe „Attribute" und „Eigenschaften" häufig synonym verwendet werden, haben sie im Kontext des DOM unterschiedliche Bedeutungen:

• Attribute: Diese sind im HTML-Code definiert. Sie liefern zusätzliche Informationen über HTML-Elemente. Attribute sind immer strings und werden über Methoden wie getAttribute() und setAttribute() abgerufen.
• Eigenschaften: Das sind die Merkmale von DOM-Objekten, die HTML-Elemente repräsentieren. Eigenschaften können jeden Datentyp haben, z. B. boolean, string oder Zahl, und werden direkt über die Punktnotation abgerufen.

Kurz gesagt: Ein Attribut ist das, was man im HTML-Quellcode geschrieben hat; eine Eigenschaft ist das, was der Browser daraus geparst hat und am JavaScript-Objekt bereitstellt. Für einfache Fälle wie id sehen beide gleich aus, aber es sind zwei verschiedene Dinge.

Hinweis zur Synchronisation: Bei den meisten Standard-Attributen (wie id, class) aktualisiert das Ändern des Attributs die entsprechende Eigenschaft und umgekehrt. Die Synchronisation ist jedoch nicht überall garantiert, und einige wichtige Attribute durchbrechen sie absichtlich (siehe Wenn die Synchronisation abbricht weiter unten).

Codebeispiel: Zugriff auf Attribute und Eigenschaften

<!-- snippet: html-result -->

<div id="demo" class="sample" data-level="1">Hello, World!</div>
<br />
<div>first getAttributes result (data-level): <span id="1"></span></div>
<div>className property: <span id="2"></span></div>
<script>
  const demoElement = document.getElementById("demo");
  const span1 = document.getElementById("1");
  const span2 = document.getElementById("2");

  // Accessing an attribute
  let classAttribute = demoElement.getAttribute("data-level");  // Output: "1"
  span1.innerHTML = classAttribute;
  
  // Accessing a property
  // Note: 'class' is a reserved keyword in JS, so the property is named 'className'
  const classNameProperty = demoElement.className;  // Output: "sample"
  span2.innerHTML = classNameProperty;
</script>

Die Attribut-Methoden

Jedes Element stellt vier Standardmethoden bereit, um mit Attributen nach Name zu arbeiten. Sie operieren immer mit strings und bilden den HTML-Quellcode direkt ab:

Attributnamen sind nicht case-sensitiv (id und ID sind identisch), und jeder Wert wird als string gelesen, auch wenn er wie eine Zahl aussieht.

Attribute setzen

Verwende die Methode setAttribute(), um einem HTML-Element ein neues Attribut hinzuzufügen oder den Wert eines vorhandenen Attributs zu ändern.

Codebeispiel: Attribute setzen

<!-- snippet: html-result -->

<div id="demo" class="sample">Hello, World!</div>
<br />
<div>className property after change: <span id="span1"></span></div>
<script>
  const demoElement = document.getElementById("demo");
  const span1 = document.getElementById("span1");
  
  // Changing the attribute
  demoElement.setAttribute("class", "changed");
  // The property updates automatically due to attribute-property synchronization
  span1.innerHTML = demoElement.className;
</script>

Dieses Code-Snippet ändert das class-Attribut des div-Elements auf „changed".

Attribute entfernen

Um ein Attribut vollständig von einem HTML-Element zu entfernen, verwende die Methode removeAttribute(). Dies ist nützlich, wenn ein bestimmtes durch ein Attribut definiertes Verhalten oder ein Stil eines Elements entfernt werden soll.

Kombiniere sie mit hasAttribute(), um bedingt zu handeln:

if (demoElement.hasAttribute("disabled")) {
  demoElement.removeAttribute("disabled");
}

Eigenschaften neu zuweisen

Eigenschaften von DOM-Elementen lassen sich direkt über die Punktnotation neu zuweisen, was eine flexible Manipulation der Elementmerkmale ermöglicht.

Codebeispiel: Eigenschaften ändern

<!-- snippet: html-result -->

<div id="demo" class="sample">Hello, World!</div>
<br />
<div>className property after change: <span id="span1"></span></div>
<script>
  const demoElement = document.getElementById("demo");
  const span1 = document.getElementById("span1");

  // Changing the property
  // Note: 'class' is a reserved keyword in JS, so the property is named 'className'
  demoElement.className = "changed";
  span1.innerHTML = demoElement.className;
</script>

Dieses Beispiel ändert die className-Eigenschaft des div-Elements und zeigt, wie Eigenschaften genutzt werden können, um Elementmerkmale dynamisch zu steuern.

Wenn die Synchronisation zwischen Attribut und Eigenschaft abbricht

Die praktische Eins-zu-eins-Zuordnung hat Ausnahmen, die man kennen muss, sonst verbringt man Stunden mit der Fehlersuche.

Die value-Eigenschaft von Eingabefeldern

Das value-Attribut enthält den anfänglichen (Standard-)Wert aus dem HTML. Die value-Eigenschaft enthält den aktuellen Wert, den der Benutzer gerade eingibt. Nachdem der Benutzer das Feld bearbeitet hat, divergieren beide: Die Eigenschaft ändert sich, das Attribut nicht.

// <input id="name" value="initial">
const input = document.getElementById("name");
// user types "Alice" into the field...

input.getAttribute("value"); // "initial"  — still the HTML default
input.value;                 // "Alice"     — the live, current value

Dasselbe gilt für <input type="checkbox">: Das checked-Attribut ist der Standardzustand, die checked-Eigenschaft gibt an, ob die Checkbox gerade jetzt aktiviert ist.

Die href-Eigenschaft von Links

Bei einem <a href="/page"> gibt getAttribute("href") genau das zurück, was geschrieben wurde ("/page"), aber die href-Eigenschaft gibt die vollständig aufgelöste absolute URL zurück ("https://example.com/page").

// <a id="link" href="/page">
const link = document.getElementById("link");
link.getAttribute("href"); // "/page"
link.href;                 // "https://example.com/page"

Als Faustregel gilt: Verwende die Attribut-Methoden, wenn du den Rohwert genau so brauchst, wie er geschrieben wurde; verwende die Eigenschaft, wenn du den live-geparsten Wert des Browsers benötigst.

Boolean-Attribute

Einige HTML-Attribute — disabled, checked, required, readonly, selected — sind boolean: Ihre bloße Anwesenheit bedeutet true, unabhängig vom Wert. disabled="" und disabled="false" deaktivieren das Element gleichermaßen.

In JavaScript ist die entsprechende Eigenschaft ein echter boolean-Wert, was die sauberere Art ist, sie umzuschalten:

button.disabled = true;   // adds the attribute, disables the button
button.disabled = false;  // removes the attribute, enables it

Vermeide setAttribute("disabled", false) — da das Attribut vorhanden ist, bleibt das Element deaktiviert. Setze stattdessen die Eigenschaft.

Benutzerdefinierte Datenattribute

Entwickler können benutzerdefinierte Attribute mit dem Präfix data- definieren, was die standardisierte, zukunftssichere Methode ist, um zusätzliche Informationen an ein Element anzuhängen, ohne nicht-standardisierte Attribute zu erfinden. Sie werden über die dataset-Eigenschaft gelesen und geschrieben, nicht über getAttribute.

Die Benennung konvertiert zwischen kebab-case in HTML und camelCase in JavaScript: data-author wird zu dataset.author und data-order-status wird zu dataset.orderStatus. Man kann auch in dataset schreiben, um das zugrunde liegende data-*-Attribut zu erstellen oder zu aktualisieren.

Codebeispiel: Benutzerdefinierte Datenattribute

<!-- snippet: html-result -->

<div id="demo" data-author="Jane Doe" data-year="2022">Information Panel</div>
<br />
<div>author: <span id="1"></span></div>
<div>year: <span id="2"></span></div>
<script>
  const element = document.getElementById("demo");
  const span1 = document.getElementById("1");
  const span2 = document.getElementById("2");
  span1.innerHTML = element.dataset.author;
  span2.innerHTML = element.dataset.year;
</script>

Fazit

Ein gutes Verständnis von DOM-Attributen und -Eigenschaften ermöglicht es, Seitenelemente dynamisch zu manipulieren und reichhaltigere, interaktive Anwendungen zu entwickeln. Denke an den grundlegenden Unterschied: Attribute sind die string-Werte aus dem HTML-Quellcode, während Eigenschaften die live-getypten Werte am DOM-Objekt sind — und einige Attribute (value, href, boolean-Attribute) halten die beiden absichtlich auseinander.

Um tiefer einzusteigen, erkunde diese verwandten Kapitel:

• Das Dokument ändern — Elemente erstellen, einfügen und entfernen.
• Knoteneigenschaften: Typ, Tag und Inhalt — Elementtext und HTML lesen und ändern.
• Mit Stilen im DOM arbeiten — CSS über style und className manipulieren.

Übungen