Methoden und Eigenschaften

(Methods and Properties)

Zum Testdokument, bitte die JavaScript-Console des Browsers benutzen.

Aufgaben

Den Inhalt des Elements einer bestimmt ID (id="headline") anzeigen und ändern

Methode: document.getElementById("headline")

Eigenschaft: innerHTML

Befehl: document.getElementById("headline").innerHTML = "Guten Abend!";

Den Inhalt mehrerer Elemente anzeigen

Methode: document.getElementsByTagName("p");

Methode: document.getElementsByClassName("hellblau");

Das Aussehen eines Elements ändern

Methode: document.getElementById("headline").setAttribute("class", "hellrot");

Ein p-Element einfügen

var para = document.createElement("h4");

var node = document.createTextNode("Das ist eine neu hinzugefügte h4-Überschrift.");

para.appendChild(node);

var element = document.getElementById("wrapper");

element.appendChild(para);

para.setAttribute("id", "new")

Ein Element entfernen

Es ist nötig, das Eltern-Element zu identifizieren, bevor ein Kind-Element entfernt werden kann.

var child = document.getElementById("wrapper");

child.parentNode.removeChild(child);

Einen Event entgegennehmen

Innerhalb des HTML-Elements wird ein gewöhnlicher HTML-Event oder ein DOM-Event genutzt.

HTML-Events: https://www.w3schools.com/js/js_events.asp

DOM-Events: https://www.w3schools.com/jsref/dom_obj_event.asp