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)

HTML Aufbau als Baum 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 >>