Lektion 3: HTML-Manipulation I

Angelehnt an das W3C Tutorial: Einführung.

Datei zur Lektion: lektion_3.zip

Die wichtigste Funktion von JavaScript ist die Modifizierung einer HTML-Seite. Es können Elemente (bspw. <h1>-Tags) hinzugefügt, verändert oder gelöscht werden. In einem Element können der Inhalt, ein Attribut (Eigenschaft) oder das Aussehen (CSS) verändert werden.

HTML-Auffrischung

Um mit JavaScript richtig Arbeiten zu können, ist es notwendig ein wenig von HTML und CSS zu verstehen. Darum eine kleine Auffrischung und Begriffserklärung.

Begriffe eines HTML-Elements

Ein HTML-Element ist folgendermaßen aufgebaut:

<a href="index.html" id="important" style="color: #f00;">Hello World</a>

<a … ></a>
HTML-Element (<a>-Tag)
href
href-Attribut mit dem Wert „index.html“
id
id-Attribut (Wichtig: Eindeutig auf einer Website)
style
style-Attribut mit CSS-Anweisung
„Hello World“
Inhalt des <a>-Tags (Können auch weitere HTML-Tags sein)

Dies Begriffe sind wichtig, da JavaScript Funktionen auf bestimmte Teile eines HTML-Elements zugreifen. The HTML DOM Element Object

Begriffe eines HTML-Dokuments

Ein HTML-Dokument hat folgenden Aufbau (nicht vollständig):

<html>
  <body>
    <div>
      <a href="index.html" id="important" style="color: #f00;">Hello World</a>
    </div>
    <p>
      Text
    </p>
  </body>
</html>

Das body-Tag ist in diesem Fall der „Elternknoten des“ div- und a-Tags (Es umschließt diese) - anders herum sind diese beiden Kindknoten vom body-Tag
Das body-Tag ist aber nur der direkte Elternknoten des div
Das div-Tag ist wiederum der direkte Elternknoten des a
Das p-Tag liegt auf der selben Ebene, wie das div-Tag (Siehe Einrückung)

Der Aufbau eines HTML-Dokuments kann auch als „Baum“ dargestellt werden

Das ist wichtig, da beim Entfernen von Kindelementen, nur direkte Kindknoten gelöscht werden können.

Inhalt eines HTML-Element verändern

Um ein HTML Element anzusprechen, muss man es in irgendeiner Weise klassifizieren und finden können. Das geht zum Beispiel über das HTML-Attribut id (Diese sollte in einer Seite eindeutig sein). Hat man das passende Element gefunden, kann man bspw. dessen Inhalt ändern.

Der Ausdruck document.getElementById(„important“).innerHTML bedeutet:

Suche im gesamten HTML-Inhalt (document)
nach einem HTML-Element mit der id „important“ (getElementById(„important“))
und hole die Inhalts-Eigenschaft (innerHTML).

Die einzelnen Ausführungsschritte werden mit einem Punkt verbunden.

// Gibt "Hello World" in der Konsole aus
console.log(document.getElementById("important").innerHTML) 
 
// Ändert "Hello World" in "Goodbye World"
document.getElementById("important").innerHTML = "Goodbye World"

document ist ein spezielles JavaScript-Objekt und wird beim laden einer HTML-Seite im Browser erzeugt. Es bildet den Wurzelknoten und ist somit der Elternknoten aller anderer HTML-Elemente. Von ihm aus lassen sich alle HTML-Element per JavaScript erreichen! (Siehe dazu: The HTML DOM Document Object)

Oberhalb von document befindet sich noch das window-Objekt. Es enthält unter anderem Informationen über das aktuelle Browser-Fenster, wie die Höhe und Breite, sowie die Historie. (Siehe dazu: The Window Object)

Einzeilige Kommentare werden mit „// ...“ ausgezeichnet, Mehrzeilige mit „/* … */“.

// Einzeiliger Kommentar
// Noch einer
 
/*
Mehr-
zeiliger
Kommentar
*/

HTML-Attribut ändern

