Document Object Model manipulieren mit Javascript – Wie manipuliert man das DOM mit Javascript

Der Knotenpunkt-Baum (DOM-Tree) des Document Object Model

DOM steht kurz für Document Object Model.

Wenn der HTML-Parser (analysiert) die Seite in die DOM-Struktur zerlegt und schliesslich den Inhalt anzeigt in einer Bildsynthese (rendern), entsteht ein Baum von Objekten mit Knotenpunkten. Es kann also mit der client-seitigen Skript-Sprache Javascript die Knotenpunkte(Objekte) verändert, gelöscht, Elemente davor und danach einfügt werden. Die Fähigkeit zur DOM-Manipulation mit Javascript ist einzigartig und sehr nützlich. Javascript läuft in allen Browsern. Mit Javascript kann sowohl der Inhalt als auch das Layout verändert werden.

Beziehung der Knotenpunkte(Objekte)

Das <html> Element ist das Kinds-Element vom Dokument und zugleich das Wurzel-Element des Dokument.

Das <head> und <body> Element sind Kinds-Elemente vom Root-Element <html>.

<title> Element ist das Kinds-Element vom <head> Element und zugleich das Elternelement von Titel-Text.

Das <h1> Element und das <a> Element sind Kinds-Element vom <body> und zugleich das Elternelement vom Title-und Link-Text.

Das <a> Element und <h1> Element sind Geschwister-Elemente.

Welche Arten von Knotenpunkten gibt es

Ein Dokumentknoten stellt die gesamte DOM-Tree dar.

Ein Dokumentfragmentknoten stellt einen Teil des DOM-Tree dar.

Ein Elementknoten entspricht einem Element in HTML .

Ein Attributknoten entspricht einem Attribut in HTML .

Ein Textknoten stellt den Textinhalt eines Elements dar.

Wie wählst du ein DOM-Element aus und manipulierst es

Mit der document.getElementById() Methode wählst du ein Element mit einer eindeutigen ID eines Elementes. Ein solche ID für ein Element kann im HTML-Code nur einmal vorkommen. Wenn du ein HTML-Element selektiert hast, kannst du den Stil oder das Attribut manipulieren oder z.B. ein Kind-oder Elternelement hinzufügen. Im Beispiel unten wird ein HTML-Event-Attribut ausgelöst mit einem Klick auf den Button. Das HTML-Attribut onclick=“myFunction()“ führt die Funktion „myFunction()“ aus. Eine Funktion ist nicht anderes als ein Block mit einem oder mehreren Statements. Mit document.getElementById(„demo“).innerHTML =new Date() wird das HTML-Element mit der eindeutigen ID <p id=’demo‘> angesprochen und mit .innerHTML wird der Inhalt des Date-Objekt angezeigt bzw. geändert.

<p id="demo">Hier wird gleich das Datum angezeigt!!!</p>

<button onclick="myFunction()">Klick mich!!!</button>

<script>
function myFunction(){
document.getElementById("demo").innerHTML = new Date();
}
</script>

Hier wird gleich das Datum angezeigt!!!

Das ganze kann auch mit document.getElementsByClassName() ausgelesen werden. Da es mehrere Klassen mit <p class=“exampleClass“> geben kann, wird das ganze in einem HTML-Collection( ähnlich Array ) gespeichert. Beim ändern der HTML-Collection wird definiert welcher input[0] -Index geändert werden soll vor der Ausgabe. Der Computer zählt immer von 0 aus hoch.

<p class="exampleClass">Hier wird gleiche eine Begrüssung angezeigt</p>
<p class="exampleClass">Was man nicht alles kann mit der DOM-Manipulation</p>

<button onclick="myFunctionExampleClass()">Klick mich!!!</button>

<script>
function myFunctionExampleClass(){
var input = document.getElementsByClassName("exampleClass");
input[0].innerHTML = "Hallo Welt";
}
</script>

Hier wird gleiche eine Begrüssung angezeigt

Was man nicht alles kann mit der DOM-Manipulation

Das ganze kann auch mit document.getElementsByTagName() ausgelesen werden. Da es mehrere Element <p> geben kann, wird das ganze in einem HTML-Collection (ähnlich Array) gespeichert. Dann wird mit .innerHTML in der HTML-Collection der input[0]-Index geändert und schliesslich Variabel inputElem ausgeben.

<p id="TagElement">Hier wird gleich mit Javascript ...</p>
<p> Was man nicht alles kann mit der DOM-Manipulation</p>

