JavaScript DOM-Manipulation

Von Ivan Georgiev 04-11-2020 Entwicklergedanken, Programmierung 11 Minuten

Hast du schon mal irgendwann versucht, eine bestimmte Funktionalität dafür einzurichten, wenn jemand auf einen Button auf deiner Website klickt? Oder müssen deine Website-Besucher mit Formularen interagieren?

Ein HTML-Skript ist dann eher ungeeignet, da es statisch ist und wenig Funktionalität besitzt. HTML allein kann Elemente nicht so anpassen, dass sie bestimmte Bedingungen erfüllen oder interaktiv sind. Um eine wirklich interaktive und dynamische Webseite zu entwickeln, brauchen wir das DOM.

Was ist DOM?

Das Document Object Model (DOM) ist eine Programmierschnittstelle für HTML- und XML-Dokumente. JavaScript DOM ist die API, über die JavaScript mit statischen HTML-Elementen kommuniziert und sie dadurch funktionaler macht.
Das DOM ist eine baumähnliche Form des Inhalts einer Webseite mit Nodes bzw. Knoten anstelle von Elementen. Diese Nodes repräsentieren HTML-Elemente, die manipuliert und neu gerendert werden können. Bei DOM fungieren Nodes als Objekte, die Zugang zu Programmiersprachen wie JavaScript zum Ändern, Erstellen, Löschen, Entfernen und Verwenden von HTML-Elementen ermöglichen.

DOM ist ein Standard des W3C (World Wide Web Consortium). Die W3C-Spezifikationen unterstützen es für HTML/CSS und ECMAScript für JavaScript. Es läuft auf allen gängigen Browsern und unterstützt Cross-Browser-Kompatibilität, die nur sehr kleine Unterschiede aufweisen.

Zugang zum DOM

Das DOM ist hierarchisch aufgebaut und folgt einer logischen, baumähnlichen Struktur, bei der Child-Nodes in Parent-Nodes enthalten sind. Diese Anordnung ergibt sich aus der HTML-Syntaxstruktur, bei der Elemente ineinander eingebettet sind. Diese beginnt mit dem <DOCTYPE html>-Tag - dem übergreifenden Parent-Tag des HTML-Dokuments, der alle anderen HTML-Tags und Elemente enthält.
Alle DOM-Aktionen beginnen ganz oben in der Dokumentdatei. Dies ist die erste Ebene des Zugangs. Dann arbeitet es sich nach unten zu anderen Node-Punkten vor und manipuliert sie gemäß den Anweisungen.

Dieses HTML-Beispiel

<DOCTYPE html> 
  <head>
    <title>Html document</title>
    <meta charset="utf-8">
  </head> 
  <body>
    <div>
      <p>This is a paragraph</p>
      <img src="img1.png" alt="img1">
      <ul>
        <li>List one</li>
        <li>List two</li>
      </ul>
    </div>
  </body>
</html>

kann so in einer DOM-Struktur wie folgt visualisiert werden:

Die Elemente des DOM erklärt

Folgend findest du HTML-Elemente, die als Node umstrukturiert werden können. Wir können jedes Node-Objekt nach seiner Position in der Struktur und seiner Beziehung zu anderen Node zergliedern. Beachte, dass sich diese Positionen und Beziehungen je nach der vom Entwickler geschriebenen HTML-Struktur ändern.

Der Root Node: Der Root Node ist der <Doctype html> - typisch für alle html-Dokumente.
Der Parent Node: Der Parent Node ist ein Node mit einem Child-Node oder mehreren Child-Notes. Dieser Node ist ein direkter Vorgänger eines jeden folgenden Nodes. Zum Beispiel ist der Body der Parent-Node von div. Ul ist der Elternknoten von li.
Child Node: Child-Nodes sind Nodes oder Elemente, die innerhalb eines Parent Nodes untergebracht sind. Zum Beispiel, "<li>" ist der Child Node von "<ul>".
Sibling Node: Das sind Nodes auf der gleichen Ebene. Die beiden li sind Siblings (Geschwister). Meta und Titel sind ebenfalls Siblings.
Nachkommen-Nodes: Hierbei handelt es sich um Node-Objekte, die von einem Node der obersten Ebene übernommen wurden. Alle Nodes, die in einem bestimmten Node verschachtelt sind, sind ein Nachkomme dieses Nodes. P ist ein Abkömmling des Bodys. So wie ul, img, li und div.

Wenn du mit DOM arbeitest, sind bestimmte Aktionen nötig, um bestimmte Node-Objekte anzusprechen. Diese Aktionen werden Methoden genannt, und ihnen sind Eigenschaften zugeordnet. Abgesehen von Methoden hat JavaScript auch Ereignisse, die an Node-Objekte angehängt sind. HTML DOM bietet viele Prozeduren, die verschiedene Operationen auf Elemente ausführen. Schauen wir uns einige DOM-Dokumentmethoden an.

