Knoteneigenschaften: Typ, Tag und Inhalt

Die Beherrschung des Document Object Model (DOM) ist für jeden Webentwickler, der Webseiten dynamisch manipulieren möchte, unerlässlich. Dieser Artikel geht tief in die Kernaspekte der DOM-Knoteneigenschaften ein und bietet praktische Codebeispiele, um Ihre JavaScript-Programmierkenntnisse zu verbessern.

Knotentypen und -namen verstehen

In JavaScript besteht der DOM-Baum aus Knoten verschiedener Typen. Jeder Knoten im Dokument ist ein Objekt, das einen Teil des Dokuments darstellt. Knoten können Elementknoten, Textknoten, Attributknoten usw. sein. Hier ist eine kurze Übersicht:

• Elementknoten: Stellen HTML- oder XML-Tags dar.
• Textknoten: Enthalten den Text innerhalb von HTML-Elementen.
• Attributknoten: Attribute von HTML-Elementen (werden im modernen JavaScript-DOM nicht direkt verwendet).

Knotentypen

Dieses Code-Snippet hilft Ihnen, den Typ eines Knotens zu bestimmen, was entscheidend ist, wenn Sie den DOM durchlaufen und Entscheidungen basierend auf den Knotentypen treffen müssen. Die Eigenschaft nodeType ist eine ganze Zahl. Jeder Knotentyp ist gemäß der DOM-Spezifikation einem bestimmten numerischen Wert zugeordnet. Hier sind die am häufigsten verwendeten Knotentypen:

• Elementknoten: Dargestellt durch die Zahl 1. Dieser Typ entspricht HTML- oder XML-Elementen.
• Attributknoten: Dargestellt durch die Zahl 2. Diese Knoten werden verwendet, um Attribute von Elementen zu definieren, wobei modernes JavaScript typischerweise direkt über Methoden wie getAttribute() und setAttribute() mit Attributen interagiert, anstatt sie als Knoten zu behandeln.
• Textknoten: Dargestellt durch die Zahl 3. Dies sind die Textelemente, die in Dokumentelementen enthalten sind. Textknoten können tatsächlichen Text enthalten und sind entscheidend für die Manipulation des Textinhalts des HTML-Dokuments.
• Kommentarknoten: Dargestellt durch die Zahl 8. Diese Knoten stellen Kommentare in HTML- oder XML-Dateien dar.
• Dokumentknoten: Dargestellt durch die Zahl 9. Dieser Knotentyp repräsentiert das gesamte Dokument (d. h. das Wurzelelement, wie das HTML-Dokument selbst).

---

<div id="example">Example node</div>
<script>
    const node = document.getElementById("example");
    node.innerHTML = 'Node type is: ' + node.nodeType;
</script>

Result

Try it Yourself »

Knotennamen

Dieses Beispiel zeigt, wie nodeName verwendet wird. Es ist eine Eigenschaft, die den Namen des Tags anzeigt, den Sie in Ihrer HTML-Datei verwenden.

---

<div id="example"></div>
<script>
    const element = document.getElementById('example');
    element.innerHTML = 'nodeName: ' + element.nodeName;
</script>

Result

Try it Yourself »

Textinhalte manipulieren

Das Ändern des Textinhalts von Knoten ist eine häufige Aufgabe. Die Eigenschaft textContent ist eine leistungsstarke Methode, um den Textinhalt eines Knotens und seiner Nachkommen zu erhalten oder festzulegen, wobei HTML-Tags ignoriert werden.

Codebeispiel: Aktualisieren des Textinhalts

Dieses Skript zeigt, wie der Textinhalt eines Elements mit textContent aktualisiert wird:

---

<div id="example"></div>
<script>
  const element = document.getElementById('example');
  element.textContent = 'Updated text content';
</script>

Result

Try it Yourself »

Fazit

Das Verständnis und die Manipulation von DOM-Knoteneigenschaften sind eine grundlegende Fähigkeit für jeden JavaScript-Entwickler. Durch das Erlernen der richtigen Verwendung von Eigenschaften wie nodeName und textContent können Sie die Elemente auf Ihren Webseiten effektiv verwalten. Diese Beispiele bieten eine solide Grundlage für die Ausführung häufiger Aufgaben im Zusammenhang mit DOM-Knoten.

Praxis

Was gibt die Eigenschaft 'nodeType' in einem DOM-Knoten in JavaScript an?

'nodeType' gibt an, ob der Knoten ein Element-, Attribut- oder Textknoten ist.'nodeType' liefert den Klassennamen des Knotens.'nodeType' ist ein numerischer Wert, wobei 1 einen Elementknoten und 3 einen Textknoten darstellt.'nodeType' gibt an, ob der Knoten im Dokument sichtbar ist.