JavaScript-Programmierung von Kopf bis Fuß

626 Anhang

Das document-Objekt

2. Mehr mit dem DOM anstellen

Ein paar Dinge, die Sie mit dem DOM anstellen können, haben wir in diesem Buch bereits behandelt.

Darüber hinaus gibt es aber noch viel zu lernen. document, das Objekt, das das Dokument in Ihrer

Seite darstellt, und die verschiedenen Element-Objekte sind randvoll mit Eigenschaften und Methoden,

die Sie zur Interaktion und Manipulation Ihrer Seite nutzen können.

Sie wissen bereits, wie man document.getElementById und document.getElementsByTagName

verwenden, um an bestimmte Elemente aus der Seite zu gelangen. Die folgenden Methoden werden

ebenfalls vom document-Objekt zur Verfügung gestellt, um auf bestimmte Seitenelemente zuzugreifen:

document.getElementsByClassName

document.getElementsByName

document.querySelector

document.querySelectorAll

Übergeben Sie dieser Methode einen Klassennamen,

und Sie erhalten alle Elemente als NodeList zurück,

die mit dieser Klasse gekennzeichnet sind.

Diese Methode gibt Elemente zurück,

deren name-Attribut dem übergebenen

Namen entspricht.

Diese Methode übernimmt einen Selektor (wie einen CSS-

Selektor) und gibt das erste passende Element zurück.

Diese Methode übernimmt ebenfalls einen Selektor,

gibt aber alle passenden Elemente als NodeList zurück.

Und so können Sie document.querySelector benutzen, um ein Listenelement mit der

Klasse »song« zu finden, das in einem <ul>-Element mit der ID »playlist« verschachtelt ist.

var li = document.querySelector("#playlist .song");

Das heißt: »Suche nach dem Element mit

der ID playlist und dann nach dem ersten

enthaltenen Element mit der Klasse song.«

Sehen Sie, dass wir den gleichen

Selektor benutzen wie in CSS?

Wie können Sie Ihrer Seite im Code neue Elemente hinzufügen? Beispielsweise mit einer

Kombination aus document-Objektmethoden und Elementmethoden, wie hier:

var newItem = document.createElement("li");

newItem.innerHTML = "Herz aus Gold";

var ul = document.getElementById("playlist");

ul.appendChild(newItem);

Mit JavaScript können Sie noch wesentlich mehr Dinge mit dem DOM anstellen.

Eine gute Einführung finden Sie in HTML5 Programmierung – Von Kopf bis Fuß.

ul

li li

Zuerst erzeugen wir ein neues

<li>-Element und weisen

seinem Inhalt einen String zu.

Dann holen wir uns das <ul>-

Element, dem wir das neue <li> (als

Kindelement) hinzufügen wollen, und

hängen <li> einfach an <ul> an.