<button onclick="myFunctionExampleTag()">Klick mich!!!</button>

<script>
function myFunctionExampleTag(){
var input = document.getElementsByTagName('p');
var inputElem = input[0].innerHTML = "...die DOM manipuliert";
document.getElementById("TagElement").innerHTML = inputElem;
}
</script>

Hier wird gleich mit Javascript …

Was man nicht alles kann mit der DOM-Manipulation

Unten ein Beispiel mit dem „querySelectorAll()“. Diese Methode kann alle CSS-Style-Selektoren akzeptieren, so dass sie nach Tag, Klasse oder ID auswählen kann. Es werden wieder alle Klassen(class=“styleExample“) in einer HTML-Collection gesammelt und dann mit einer for-Schleife die Schriftfarbe gestylt. Die Schleife iteriert über die Variabel input(HTML-Collection).

<h4 class="StyleExample">Diese Überschrift wird gleich gestylt</h4>
<p class="StyleExample">Dieser Absatz wird gleich gestylt.</p> 

<button onclick="StyleAllElem()">Klick mich!!!</button>

<script>
function StyleAllElem(){
var input = document.querySelectorAll(".StyleExample");
for (let i = 0; i < input.length; i++) {
  input[i].style.color = "dodgerblue";
}
}
</script>

Diese Überschrift wird gleich gestylt

Dieser Absatz wird gleich gestylt.

Es kann auch ein Kinds-Element ans Eltern-Element angehängt werden. Zuerst erstellt man mit "document.createElement() ein neues Element. Dann erstellt man ein Text-Knoten mit "document.createTextNode()" und hängt es an das neue Element an. Zuletzt wird mit "document.getElementById().appendChild()" das neue Element ausgegeben.

<div id="oneMoreParagraph">
  <p>Welche Programmiersprachen braucht ein Frontend-Entwickler:</p>
  <p>HTML</p>
  <p>CSS</p>
</div>

<button onclick="addElement()">Was muss ein Frontend-Entwickler für Programmier-Sprachen beherrschen:</button>

<script>
function addElement() {

// Erstelle ein neues Absatz-Element:
var ErstelleNeuesElement = document.createElement("p");

// Erstelle den Text-Knoten:
var TextKnoten = document.createTextNode("Javascript und .....");

// Hänge den Text-Knoten an den Paragraph:
ErstelleNeuesElement.appendChild(TextKnoten);

// Hänge den "p" -Knoten ans "div":
document.getElementById("oneMoreParagraph").appendChild(ErstelleNeuesElement);
}
</script>

Welche Programmiersprachen braucht ein Frontend-Entwickler:

HTML

CSS

Zuerst wird wieder mit document.getElementById() .children[0] das erste Kinds-Element ausgelesen. Dann wird ein neuer Text-Knoten() in einer Variabel gespeichert. Anschliessend wird mit einem replace der alte mit dem neuen Text-Knoten ersetzt.

<h4>Welche Programmiersprachen braucht ein Frontend-Entwickler:</h4>
<div id="ComputerLanguage">
  <p>Javascript</p>
  <p>CSS</p>
  <p>HTML</p>
</div>

<button onclick="replaceElement()">Was muss ein Frontend-Entwickler für Programmier-Sprachen beherrschen:</button>

<script>
function replaceElement() {
// Wähle das erste Kinds-Element:
var element = document.getElementById("ComputerLanguage").children[0];

// Erstelle Text-Knoten:
var neuerTextKnoten = document.createTextNode("jQuery");

// Ersetze den Text-Knoten:
element.replaceChild(neuerTextKnoten, element.childNodes[0]);
}
</script>

Welche Programmiersprachen braucht ein Frontend-Entwickler:

Javascript

CSS

HTML

Auch hier wird zuerst wieder ausgelesen mit document.getElementById() und die HTML-Collection in einer Variabel und schliesslich mit " ... .removeChild()... .firstElementChild " das erste Element entfernt.

<h4>Welche Programmiersprachen braucht ein Frontend-Entwickler:</h4>
<div id="removeLanguage">
  <p>C++</p>
  <p>Javascript</p>
  <p>CSS</p>
  <p>HTML</p>
</div>

<button onclick="removeElement()">Was muss ein Frontend-Entwickler für Programmier-Sprachen beherrschen:</button>

<script>
function removeElement() {
  var liste = document.getElementById("removeLanguage");
  liste.removeChild(liste.firstElementChild);
}
</script>

Welche Programmiersprachen braucht ein Frontend-Entwickler:

C++

Javascript

CSS

HTML