JavaScript Kurs für Einsteiger: Teil 5 - Selektoren und DOM

Mithilfe von Selektoren (englisch: selectors) und dem DOM (Document Object Model) können wir HTML-Elemente ansprechen und verändern. Das funktioniert in der JavaScript-Konsole oder natürlich auch über ein separates .js File bzw. inline im HTML-Dokument.

Dieser JavaScript Kurs richtet sich an absolute Programmier-Anfänger!
Du benötigst dafür lediglich einen Browser (Google Chrome) und einen Editor (Atom oder Sublime Text).

Die wichtigsten Grundsteine der Programmierung haben wir hinter uns.

Das DOM und Selektoren helfen uns dabei HTML Elemente zu verändern, auch ohne die aktuelle Webseite neu laden zu müssen. Das geht über die Fähigkeiten von HTML und CSS hinaus. Genau dafür brauchen wir JavaScript.

Document Object Model (DOM) ist eine Spezifikation einer Schnittstelle für den Zugriff auf HTML- oder XML-Dokumente. Sie wird vom World Wide Web Consortium definiert.

Eine Implementierung, die dieser Spezifikation genügt, besteht im Sinne der objektorientierten Programmierung aus einem Satz von Klassen zusammen mit deren Methoden und Attributen. Sie erlaubt Computerprogrammen, dynamisch den Inhalt, die Struktur und das Layout eines Dokuments zu verändern.

Zu Anfang aber wieder die Liste mit dem bereits Erlernten:

  • Variablen
  • if else und Vergleichsoperatoren
  • JavaScript in einer HTML Datei nutzen
  • Funktionen (functions)
  • Arrays
  • Schleifen (loops)
  • Selektoren
  • Document Object Model (DOM)

Wir brauchen heute keinen Editor, sondern wir arbeiten ausschließlich in der JS-Console.

Teil 5

Im Browser habe ich die Datei namens selectors.html geladen. Anschließend der Code dazu:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="uft-8">
        <title>JavaScript Kurs für Einsteiger: Teil 4 - Funktionen</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body class="container">
        <header>
            <h1>Javascript Selectors</h1>
        </header>
        <main>
            <p>Paragraph</p>
            <p class="second">Paragraph .second</p>
            <h4>Lists</h4>
            <ul id="checklist">
                <li>Apples</li>
                <li class="done">Oranges</li>
                <li>Bananas</li>
                <li>Watermelon</li>
            </ul>
        </main>
        <form id="gclp-frame-form" target="gclp-frame" method="post" style="display: none;">  
        </form>
    </body>
</html>
JavaScript Selektoren
Links die Beispiel-Webseite und rechts die JS Konsole

Die Konsole rufst du in Google Chrome so auf: CTRL + ⇧ + J (Windows und Linux) oder ⌥ + ⌘ + J (Mac).

Damit wir einzelne HTML-Elemente gezielt ansprechen können, müssen wir die API des Document Object Model (DOM) nutzen.
Die meisten von euch haben sicher schon mal eine Zeile beginnend mit document.... in JavaScript Code gesehen. Genau darum geht diese Folge des JavaScript Kurses für Anfänger.

Wenn du in der Konsole nur document eingibst, bekommst du den kompletten HTML-Code zurück. Probiere es einfach mal.

Als erstes Beispiel möchte ich nun Alle Paragraph <p> Elemente aufrufen.

Die passende DOM Methode dafür lautet document.getElementsByTagName. Versuch das einzugeben. Der Editor versucht gleich die passenden Methoden vorzuschlagen. Mit der Tab-Taste kannst du den Code vervollständigen lassen. Das spart viel Tippzeit. Übrigens ist das Wort Elements in der Mehrzahl. Je nach Vorkommen, kann diese Methode also auch mehrere Elemente ausspucken.

Im Anschluss des Methoden-Namens musst du immer runde Klammern () notieren. Darin kommt der p Tag innerhalb von einfachen oder doppelten Anführungszeichen. Das ist wichtig, weil p hier lediglich ein String ist, der ja in JS immer innerhalb von einem Hochkommata stehen muss.

document.getElementsByTagName('p');

Auf meiner Beispiel-HTML-Seite kommen zwei Paragraphen vor. Diese werden von getElementsByTagName gefunden und innerhalb eines Arrays zurückgegeben.

JavaScript document.getElementsByTagName()
JavaScript document.getElementsByTagName()

Diesen Aufruf kann ich nun für alle Elemente machen. Egal ob mit p, h1 oder ul.
Das Ergebnis ist immer ein Array. Im Kurs über JavaScript Arrays haben wir gelernt, dass wir den Inhalt eines Arrays über den Index, beginnend bei Null, ansprechen können. Der Index wird in eckigen Klammern angehängt.

document.getElementsByTagName('p')[0];

Dieser Code kann nur ein Element auswerfen. Nämlich genau den ersten p Tag dieser Webseite.

Alternativ könnten wir Output auch in einer Variable speichern.

var pTags = document.getElementsByTagName('p');