QuerySelector()

Die querySelector()-Methode gibt nur das erste Child-Element zurück, das mit einem bestimmten CSS-Kurs, einer ID, einem Namen oder einem Tag übereinstimmt.

<html> 
  <body> 
    <p>This is paragraph one</p> 
    <p>This is paragraph two</p> 
    
    <button onclick="func();">Click me</button> 
 
    <script>
      function func(){ 
        let n = document.querySelector("p").innerHTML = "This is query selector"; 
      } 
   </script>
  </body>
</html>

Wenn du auf den Button klickst, ändert sich die erste Instanz von <p>, die "Dies ist Absatz eins" ist, in "Dies ist der Abfrageselektor".

QuerySelectorAll()

Dies ändert alle Instanzen des angegebenen CSS-Selektors.

<html> 
  <body> 
    <p class="para"> This is paragraph one </p> 
    <p class="para"> This is paragraph two </p> 
    
    <button onclick="func();">Click me</button> 
 
    <script> 
      function func(){ 
        let n = document.querySelectorAll(".para").innerHTML = "This is a query selector"; 
      } 
   </script> 
 </body>
</html>

Beide ABsätze ändern sich zu "Dies ist der Abfrageselektor".

document.getElementByID

Diese Methode ist eine spezielle Methode, welche auf die Elemente der angegebenen IDs abzielt. Du musst diese IDs innerhalb des HTMLs definieren. Im Gegensatz zu querySelectors(), die den Namen, den Tag, die ID oder den Kurs übernehmen können, ist document.getElementById nur für IDs spezifisch und muss das Zeichen hashtag (#) tragen.

<p>This is not a selected id</p> 
<p id="new"> This is a selected id </p>

<button onclick="func();">Click me</button> 

<script> 
  function func(){ 
    let n = document.getElementById("#new"); 
    n.style.color = "purple";
  } 
</script>

Der Text des Absatzes mit der Id 'new' ändert sich in lila.

document.getElementsByClassName

Die Elemente werden mit ihren Class-Names angesprochen. Ein als Element kann über die Class-Names angesprochen werden.

<p class="new"> This is a selected id </p> 

<script> 
  let n = document.getElementsByClassName("#new");
</script>

Dasselbe gilt für getDocumentByTagName. Dies zielt auf Elemente unter Verwendung ihres Elementnamens ab.

<p> This is a selected id </p>

<script> 
  let n = document.getElementByTagName(p); 
</script>

innerHTML

Das innerHTML modifiziert den Inhalt eines html-Elements.

<p id="new"> This is a paragraph </p> 

<script>
  let a = document.getElementById("new").innerHTML = "This is now an innerHTML" 
</script>

Methoden zum Hinzufügen und Entfernen von Elementen

Die Methoden appendChild(), insertBefore() und createElement() sind separate Methoden, gehören aber normalerweise zusammen.
Die createElement() Methode erzeugt einen neuen Elementknoten, der nicht auf das DOM-Dokument reflektiert. appendChild() oder insertBefore() wird benutzt, um es dem Dokument hinzuzufügen - deshalb arbeiten sie normalerweise zusammen. insertBefore fügt einen Node als Child-Element hinzu, direkt vor dem angegebenen Element, während appendChild einen Node als letztes Child anhängt, nach dem angegebenen Element.

<p>Click the button to create a text in h1 <p> 

<button onclick="myFunction()">Try it</button> 

<script> 
  function myFunction() { 
    var btn = document.createElement("h1"); 
    document.body.appendChild(btn).innerHTML = "This!";
} 
</script>

removeChild() und replaceChild()

Das removeChild() entfernt einen bestimmten Child Node, während das replaceChild() den angegebenen Child Node durch einen anderen Node ersetzt. Der removeChild wird auf dem DOM nicht mehr unterstützt, obwohl er auf modernen Browsern immer noch funktioniert. Mit node.removeChild() entfernte Nodes können mit den Methoden importNode() oder adoptNode() in ein anderes Dokument eingefügt werden. Um sie im selben Dokument zu verwenden, kann appendChild() oder insertBefore() verwendet werden.

CSS-Eigenschaften mit der .style-Methode gestalten

Neben HTML-Elementen können Javascript-DOM-Manipulationen an CSS mit der .style-Methode durchgeführt werden. Die Syntax dafür ist recht einfach. Der Variablenname steht vor dem .style Keyword, gefolgt von der .cssProperty. Die .style-Methode unterstützt die meisten CSS3-Eigenschaften. CSS-Eigenschaften, die durch einen Bindestrich (-) getrennt sind, wie Hintergrundfarbe und Textausrichtung, werden bei der .style-Methode in camelCase geschrieben. Aus Hintergrundfarbe wird backgroundColor.

Du kannst die .style-Methode für fortgeschrittene CSS3-Eigenschaften wie Animation verwenden.

<div> Div</div> 

<button onclick = "func();">click </button> 

<script> 
  function func(){  
    let div = document.querySelector("div");
    div.style.border = "5px solid yellow"; 
    div.style.backgroundColor = "purple"; 
    div.style.color = "white";
    div.style.height = "200px"; 
    div.style.width = "200px"; 
  } 
</script>

Bildobjekte mit DOM manipulieren

Bilder können mit DOM mit den bereits besprochenen DOM-Methoden erstellt, gestaltet oder verändert werden. Du kannst das src, width, alt und height und andere Eigenschaften des BIldes mit der setAttribute()-Methode festlegen.

<div class="container"> 

<button onclick="myFunction()">Try it</button> 

<script>
  function myFunction(){ 
    const image = document.createElement("img"); 
    image.setAttribute("src", "https://s23444.pcdn.co/wp-content/uploads/2020/01/Africa-general-pic.jpg.optimal.jpg"); 
    image.setAttribute("height", "500") 
    document.querySelector(".container").appendChild(image) 
  } 
</script>

Event Listener

HTML DOM-Dokument erlaubt einen Auslöser auf einer Seite, wenn ein Code ausgeführt wird. Dieser Auslöser wird Event genannt. Er ist normalerweise an eine Funktion angehängt und wird ausgeführt, wenn die Funktion aufgerufen wird. Dieser Auslöser kann beim Drücken einer Taste, beim Laden einer Seite oder bei der Eingabe von Daten in Webformularfeldern auftreten.
Das Javascript-DOM erlaubt auch verschiedene Aktionen mit HTML-Elementen, die mit der addeventlistener()-Funktion ausgeführt werden. Onclick, onmouseover, ondrag, onload, onchange, onmouseout und onkeydown sind einige der üblichen Ereignisse in Javascript. Sie sind Auslöser, die auftreten, wenn ein Element angeklickt, mit der Maus bewegt, gezogen, beim Laden einer Seite, beim Elementwechsel, beim Wegbewegen der Maus von diesem Element oder beim Drücken einer Taste auf der Tastatur betätigt wird. Es gibt viele weitere Javascript-DOM-Objekt-Ereignisse, die an die addeventlistener()-Funktion angehängt werden können. Du kannst sie dir hier mal auf der W3School ansehen.
Die Verwendung von Eventlistenern ist beim Schreiben von HTML-DOM-Events sehr zu empfehlen. Sie sind besser lesbar, überschreiben bestehende Events nicht und erlauben es, mehrere Events desselben Typs zu einem Element hinzuzufügen.

Das folgende Beispiel ist ein einfacher Weg, wie man addEventListener benutzen kann.

<div id="new">This is an example of an an event listener</div> 

<button id="clickhere">click</button>

<script> 
  button = document.getElementById("clickhere"); 
  button.addEventListener("click", func); 
  function func(){ 
    document.querySelector('div').style.color = "red"; 
  } 
</script>

Der Klick in ("click", func) ist das Ereignis, das der Eventlistener verarbeiten muss. Mouseout, ondrag oder jedes andere Ereignis könnte anstelle von click geschrieben werden; func() ist der Name der Funktion, die an die Methode addEventListener() angehängt ist.

Um ein Ereignis aus einem Element zu entfernen, kannst du die removeEventListener()-Methode verwenden, um dieses Ereignis aus dem Element auszuschließen.

Abschließende Worte

Abgesehen von den hier erwähnten Methoden unterstützt die W3C-Spezifikation über hundert DOM-Stile, Methoden, Ereignisse, Dokumente und Ereignisobjekte. Interessanterweise ist die JavaScript-DOM-Manipulation zwar unter Webentwicklern recht beliebt, jedoch wurde das DOM so gestaltet, dass es auch von anderen Sprachen und Bibliotheken implementiert werden kann. So ist zum Beispiel JQuery eine beliebte Bibliothek, die zur Ausführung von Methoden verwendet wird.
Python und Java haben eine offizielle Dokumentation und API-Parser zu transversalen DOM-Nodes und erzeugen entsprechende DOM-Objekte.
In der modernen Softwareentwicklung nutzen Programmierer viele der JavaScript Frameworks, um die DOM-Nutzung zu vereinheitlichen und fortgeschrittene Funktionalitäten zu standardisieren.

JavaScript DOM-Manipulation