Attribute und Eigenschaften

Um JavaScript sicher 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 Baum von Objekten dar, was Programmiersprachen wie JavaScript ermöglicht, mit dem Inhalt, dem Stil und der Struktur der Seite zu interagieren. Jedes Element im HTML-Dokument wird im DOM als Objekt abgebildet, und diese Objekte verfügen über Eigenschaften und Attribute, die mit JavaScript manipuliert werden können.

Unterschiede zwischen Attributen und Eigenschaften

Obwohl die Begriffe „Attribute“ und „Eigenschaften“ oft 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: Dies sind die Merkmale von DOM-Objekten, die HTML-Elemente repräsentieren. Eigenschaften können jeden Datentyp haben, wie Boolean, String oder Number, und werden direkt über die Punkt-Notation abgerufen.

Hinweis zur Synchronisierung: Bei bestimmten Attributen (wie class, id, value und checked) führen Änderungen am Attribut automatisch zu einer Aktualisierung der entsprechenden Eigenschaft und umgekehrt. Diese Zwei-Wege-Synchronisierung ist jedoch nicht für alle Attribute garantiert.

Codebeispiel: Abrufen von Attributen und Eigenschaften

---

<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>

Result

Try it Yourself »

Manipulieren von DOM-Elementen

Das Verständnis, wie DOM-Elemente manipuliert werden, ist entscheidend für die dynamische Webentwicklung. JavaScript bietet mehrere Methoden, um sowohl mit Attributen als auch mit Eigenschaften zu interagieren.

Festlegen von Attributen

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

Codebeispiel: Festlegen von Attributen

---

<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>

Result

Try it Yourself »

Dieses Code-Snippet ändert das class-Attribut des div-Elements in „changed“.

Entfernen von Attributen

Um ein Attribut vollständig aus einem HTML-Element zu entfernen, verwenden Sie die Methode removeAttribute(). Dies ist nützlich, wenn Sie ein Element von einem bestimmten, durch ein Attribut definierten Verhalten oder Stil befreien möchten.

Beispiel:demoElement.removeAttribute("class");

Neuzuweisen von Eigenschaften

Eigenschaften von DOM-Elementen können direkt über die Punkt-Notation einfach neu zugewiesen werden, was eine flexiblere Manipulation der Merkmale des Elements ermöglicht.

Codebeispiel: Ändern von Eigenschaften

---

<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>

Result

Try it Yourself »

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

Benutzerdefinierte Datenattribute

Entwickler können zudem benutzerdefinierte Datenattribute mit dem Präfix data- definieren, was besonders nützlich ist, um zusätzliche Informationen zu speichern, die keine visuelle Darstellung haben.

Codebeispiel: Benutzerdefinierte Datenattribute

---

<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>

Result

Try it Yourself »

Fazit

Das Verständnis und die effektive Nutzung der Attribute und Eigenschaften des DOM können Ihre Fähigkeiten als JavaScript-Entwickler erheblich verbessern. Durch die Beherrschung dieser Konzepte können Sie Elemente von Webseiten dynamisch manipulieren und reichhaltigere, interaktivere Webanwendungen erstellen. Dieses Wissen ist für jeden Entwickler, der in der Webentwicklung vorankommen möchte, von entscheidender Bedeutung.

Praxis

Welche Aussagen beschreiben die Unterschiede zwischen Attributen und Eigenschaften im DOM genau, wie sie im JavaScript-Tutorial erklärt werden?

Attribute sind im HTML definiert und können nur Strings sein, während Eigenschaften JavaScript-Darstellungen dieser Attribute sind und jeden Typ haben können.Die Methode `getAttribute()` kann jeden HTML-Attributwert als String abrufen, während der direkte Zugriff auf die Eigenschaft das Attribut in seinem ursprünglichen Typ zurückgeben kann.Attribute im DOM können sowohl Strings als auch andere Typen sein, ähnlich wie Eigenschaften.Alle Eigenschaften des DOM-Objekts synchronisieren sich automatisch mit ihren entsprechenden Attributen, wenn eines von beiden geändert wird.Die Verwendung von `setAttribute()`, um ein DOM-Element-Attribut zu ändern, aktualisiert automatisch die entsprechende Eigenschaft, falls sie vorhanden ist.