Aus der Variable pTags wird dadurch ein Array mit den Elementen [p, p.second].

Dieses neue Array können wir nun ebenfalls über den Index ansprechen. Um abermals das erste p Element aufzurufen, nutzen wir wieder den Index 0:

var firstTag = pTags[0];
JavaScript - DOM Beispiele
JavaScript – DOM Beispiele

In der Praxis möchten wir natürlich gezielt Elemente mit den CSS-Selektoren class und id ansprechen.
Das DOM bietet uns dafür die Methoden document.getElementsByClassName() und document.getElementById(). Hast du bemerkt, dass getElementById Einzahl ist und nicht Mehrzahl wie getElementsByClassName? Das liegt daran, dass ein ID nur einmal in einem HTML-Dokument vorkommen darf, Klassen jedoch beliebig oft.

Versuche nun die Klasse done und die ID checklist abzufragen.

Die beiden Methode vereint document.querySelector(), womit du sowohl Klassen und IDs selektieren kannst. Suchst du nach einer Klasse, musst du vor dem Namen einen Punkt und vor der ID eine Raute setzen. Diesen Syntax kennst du vielleicht schon von CSS. Als Ergebnis bekommst du immer nur das erste gefundene Element. Nicht mehrere.

Möchtest du querySelector() nutzen aber alle gefundenen Elemente in einem Array zurückerhalten, steht dir die Methode document.querySelectorAll() zur Verfügung.

Mach nun selbst einige Versuche mit diesen JavaScript DOM Methoden.

JavaScript - querySelector
JavaScript – querySelector Beispiele

HTML Elemente ändern

Die Variable firstTag hat noch das Element des ersten Paragraphen als Objekt gespeichert. Den Text innerhalb von <p></p> können wir nun mit der Methode innerHTML überschreiben.

Gib nun den folgenden Code in die Chrome JavaScript Konsole ein:

firstTag.innerHTML = "new paragraph";

Sobald du auf Enter drückst, wird der Text Paragraph mit new paragraph überschrieben.

Dieser String kann natürlich auch wieder neue HTML Tags enthalten.

firstTag.innerHTML = "new paragraph <strong>content</strong>";

Mit var li = document.querySelector('.done') können wir nun das durchgestrichene Listenelement Oranges auswählen und das Objekt in der Variable li speichern.
li.className zb. gibt den Klassennamen done zurück.

Möchte ich nun die Klasse done mit einer anderen überschreiben, kann ich das einfach mit li.className = "newClass"; machen. Auf gleiche Weise können auch weitere Klassen hinzugefügt werden.

Wenn man aber nun gar nicht weiß wie die aktuelle Klasse heißt und einfach eine weitere hinzugefügt werden soll, kann folgende Anweisung genutzt werden:

li.className = li.className + " special";

Stringverkettungen kennst du ja schon. In dem Beispiel darüber wird die CSS Klasse special hinzugefügt.

JavaScript - CSS Klassen ändern
JavaScript – CSS Klassen ändern

Sehr praktisch ist die relativ neue Methode classList. In Verbindung mit add und remove wird das Arbeiten mit class-Selektoren viel einfacher und genauer.

li.classList.add = "special";

Das war es erstmal zu den JavaScript Selektoren und dem DOM.

Zusammengefasst die Selector Methoden:

document.getElementsByTagName('strong');
document.getElementsByClassName('done');
document.getElementById('my-id');
document.querySelector('#idName');
document.querySelectorAll('.className');

Zum Verändern haben wir die Methoden innerHTML und className verwendet:

document.getElementById('my-id').innerHTML = "new html";
document.getElementById('my-id').className = "newclass special";
document.getElementById('my-id').classList.add = "newclass special";
caniuse.com

Achtung: Ältere Browser unterstützen vielleicht nicht alle JavaScript Funktionen und Methoden.

Besonders beim betagten Internet Explorer Versionen fehlt oft die notwendige Unterstützung. Dein Code wird dort dann vielleicht nicht funktionieren.

Ob das der Fall ist, kannst du auf der Webseite caniuse.com überprüfen.

Im Video sieht die JavaScript Console etwas anders aus. Auch die Rückgabewerte sind teilweise anders formatiert. Das kannst du ignorieren, das liegt lediglich an der älteren Chrome-Version.

Hausaufgabe

Wenn was nicht funktioniert, kannst du jeder Zeit die JavaScript Konsole im Chrome öffnen und dir damit den Fehler anzeigen lassen.

Tiefer in die Materie geht es auf dem Mozilla Developer Network.

Das Video zum Kurs – Teil 5 (englisch)

Die Videos sind vom Youtube Channel LearnCode.

… cause Javascript ROCKS

Dieser JavaScript Kurs ist natürlich kostenlos.
Ich halte mich grob inhaltlich an den Kurs im Video. Ich mache das um selbst JS zu lernen und lade dich ein mit mir mitzumachen.

Verfasst in: TechnikTags: , ,

Willst du an der Diskussion teilnehmen?


Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kommentar *

Name *
E-Mail *
Webseite