Auch die Attribute (Eigenschaften) eines HTML-Elements können verändert werden. Attribute sind Schlüssel / Wert Paare innerhalb des öffnenden HTML Tags. Schlüssel sind bspw. src, target oder href denen mit einem „=“ in Anführungszeichen ein Wert zugewiesen wird (Sonderfälle sind id, class und style).

// Ändert das Ziel des Links auf "JS_AEG_L2.html" (Das Attribut wird verändert)
document.getElementById("important").href = "JS_AEG_L2.html"; 
 
// Linkziel wird in neuem Fenster geöffnet (Das Attribut wird neu hinzugefügt)
document.getElementById("important").target = "_blank";

Aussehen eines HTML-Elements verändern (CSS)

Besonders wichtig ist das Style-Attribut. Eine einfache Syntax ermöglicht es, das Aussehen des HTML-Elements sehr leicht zu ändern.

// Speichere in der Variablen "element" den Wert von document.getElementById("important")
var element = document.getElementById("important");
 
// Setzt die Schriftgroesse auf 25px
// Entspricht: document.getElementById("important").style.fontSize = "25px";
element.style.fontSize = "25px";
 
// Versteckt das Element (Das Element ist aber noch da!)
element.style.display = "none";
 
// Zeigt das Element wieder an
element.style.display = "block";

var gefolgt von einem Namen, deklariert eine Variable. Mit einem „=“ kann dieser ein Wert zugewiesen werden. Im normalfall wird die Variable mit einem sprechenden Namen versehen, so dass klar ist, was sie enthält.

var x = 1;
console.log(x);
// 1
 
x = 3;
console.log(x*2);
// 3 * 2 = 6
 
x = "hallo";
console.log(x);
// hallo

HTML-Element hinzufügen

Um ein Html-Element hinzuzufügen muss folgendes getan werden:

Das neue Element muss erstellt werden
createElement(„h2“)
Das Element bekommt einen Inhalt
innerHTML
Das Element braucht einen übergeordneten Knoten und wird als Kindknoten eingefügt
appendChild()

// Speichere das HTML-Element in der Variable "newElement"
var newElement = document.createElement("h2");
 
// Fülle den Inhalt von newElement mit "Hallo Neue Welt"
newElement.innerHTML = "Hallo Neue Welt";
 
// Weise newElement die id newElementId zu
newElement.id = "newElementId";
 
// Füge das neue Element unterhalb vom <body>-Tag als letztes Element ein
document.body.appendChild(newElement);

HTML-Element löschen

Im unterschied zum Ausblenden eines HTML-Elements (via CSS), kann ein Element auch komplett entfernt werden. Dazu muss es von seinem „Elternknoten“, also seinem umschließenden HTML-Element, gelöst werden.

// Speichere das Html-Element in einer Variablen "element" (Kindknoten)
var element = document.getElementById("important");
 
// Entferne Kind "element" aus dem Elter "body" 
// Funktioniert in diesem fall nur, 
// wenn das Element direkt eine Ebene unter dem body Tag liegt
document.body.removeChild(element);

Zusammenfassung

In dieser Lektion haben wir wichtige Begriffe eines HTML-Elements aufgefrischt und die Darstellungen eines HTML-Dokuments als Baum gesehen. Wir haben gelernt, wie man auf HTML-Elemente per JavaScript zugreift und diese Verändern kann.

Aufgabe

Ändere den Text des Links auf „Hallo Welt“
Ändere das Linkziel des Hello World Link auf „http://www.spiegel.de“
Füge dem Link die CSS-Eigenschaft fett hinzu
Füge dem body ein neues <p>-Element mit der id „neu“ hinzu
Lösche das neu erstellte <p>- Element wieder
Ersetze das <tt>-Tag durch ein <span>-Tag mit gleichem Inhalt
Zusatz: Ermittle die Breite und Höhe deines Browserfensters und gib sie in der Konsole aus.
Tipp: Das window-Element kann helfen.

<< Lektion 2: JavaScript Grundlagen | Lektion 4: HTML-Manipulation II - jQuery >>