Hello DOM« mit querySelector und innerHTML

Marco Emrich und Christin Marit
JavaScript
HTML mühelos manipuliert
Ein Webmasters Press Lernbuch
Version 2.0.6 vom 30.9.2016
Autorisiertes Curriculum für das Webmasters Europe Ausbildungs- und Zertifizierungsprogramm.
www.webmasters-europe.org
Über die Autoren
Marco Emrich
Marco Emrich ist Diplom-Informatiker (FH), leidenschaftlicher Trainer und Verfechter von Software Craftsmanship. Er verfügt über langjährige Erfahrung als Software-Architekt und -Entwickler in ganz unterschiedlichen Branchen. An der Webmasters Akademie in Nürnberg leitet
er den Fachbereich Web Engineering. Außerdem hält er regelmäßig Vorträge, leitet Workshops
auf bekannten Softwarekonferenzen und schreibt Fachbücher und Artikel für Fachzeitschriften. Wenn er in seiner Freizeit nicht gerade Softwerkskammer-Treffen organisiert, erklärt er
wahrscheinlich gerade seinem Sohn, wie man Roboterschildkröten programmiert.
marcoemrich1
@marcoemrich2
Christin Marit
Christin Marit ist Diplom-Sozialpädagogin, Webentwicklerin, Fotografin, Minimalistin, Weltenbummlerin und professionelle Lebenskünstlerin. Für die Webmasters Akademie in Nürnberg arbeitet Sie als Kursentwicklerin, Autorin und E-Tutorin und findet, dass JavaScriptlernen
genauso einfach, schön und spannend sein sollte wie das Leben selbst. Unter simplewinke.de
bloggt sie über die Leichtigkeit des Seins.
@christinmarit3
1. https://github.com/marcoemrich
2. https://twitter.com/marcoemrich
3. https://twitter.com/christinmarit
© 2016 by Webmasters Press
www.webmasters-press.de
Webmasters Akademie Nürnberg GmbH
Neumeyerstr. 22–26
90411 Nürnberg
Germany
www.webmasters-akademie.de
Printed books made with Prince
Art.-Nr. 12ee670b2a8b
Version 2.0.6 vom 30.9.2016
Das vorliegende Fachbuch ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne schriftliche Genehmigung des Verlags urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder Verwendung in elektronischen Systemen sowie für die Verwendung in Schulungsveranstaltungen. Die Informationen in diesem Fachbuch wurden mit
größter Sorgfalt erarbeitet. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Autoren und Herausgeber übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene fehlerhafte Angaben und deren Folgen.
Inhaltsverzeichnis
1
2
3
4
Vorwort
11
Was Sie schon immer über das DOM wissen wollten…
13
1.1
1.2
1.3
1.4
1.5
1.6
1.7
1.8
14
DOM-Manipulation im Kontext von Webwendungen
Ein Leben ohne jQuery
JavaScript mit Vanille-Geschmack
Voraussetzungen
Was dieses Buch ist
Was dieses Buch nicht(!) ist
Warum Firefox?
Projekt »NerdWorld«
14
15
16
16
16
17
17
Jetzt werden Sie Manipulator
19
2.1
2.2
2.3
2.4
2.4.1
2.4.2
2.4.3
2.5
2.6
2.7
19
»Hello DOM« mit querySelector und innerHTML
Ein Blick hinter die Kulissen
Vom Suchen und Finden im DOM
…sie alle zu finden … — mit querySelectorAll
Attribut-Selektoren
Combinator Selectors
Pseudo Classes
Document vs. Element
Kurz und bündig — $
Zusammenfassung
21
24
29
32
33
35
36
36
37
Jetzt geht's ans CSS
39
3.1
3.2
3.2.1
3.2.2
Listige Informationen mit classList & DOMTokenList
classList hat Methode(n)
Mehr Klasse mit add
Was zuviel ist, ist zuviel — mit remove
39
3.2.3
3.2.4
3.3
3.4
3.5
3.6
Wechselspiel mit toggle
Are you there? — mit contains
Nur highlighten, was man highlighten will — mit filter
Methoden???
Zusammenfassung
Übungen
42
40
40
41
42
42
43
43
44
Und nun: ab ins HTML
46
4.1
4.2
4.3
4.4
4.5
46
Rauszögern, ohne abzuwarten: Defer & Async
Strikt und abgeschottet: Blocks & use strict
Nur ein kleines bisschen Refactoring …
Array.from war gestern. Jetzt heißt es: Array-Methoden für alle!
Und jetzt noch eine klitzekleine Verbesserung
47
48
52
53
5
6
7
8
Events feiern, wie sie fallen …
55
5.1
5.2
5.2.1
5.2.2
5.3
5.4
5.5
5.6
5.7
5.8
5.9
55
10
11
56
56
57
58
60
61
63
68
70
73
Mehrere JS-Dateien verwenden
74
6.1
6.2
6.3
75
Fröhliches Datei-Zerhacken
Der Terror der globalen Verschmutzung
Kein bisschen verstaubte Bibliotheken
78
79
Attribute: Erkennen, Ändern und Manpulieren ausdrücklich erlaubt
82
7.1
7.2
7.3
7.4
7.5
7.6
83
IDL-Attribut vs. Content-Attribut
Es lebe der Fortschritt(sbalken)!
Achtung! — boolesche Attribute
Auf die Fragestellung kommt es an — mit dem value-Attribut
Zusammenfassung
Übungen
Eine Frage des Stils: Das Style-Objekt
8.1
8.2
8.3
9
Events im Browser
Zum anständigen Behandeln von Events: Eventhandler
Vorbereitende Maßnahmen
… und nun alles zusammen
Guard Clauses: Wächter für Ihre Funktionen
Der gekonnte Einstieg — mit init
Schauen Sie hinter die Fassade — mit dem Event-Objekt
preventDefault oder: Wer mag schon immer nur »Standard«?
Kurz und knapp — on
Zusammenfassung
Übungen
Absolut berechnend: getComputedStyle
Noch style-ischer mit Tooltips
Übungen
84
85
86
87
89
92
94
100
105
HTML unterwandern mit Data-Attributen
108
9.1
9.2
109
Zusammenfassung
Übung
109
Von neuen Elementen und angehängten Kindern: createElement & appendChild
111
10.1
10.2
10.3
10.4
10.5
10.6
112
HTML generieren lassen mit document.createElement
Endlich angefügt: appendChild
Mal wieder etwas Refactoring
Und noch ein wenig JSON
Vergleich verschiedener DOM-Creation-Methoden
Zusammenfassung
113
114
116
118
119
Ab in die Tonne mit remove
122
11.1
11.2
11.3
125
Klassifizierung
Zusammenfassung
Übungen
126
127
12
13
14
Wenn Geschwister eine Reise tun: siblings & insertBefore
128
12.1
12.2
12.3
12.3.1
12.3.2
12.4
131
Allerliebstes Refactoring
Uups — das geht noch besser!
Zusammenfassung
Beispiel zu insertBefore
DOM-Traversal
Übungen
134
136
137
138
139
Anhang A: Referenz
143
13.1
13.1.1
13.1.2
13.1.3
13.1.4
13.1.5
13.1.6
13.2
13.3
13.4
Elemente
Element vs. Node
Der Document-Knoten
DOM Selection
DOM Manipulation
DOM Traversal
DOM Creation
Attribute
CSS
Events
143
Anhang B: Quellen & Literaturhinweise
155
14.1
14.2
155
APA-Style
Quellen
143
144
144
148
148
150
150
152
153
155
157
Index
170
Vorwort
JavaScript, HTML und CSS
… das sind die drei Säulen, auf denen das moderne Web ruht. Egal, welche Technologien Sie
sonst noch verwenden, an dem Erfolgs-Trio führt kein Weg vorbei.
Der erste Band (JavaScript — Aller Anfang ist leicht) hat sich mit den Grundlagen der Sprache
JavaScript beschäftigt. Im vorliegenden Band zeigen wir Ihnen, wie Sie JavaScript nutzen können um »HTML mühelos zu manipulieren«. Diese Manipulation hilft uns, Webanwendungen zu
bauen, die mehr sind als bloße statische Seiten — Webanwendungen, die sich flüssig anfühlen und gut bedienbar sind, statt nach jedem Klick die Seite neu aufbauen zu müssen.
Nach diesem Kurs können Sie dynamische Tooltips erzeugen, Interfaces zum Verwalten von
Produkten programmieren oder eigene Bildgalerien entwickeln. Uns würden noch viele
andere Anwendungsfälle einfallen — vor allem aber wollen wir Ihnen Werkzeuge an die Hand
geben, mit denen Sie die Anwendungsfälle umsetzen können, die uns gerade nicht einfallen.
Die Kombination aus HTML und JavaScript (und natürlich auch CSS) versetzt Sie in die Lage,
Ihre Ideen Realität werden zu lassen. Wo fertige Webbaukästen Sie nur einschränken, ist JavaScript ein flexibles und williges Werkzeug Ihrer Kreativität — nur Ihre Phantasie ist die Grenze.
Im vorliegenden Band geht es nicht um Frameworks wie AngularJS oder React. Stattdessen
möchten wir Ihnen zeigen, dass eben jener Browser, mit dem Sie Tag für Tag arbeiten, bereits
alles mitbringt, was Sie für dynamische Webanwendungen im Frontend benötigen.
Einerseits möchten wir Sie ermutigen, kleinere Probleme direkt mit den Bordmitteln des Browsers zu lösen, statt gleich ein schwergewichtiges und komplexes Framework einzubinden.
Andererseits setzen Sie vielleicht später für größere Anwendungen ein solches Framework ein.
Dann werden Ihnen die Grundkenntnisse aus diesem Kurs eine wertvolle Hilfe sein. Sie helfen Ihnen, die Arbeitsweise des Frameworks zu verstehen und Probleme auch dann zu lösen,
wenn Sie an die Grenzen des Frameworks stoßen.
Wie schon in Band 1 begonnen, setzen wir den aktuellen JavaScript-Standard ein. Sie sollten
bereits mit den grundlegenden Spracheigenschaften von ECMAScript2015 vertraut sein.
Ansonsten lohnt es sich eventuell, nochmal den Band 1 zur Auffrischung durchzuarbeiten.
Wir setzen das dort begonnene Prinzip fort und verwenden neben den aktuellen Sprachmitteln auch aktuelle Browserimplementierungen. Wir zeigen Ihnen die aktuellen APIs und ein
modernes DOM, mit dem das Entwickeln von Webanwendungen wieder Spaß macht. Was sich
hinter dem geheimnisvollen Begriff »DOM« verbirgt, erfahren Sie gleich in der ersten Lektion.
In diesem Sinne, viel Spaß beim Lesen und Coden…
Christin & Marco
Abb. .1 Remote Programmieren … Remote Schreiben … und Remote Feiern :)
13
Was Sie schon immer über das
DOM wissen wollten…
And then there is the DOM — I'm pretty confident saying
this: I think, it is the worst API ever invented.
Douglas Crockford about »Upgrading the Web«4
Vielleicht wollen Sie ja erst einmal wissen, was dieses DOM eigentlich ist, um das es hier geht.
Also, das DOM ist kein Gebäude — es ist die Abkürzung für Document Object Model und der
hässliche Star dieses Buches.
Es handelt sich dabei um eine sogenannte API — ein application programming interface —
eine Schnittstelle zur Programmierung von Anwendungen. Im Klartext heißt das, eine Sammlung von Objekten, Methoden, Funktionen und Attributen. Sie sehen bald, was das genau
bedeutet.
Der Browser stellt uns damit eine Möglichkeit zur Verfügung, mit der wir HTML-Seiten dynamisch verändern können. Alle Webanwendungen, die Sie kennen, mit denen Sie ohne ständiges Neuladen arbeiten können, wie Google-Mail, Twitter, Facebook usw., verwenden das
DOM, um Ihnen gut bedienbare Oberflächen (darüber lässt sich vermutlich streiten) bereitzustellen. JavaScript (kurz: JS) im Browser ist wertlos ohne die Möglichkeit, HTML zu manipulieren — und dafür benötigen Sie das DOM. Auch moderne Frameworks wie AngularJS oder
ReactJS greifen »unter der Haube« auf das DOM zurück.
Warum eigentlich der hässliche Star? Douglas Crockford (der Mann hinter JSON und Autor
von JavaScript — the good parts) hat 2015 in seinem Vortrag Upgrading the Web das DOM die
schlechteste API aller Zeiten geschimpft.
Schwer zu sagen, ob das stimmt — aber als geplagte Entwickler hat uns das Ringen mit der API
schon das eine oder andere graue Haar verursacht (bei Marco ist das ganz deutlich zu sehen).
Tatsache ist: Die API ist komplex und nicht einfach zu verwenden.
Die gute Nachricht ist: Das DOM ist vor allem deswegen so komplex, weil es überladen ist —
mit vielen, vielen Dingen, die in der Praxis kaum Verwendung finden.
Deswegen greifen wir für Sie die Teile aus der API heraus, die Ihnen den größten Nutzen bringen. Kombiniert mit aktueller ECMAScript6-Syntax und ein paar Kniffen, die wir Ihnen bald zeigen, wird aus der schlechtesten API aller Zeiten … immer noch keine gute API. Aber zumindest
gelingt es Ihnen, Ihre Ziele zu erreichen und dabei Code zu produzieren, der auch langfristig
lesbar und wartbar bleibt.
4. https://www.youtube.com/watch?v=6UTWAEJlhww
1
14
1.1
1 Was Sie schon immer über das DOM wissen wollten…
DOM-Manipulation im Kontext von Webwendungen
Wenn Sie vorhaben, größere JS-Anwendungen oder gar Single Page Applications zu entwickeln, ist reine DOM-Manipulation sicherlich nicht das Mittel der Wahl. Spezialisierte Frameworks wie AngularJS oder ReactJS sind dafür besser geeignet.
Warum sind wir der Meinung, dass Sie dennoch zuerst DOM-Manipulation lernen sollten?
Dafür gibt es eine ganze Reihen von Gründen. Zunächst einmal kann es sein, dass Sie gerade
keine Single Page App entwickeln, sondern einfach einer klassische Webanwendung (z. B.
einer im ROCA-Stil5) eine modernere Fassade verpassen wollen. Vielleicht möchten Sie aber
auch die Usability verbessern oder einfach ein wenig den »Fancyness«-Faktor erhöhen. Dafür
ist ein wenig gezielt und nicht übertrieben eingesetztes DOM-Scripting oft die richtige Wahl.
Sie benötigen keine zusätzlichen Frameworks, müssen keine riesigen Datenmengen nachladen oder komplizierten Setup-Code erstellen. Alles, was Sie benötigen, bringt der Browser mit.
Wo wir gerade über Datenberge sprechen: Vielleicht ist es Ihnen auch wichtig, dass Ihre Website schnell lädt, weil Ihnen ihre mobilen Nutzer am Herzen liegen. Oder Sie wissen, dass
Geschwindigkeit ein wichtiger Rankingfaktor für Google ist; ein Gesichtspunkt, den viele SEOExperten (Search Engine Optimization, dt. Suchmaschinenoptimierung) immer noch sträflich vernachlässigen. In diesem Fall ist es besonders wichtig, dass Sie möglichst wenig zusätzlichen Code benötigen.
Sollten Sie später mit einem umfangreicheren Webframework arbeiten, werden Sie feststellen,
dass nicht jedes Framework alles kann oder manche »einfachen« Dinge in dem einen oder
anderen Framework gar nicht so einfach sind — weil sie gerade nicht ins Frameworkkonzept
passen.
Dann ist es an der Zeit, mal wieder selbst Hand anzulegen oder zumindest zu verstehen, was
das Framework »unter der Haube« so treibt.
Nur wer das DOM beherrscht, beherrscht den Browser.
1.2
Ein Leben ohne jQuery
»Warum zur Hölle verwendet Ihr kein jQuery?« lautet der aus der
Memesprache (sehr verbreitet in der Webenwicklungsszene)
übersetzte Ausdruck, den Sie in Abb. 1.1 finden.
Abb. 1.1 Y-U-No-jQueryMeme6, erstellt mit dem
ImgFlip-Memegenerator
5. http://roca-style.org/
6. https://imgflip.com/i/r7vc2
Tatsächlich hatten wir dieses Buch ursprünglich als jQuery-Buch
begonnen. Es waren sogar schon drei Lektionen fertig. Aber
sowohl eigene Projekte als auch Gespräche mit Dutzenden von
Entwicklern auf Konferenzen haben bestätigt: Die Zeit ist reif —
reif für ein Web ohne jQuery.
Verstehen Sie uns nicht falsch — wir sind keine Gegner von
jQuery. jQuery ist eine großartige Bibliothek. Wir haben sie in vie-
1.3 JavaScript mit Vanille-Geschmack
15
len Projekten gerne eingesetzt. Was jQuery vor allem geleistet hat, war, eine stabile Plattform
zu bieten, die die Unterschiede zwischen den Browsern ausgleicht. jQuery hat jede noch so
verrückte Browserbesonderheit vor uns verborgen und uns so viel Ärger und Tausende von
Entwicklungsstunden erspart.
jQuery brachte auch zu Zeiten von EcmaScript 3.1 bereits High-Order-Funktionen wie map
und each mit. Vermutlich hat jQuery sogar den EcmaScript-Standard dazu inspiriert, ähnliche
Funktionalität direkt in die Sprache zu integrieren.
Ich kann gar nicht beschreiben, wie verrückt die Web-Welt war,
bevor Bibliotheken wie jQuery und Prototype sich um Browserunterschiede kümmerten. Ich hab' oft nächtelang Dokumentationen
gewälzt und JS-Code debuggt, um herauszufinden, warum gerade
diese eine Sache, die in allen anderen Browsern tadellos funktioniert, in IE5/IE6 mal wieder anders ist.
Jedenfalls entwickelt sich das Web weiter. Unter der Voraussetzung, dass der Internet Explorer
9 der älteste Browser ist, den Sie noch unterstützen müssen, sind die Unterschiede zwischen
den Browsern nicht mehr so groß. Es kommt natürlich auf Ihre Zielgruppe und Ihren Anwendungsfall an, aber die Notwendigkeit jQuery (oder vergleichbare Bibliotheken) einzusetzen, ist
nicht mehr so groß wie noch vor wenigen Jahren.
Mittlerweile hat sich eine ganze Community um das Thema #nojquery7 (Twitter Hashtag)
gebildet. Hier ein paar Links zum Weiterschmökern:
➤ youmightnotneedjquery.com
➤ blog.garstasio.com/you-dont-need-jquery
➤ www.sitepoint.com/do-you-really-need-jquery
➤ lea.verou.me/2015/04/jquery-considered-harmful
➤ tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery
➤ programmers.stackexchange.com/questions/166273/advantages-of-using-purejavascript-over-jquery
Unter youmightnotneedjqueryplugins.com finden Sie sogar eine Liste von jQuery-freien Widgets und Plugins. Direkte Vergleiche zwischen jQuery und Vanilla-Code (erklären wir gleich)
finden Sie in Ray Nicholus' Buch (2015) Beyond jQuery.
1.3
JavaScript mit Vanille-Geschmack
Generell ist die Idee dieses Buches, mit vanilla JS zu arbeiten, so lange es sinnvoll ist. Der
Begriff vanilla JS bedeutet: einfaches JavaScript ohne Schnickschnack oder Beiwerk. Als Belohnung winken kleine Dateigrößen und hohe Performance.
7. https://twitter.com/search?q=%23nojquery
16
1 Was Sie schon immer über das DOM wissen wollten…
Ein weiterer Begriff mit der gleichen Bedeutung wie vanilla JS wäre übrigens naked JS (Nur hat
uns das Lektorat leider alle darauf aufbauenden Scherze gestrichen).
Unter vanilla-js.com finden Sie eine Satireseite von Eric Wastl, die vanilla JS wie eine Bibliothek
oder ein Framework anpreist, das Sie sich herunterladen können — eine leere Datei :)
The Vanilla JS team takes pride in the fact that it is the most lightweight framework available anywhere; using our production-quality deployment strategy, your users' browsers will have Vanilla JS
loaded into memory before it even requests your site.
vanilla-js.com
Ignoriert man mal den humoristischen Aspekt, so bietet die Seite vor allem interessante Vergleiche zwischen vanilla JS und beliebten Bibliotheken — Vergleiche, die zeigen, dass »reines«
JS nun wirklich keine schlechte Wahl ist.
1.4
Voraussetzungen
Wir gehen davon aus, dass Sie entweder Band 1: »JavaScript — Aller Anfang ist leicht« durchgearbeitet haben oder äquivalente JavaScript-Grundkenntnisse mitbringen. Sollten Ihnen Konzepte wie Variablen, Kontrollstrukturen (z. B. if ), Rekursion oder High-Order-Funktionen
( map , reduce , …) nicht vertraut sein, empfehlen wir Ihnen, sich erst mal mit den Grundlagen
zu beschäftigen. Der Band 1 dieser Reihe: JavaScript — Aller Anfang ist leicht (Emrich, Marit
2015) eignet sich dafür übrigens hervorragend :)
Dieses Buch verwendet konsequent die Sprachversion ES6 bzw. EcmaScript 2015 von
JavaScript.
Sie sollten also auch mit Basis-ES6-Features wie Stringtemplates, let , const oder dem fat
arrow => vertraut sein.
1.5
Was dieses Buch ist
Dieses Buch konzentriert sich auf JavaScript im Browser. Inbesondere behandeln wir das
Browser-DOM und zeigen Beispiele, wie sie in echten Projekten tatsächlich vorkommen. D. h.
Sie lernen die Browser-Funktionen anhand von Code kennen, wie wir ihn (nahezu) auch in
Wirklichkeit schreiben würden. Deswegen erwartet Sie kein Feuerwerk an Features, die wir im
Akkord abhandeln. Stattdessen zeigen wir Ihnen, wie Sie die neuen Funktionen und Konzepte
sinnvoll in realen Umgebungen einsetzen. Dazu gehören auch oft viele Verbesserungsrunden,
um schließlich Code zu präsentieren, auf den Sie stolz sein können.
1.6
Was dieses Buch nicht(!) ist
Wenn Sie später Software mit JS entwickeln, werden Sie oft Details nachschlagen müssen.
Dafür ist dieses Buch aber nur sehr bedingt geeignet. Wir versuchen eher, Ihnen einen Leitfaden an die Hand zu geben, der Ihnen einen schnellen Einstieg in das Browser-DOM ermöglicht. Dabei ist die Reihenfolge der Lektionen auf den Lernfortschritt ausgerichtet, und nicht
auf schnelles Auffinden von Themen optimiert. Wir erheben auch keinen Anspruch auf Vollständigkeit, sondern beschränken uns bewusst auf die Dinge, die für Sie als Einsteiger
zunächst am wichtigsten sind — das »Big Picture« sozusagen.
1.7 Warum Firefox?
17
Wenn Sie später bei Ihrer täglichen Entwicklungsarbeit alle Details benötigen, empfehlen wir
Ihnen folgende Websites:
➤ www.mozdev.org — Mozilla Developer Network (MDN)
Das MDN ist viel mehr als eine Referenz für den Firefox-Browser. Sie finden hier sowohl
ausführliche Details zum JS-Sprachkern als auch zur Browser-Funktionalität. Selbst Tabellen, welcher Browser welches Feature ab welcher Version implementiert, sind vorhanden — häufig mit Polyfills (Code, der das Feature nachrüstet) für den Fall der Fälle.
➤ www.webplatform.org
Ein gemeinsames Dokumentationsprojekt vom W3C, Microsoft, Adobe und anderen. Sehr
gute und ausführliche Dokumentation zu HTML5 und CSS. Die JS-Dokumentation ist noch
in Arbeit, aber schon vielversprechend.
➤ caniuse.com
Kann ich ein bestimmtes Feature benutzen? Diese Site kennt die Antwort. Ausführliche
Übersichten zu neuen Features in HTML, CSS und JS mit Angaben zu den Browserversionen und Hinweisen zu Polyfills.
Falls Sie nach JS-Inhalten googeln möchten, ist es ratsam, ein
»mdn« zu ergänzen, damit Sie gleich auf der passenden Seite des
Mozilla Developer Networks landen — sonst besteht die Gefahr,
dass Sie Seiten in der Trefferliste finden, deren Erklärungen veraltet
oder schlichtweg falsch sind.
1.7
Warum Firefox?
Wir setzen Mozilla-Firefox (Version 46+, englische Fassung) als Beispielbrowser für diesen Kurs
ein. Firefox hat den Vorteil, dass er bereits alle ES6-Features unterstützt, die wir verwenden.
Im Grunde spricht nichts dagegen, wenn Sie lieber einen anderen Browser verwenden möchten. Sie sollten nur sicherstellen, dass der Browser bereits über die eingesetzten ES6-Features
verfügt. Eine Übersicht über den Stand der ES6-Unterstützung finden Sie in der ES6 compatibility table8.
1.8
Projekt »NerdWorld«
Im ersten Band haben wir das Projekt NerdWorld mit seinem Auftraggeber Björn vorgestellt.
NerdWorld ist ein fiktives Projekt, anhand dessen Sie viel über JS lernen können — vor allem
auch, wo und wie Sie JS sinnvoll einsetzen.
8. http://kangax.github.io/compat-table/es6/
18
1 Was Sie schon immer über das DOM wissen wollten…
Auch dieses Mal hat Björn wieder jede Menge für Sie zu tun und stellt Sie vor interessante Herausfordungen. Herausfordungen, die Sie Dank JavaScript natürlich mühelos bewältigen!
Wenn Sie das Projekt bereits aus dem Buch JavaScript - Aller Anfang ist leicht kennen, können
Sie den folgenden Abschnitt überspringen. Ansonsten wiederholen wir hier noch mal die Projektbeschreibung.
Ein Kundengespräch
Stellen Sie sich vor, Ihr erster Kunde ist Björn — ein Ladenbesitzer, der seine Produkte nun auch
im Internet anbieten möchte. Der Laden heißt »NerdWorld« (das Beispiel ist fiktiv — Sie können sich das Googeln sparen).
NerdWorld ist ein Online-Shop, bei dem Nerds und andere Technik-Verrückte Produkte des
»täglichen Bedarfs« kaufen: Nerfguns, Ufos mit USB-Anschluss, Klingonenwaffen fürs Büro,
koffeinhaltige Getränke, stark koffeinhaltige Getränke, noch stärker koffeinhaltige Getränke
usw. Eben alles, was der moderne Entwickler zum Überleben im Büro-Dschungel so braucht.
Es gibt zwar schon eine statische HTML-Site, nur können Sie dort bisher keine Produkte kaufen.
Die neue Site soll primär aus einem Shop bestehen. Um das Ganze etwas interessanter zu
gestalten, sind außerdem weitere Features geplant oder sollen weiterentwickelt werden, wie
z. B.
➤ ein Chat-Client, über den sich die Kunden mit den Verkäufern/Kundenberatern austauschen
➤ eine Newsletter-Funktion, mit der der Shop die Kunden über neue Produkte informiert
➤ ein Newsboard, auf dem die Kunden die neuesten Neuigkeiten erfahren.
Damit dieser Traum auch Realität wird, hat sich der Geschäftsführer an einen Spezialisten
gewandt: an Sie! Sie treffen sich also mit ihm, und er schildert Ihnen die Situation:
Seit Jahren verkaufen wir cooles Zeug für Nerds — oder solche, die
es werden wollen. Unsere Produktpalette reicht von Star Trek-Fanartikeln über Programmierer-Utensilien bis hin zu smartphonegesteuerten Mini-Drohnen und Scherzartikeln wie dem
Elektroschock-Kugelschreiber.
Im Laufe dieses Kurses werden wir immer wieder auf Projekt NerdWorld zu sprechen kommen
und Ihnen zeigen, wie Sie die Anforderungen mit JS und dem DOM bewältigen.
2.1 »Hello DOM« mit querySelector und innerHTML
19
Jetzt werden Sie Manipulator
2.1
»Hello DOM« mit querySelector und innerHTML
Abb. 2.1 Foto: oskay9
Lizenz: CC BY 2.010
Jedes ernstzunehmende Buch über Programmierung beginnt mit einem Hello World-Beispiel.
Natürlich wollen wir mit dieser Tradition nicht brechen. In Band 1 haben Sie Hello World auf
der Konsole ausgegeben. In diesem Buch geht es nun um die HTML-Struktur. Also »sagen« Sie
erst einmal Hello World auf einer HTML-Seite. Sie benötigen dafür:
1. eine einfache HTML-Seite (Codebeispiel 2.1)
2. Die JavaScript-Konsole des Browsers
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hello World</title>
</head>
<body>
<h1>Hello <em>World</em></h1>
</body>
</html>
Codebeispiel 2.1 Einfaches HTML-Document
9. https://www.flickr.com/photos/oskay/472097903/sizes/o/in/photostream
10. http://creativecommons.org/licenses/by/2.0
2
20
2 Jetzt werden Sie Manipulator
Abb. 2.2 Hello World in Firefox
Schritt für Schritt:
1. Öffnen Sie das HTML-Dokument aus Codebeispiel 2.1 in Firefox. Die Datei finden Sie
im Begleitmaterial zum Buch unter 02/examples/simple.html
2. Öffnen Sie die Web-Konsole (ctrl-shift-K) und geben Sie folgenden Code in die
JavaScript-Befehlszeile ein (Abb. 2.2):
document.querySelector('h1').innerHTML = "<em>Hello</em> DOM";
Sobald Sie die Zeile mit Enter bestätigen, ändert sich die Überschrift von Hello World nach
Hello DOM — mit entsprechend geändertem Markup (siehe Abb. 2.3).
Abb. 2.3 Hello DOM in Firefox
2.2 Ein Blick hinter die Kulissen
2.2
21
Ein Blick hinter die Kulissen
Wie funktioniert das?
Sehen Sie sich das Ganze nochmal in Zeitlupe an. Na gut, wir haben leider keine richtige Zeitlupe, aber wir können zurückspulen (mit einem Browser-Reload) und uns die beiden Teile der
Anweisung als Einzelschritte ansehen.
3. Laden Sie also die HTML-Seite neu (ctrl-R bzw. cmd-R), um wieder zur ursprünglichen Hello World-Seite zurückzukehren.
4. Geben Sie nur document.querySelector('h1') (ohne Zuweisung danach) ein.
Mit der Funktion document.querySelector können Sie HTML-Elemente innerhalb des
HTML-Dokumentes auswählen. Der Parameter ist ein beliebiger CSS-Selektor. So liefert Ihnen
document.querySelector('h1') das erste h1 -Element als JS-Objekt zurück.
Bisher haben wir den Begriff Objekt noch nicht genauer definiert. Im Moment ist aber nur
wichtig, dass Objekte Werte sind, wie Zahlen oder Strings. Objekte können auch komplexere
Dinge repräsentieren, wie hier z. B. das h1 -Element.
Im Übrigen können Sie das h1 -Element in der Konsole untersuchen. Beim Mouse-Over wird
es im HTML-Dokument hervorgehoben. Klicken Sie das Symbol
daneben an, zeigt der
Firefox-Inspector, wo es sich im HTML-Baum befindet (siehe Abb. 2.4).
22
2 Jetzt werden Sie Manipulator
Abb. 2.4 h1 im Firefox-Inspector
Der Rückgabewert der Funktion document.querySelector ist also ein JS-Objekt, das ein
Element im HTML-Baum repräsentiert. Genauer gesagt ist es ein sogenanntes Element-Objekt.
Objekte in JS haben Eigenschaften (engl. properties). Eine wichtige Eigenschaft, speziell von
Element-Objekten, ist innerHTML. Sie ermitteln ihren Wert mit Hilfe der Punkt-Notation, z. B.
document.querySelector('h1').innerHTML
5. Geben Sie jetzt in die Konsole ein:
document.querySelector('h1').innerHTML
Sie erhalten als Ausgabe:
Hello <em>World</em>
document.querySelector('h1') liefert das Element-Objekt zurück, dessen Eigenschaft
innerHTML Sie abfragen. Der Wert von innerHTML ist ein String mit dem inneren HTML des
jeweiligen Elementes — also dem HTML-Quellcode, der sich innerhalb der Tags befindet.
Die Punktnotation funktioniert auch mit anderen Objekten & Eigenschaften. Die Schreibweise
hat dabei immer die Form: <Objekt>.<Eigenschaft>
2.2 Ein Blick hinter die Kulissen
23
Sie können Eigenschaften ähnlich wie Variablen verwenden. Genauso wie bei einer Variable
können Sie auch Eigenschaften neue Werte zuweisen. Sobald Sie der Eigenschaft innerHTML
einen neuen Wert zuweisen, ändert sich die HTML-Seite.
6. Geben Sie ein:
document.querySelector('h1').innerHTML = "Hello again!";
Damit Sie uns auch glauben, dass Objekte tatsächlich einfach nur Werte sind, sind wir Ihnen
noch einen Beweis schuldig. Hier ist er: Sie können ein Objekt, wie jeden anderen Wert, einfach
an einen Variablennamen binden.
7. Geben Sie ein:
let myH1 = document.querySelector('h1');
myH1.innerHTML = "Hello once more!";
Außerdem liefert Ihnen nun die Eingabe von myH1 in der Konsole wieder das HTML-ElementObjekt zurück.
8. Probieren Sie es aus! Geben Sie einfach nur ein:
myH1
Übung 1: Almost Famous Quotes
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5
<meta charset="utf-8" />
6
7
<title>Famous Quotes</title>
8
<meta name="description" content="JavaScript. HTML mühelos
manipuliert" />
9
10
<link rel="stylesheet" href="../../css/styles.css" type="text/css"
media="screen" />
11
<link rel="shortcut icon" href="../../img/favicon.ico" type="image/
x-icon" />
12 </head>
13
24
2 Jetzt werden Sie Manipulator
14 <body>
15
16
<header></header>
17
18
<main>
19
<h1>Famous Quotes</h1>
20
21
<blockquote></blockquote>
22
</main>
23
24 </body>
25
26 </html>
Codebeispiel 2.2 additional_files/02/examples/quotes.html
1. Ändern Sie mit Hilfe von JS die Überschrift ( h1 ) der HTML-Seite aus Codebeispiel 2.2
in Almost Famous Quotes.
2. Die Seite (Codebeispiel 2.2) enthält ein leeres blockquote -Element. Öffnen Sie die
HTML-Seite in Firefox. Geben Sie in der Konsole eine Zeile JS-Code ein, die das Element mit folgendem Inhalt befüllt:
<p>I have always wished for my computer to be as easy to use as my
telephone; my wish has come true because I can no longer figure out
how to use my telephone.</p>
<footer>— <cite>Bjarne Stroustrup</cite></footer>
2.3
Vom Suchen und Finden im DOM
Sie haben gesehen, dass document.querySelector HTML-Elemente als JS-Objekte extrahieren kann. Tatsächlich ist das ganze HTML-Dokument nichts anderes als eine Sammlung
von HTML-Elementen, die in einer Baumstruktur angeordnet sind. Äquivalent dazu sind die
passenden JS-Objekte ebenfalls in einem Baum angeordnet — dem sogenannten Document
Object Model, kurz DOM. Für die einfache HTML-Seite aus Codebeispiel 2.3 sieht das DOM beispielsweise wie in Abb. 2.6 aus.
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5
<meta charset="utf-8" />
6
<title>DOM-Example</title>
7
<link rel="stylesheet" href="css/styles.css" type="text/css"
media="screen" />
8 </head>
9
10 <body>
11
12
<header>
13
<nav>
14
<ul>
15
<li></li>
16
<li></li>
17
<li></li>
18
</ul>
19
</nav>
20
</header>
21
2.3 Vom Suchen und Finden im DOM
22
<main>
23
<article>
24
<h1></h1>
25
<p></p>
26
<img alt="" src="#" />
27
</article>
28
</main>
29
30
<footer>
31
<nav></nav>
32
</footer>
33
34 </body>
35
36 </html>
Codebeispiel 2.3 additional_files/02/examples/dom_example.html
Abb. 2.5 Visualisierung der verschachtelten HTML-Struktur
25
26
2 Jetzt werden Sie Manipulator
Abb. 2.6 Baumstruktur der HTML-Seite
Die Funktion document.querySelector selektiert immer das erste Element, das dem übergebenen CSS-Selektor entspricht, und gibt es zurück. Der Selektor kann dabei ein beliebiger
valider CSS-Selektor sein. Tabelle 2.1 zeigt die wichtigsten.
Name
Beispiel
Beschreibung
Universal
selector
*
Selektiert ein beliebiges Element. Diesen Selektor sollten Sie
nicht ohne weitere Einschränkungen verwenden, da das Selektieren aller Elemente einer Website sehr viel Rechenzeit in
Anspruch nehmen kann.
Type
selector
h1
Selektiert alle Elemente eines bestimmten Typs.
ID selector
#some-id
Selektiert genau ein Element mit der gegebenen id.
Class
selector
.some-class
Selektiert alle Elemente, denen die angegebene Klasse zugewiesen wurde. Beachten Sie, dass ein Element mehrere Klassen
haben kann.
-
h1, p, .go
Das Komma ist selbst kein Selektor, sondern erlaubt es, mehrere Selektoren zu kombinieren. Im Beispiel würden alle h1-Elemente, alle p-Elemente und alle Elemente mit der Klasse go
selektiert.
Tabelle 2.1 Basis CSS3-Selektoren
2.3 Vom Suchen und Finden im DOM
Übung 2: 010010000100111101010100 — Teil 1
Abb. 2.7 Hot Binary Heat Changing
Mugthinkgeek, © 2016 ThinkGeek, Inc. All
Rights Reserved.11
Jetzt sind Sie dran. Schreiben Sie Ihre eigenen Abfragen. Benutzen Sie das folgende
HTML-Dokument als Übungsplattform.
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5
<meta charset="utf-8" />
6
7
<title>010010000100111101010100</title>
8
<meta name="description" content="JavaScript. HTML mühelos
manipuliert" />
9
10
<link rel="stylesheet" href="../../css/styles.css" type="text/css"
media="screen" />
11
<link rel="shortcut icon" href="../../img/favicon.ico" type="image/
x-icon" />
12 </head>
13
14 <body>
15
16
<header></header>
17
18
<main>
19
<h1 class="article">Hot Binary Heat Changing Mug <span
class="keyword">"010010000100111101010100"</span></h1>
20
21
<img alt="Hot Binary Heat Changing Mug" src="../../img/
thinkgeek_2024_hot_binary_heat_change_mug.gif" class="float_left"
id="product_img" />
22
23
<h2>Description</h2>
24
25
<p>Numbers make up <span class="special">everything</span> in our
digital world. They flow around us, invisible like the Force or the Matrix,
controlling all our many computer-y devices. Two numbers, in particular:
<span class="special">0 and 1</span>. <span class="b i">Off and On</span>.
Well, we can tell you this: when there's no coffee in our cup, we're
completely OFF our game. But when our mug is full of hot coffee, we're
11. http://www.thinkgeek.com/product/2024/?srp=6
27
28
2 Jetzt werden Sie Manipulator
totally ON. And now, with the <span class="keyword">Hot Binary Heat
Changing Mug</span>, there's a mug that tells us which state our mug is in.
In binary!</p>
26
27
<p>See, the <span class="keyword">Hot Binary Heat Changing
Mug</span> looks like just a dark mug with binary numbers all over it.
That's its OFF or cold state. Add hot coffee (or any liquid) and a series
of digits will turn white. Read them continuously from left to right, and
you'll read: <span class="keyword">010010000100111101010100</span>. That's
<span class="special">in binary</span>. Of course, your <span
class="keyword">Hot Binary Heat Changing Mug</span> could just be paying
you a compliment. Cheeky, mug.</p>
28
29
<p><img alt="010010000100111101010100" src="../../img/
thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg" /></p>
30
31
<h2>Product Specifications</h2>
32
33
<ul id="product_specification">
34
<li class="keyword">Hot Binary Heat Changing Mug</li>
35
<li>As you add hot liquids, the binary for "HOT" appears (read
from left to right in one line, not two: 010010000100111101010100)</li>
36
<li>A <span class="keyword">ThinkGeek</span> creation and
exclusive!</li>
37
<li>Care Instructions: <span class="i b">Hand wash only. Not
microwave or dishwasher safe.</span></li>
38
<li>Materials: Ceramic</li>
39
<li>Dimensions: approx. 3.15" diameter x 3.75" tall</li>
40
</ul>
41
42
<h3>You wanna buy it?</h3>
43
44
<p class="buy_info_text">Wenn Sie unsere sehr geniale Tasse kaufen
wollen, folgen Sie einfach den folgenden Schritten:</p>
45
46
<ol class="model" data-model="LDV73C-X3">
47
<li>Select how many items do you want.</li>
48
<li>Press "buy".</li>
49
</ol>
50
51
<form id="buy_form">
52
<select>
53
<option>1 item</option>
54
<option>2 items</option>
55
<option>3 items</option>
56
<option>4 items</option>
57
</select>
58
<input type="button" value="buy" />
59
</form>
60
</main>
61
62
<footer>(C) by ThinkGeek – Produkttext mit freundlicher
Genehmigung von ThinkGeek Inc.</footer>
63
64 </body>
65
66 </html>
Codebeispiel 2.4 additional_files/02/exercises/010010000100111101010100.html
Tippen Sie eine Abfrage in die Konsole, die:
1. das h1 -Element findet.
2. das Element mit der id buy_form findet.
3. das Element mit der id product_img findet.
2.4 …sie alle zu finden … — mit querySelectorAll
2.4
29
…sie alle zu finden … — mit querySelectorAll
Auf unserer News-Seite haben alle Artikel eine eigene Überschrift.
Ergänzen Sie bitte ein Aktuell: vor jeder dieser Überschriften.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Headlines</title>
<link rel="stylesheet" href="../../css/styles.css" type="text/css"
media="screen" />
</head>
<body>
<h2>Lorem ipsum dolor sit amet.</h2>
<h2 class="news">Quod eligendi saepe voluptates eveniet.</h2>
<h2 class="news">Architecto reiciendis magnam modi inventore.</h2>
<h2 class="news">Modi ipsum, velit rem ipsam.</h2>
<h2 class="news">Provident, officia quisquam aliquam deserunt!</h2>
</body>
</html>
Codebeispiel 2.5 additional_files/02/examples/news.html
Es gibt oft Situationen, in denen Sie mehrere Elemente gleichzeitig auslesen oder verändern
müssen. Für diese Fälle gibt es die Funktion querySelectorAll . Im Gegensatz zu
querySelector liefert sie, statt des ersten Treffers, alle zum Selektor passenden Elemente
zurück.
Öffnen Sie die Seite news.html (Codebeispiel 2.5) und geben Sie folgenden Code in die Konsole ein.
document.querySelectorAll('h2')
Sie erhalten:
NodeList [ <h2>, <h2.news>, <h2.news>, <h2.news>, <h2.news> ]
Eine NodeList ist ein Objekt, das mehrere Elemente (Knoten/Nodes) in einer Liste zusammenfasst. Der Begriff Knoten ist dabei im Sinne des HTML-Baums gemeint. Ein Knoten hat immer
nur ein Eltern-Element, kann aber beliebig viele (oder auch gar keine) Kind-Elemente haben.
Die NodeList verhält sich ähnlich wie ein Array. Sie können mit dem Index-Operator darauf
zugreifen. So gibt Ihnen z. B.
document.querySelectorAll('h2')[0].innerHTML
30
2 Jetzt werden Sie Manipulator
den Text der ersten h2 -Überschrift zurück, also im Beispiel den Text Lorem ipsum dolor sit
amet.
Wenn Sie wissen möchten, wie viele Knoten der Selektor gefunden hat, oder ob überhaupt ein
Element zum Selektor passt, können Sie, wie bei einem Array, die Eigenschaft length abfragen:
document.querySelectorAll('h2').length // => 5
document.querySelectorAll('img').length === 0 // => true, means no images
found
Um nun Björns Anforderung zu erfüllen, genügt es natürlich nicht, die Überschriften nur zu
selektieren. Sie müssen die Überschriften ändern, oder besser gesagt, den Text innerhalb der
Überschriften-Tags.
Dazu müssen Sie die Überschriften aus der NodeList mit einem forEach durchlaufen.
forEach ist aber nur für Arrays definiert — nicht für NodeLists. Zum Glück lässt sich eine
NodeList mittels Array.from in ein Array konvertieren.
1 const headings = Array.from(document.querySelectorAll('h2'));
2 headings.forEach(h => console.log(h.innerHTML));
Es handelt sich hier übrigens um einen mehrzeiligen Code, den Sie sicherlich speichern möchten: Daher ist es besser, wenn Sie ab jetzt Scratchpad (shift-f4) statt der Konsole verwenden.
Statt die Überschriften nur auszugeben, sollten Sie diese nun ändern.
1 const headings = Array.from(document.querySelectorAll('h2'));
2 headings.forEach(h => h.innerHTML = 'Aktuell: ' + h.innerHTML);
2.4 …sie alle zu finden … — mit querySelectorAll
Übung 3: 010010000100111101010100 — Teil 2
Basteln Sie noch etwas an der Artikel-Seite weiter. Schreiben Sie Ihre eigenen Abfragen.
Benutzen Sie wieder das HTML-Dokument aus Codebeispiel 2.4 als Übungsplattform.
Tippen Sie eine Abfrage in die Konsole, die:
1. alle li -Elemente findet.
2. alle h2 -Elemente findet.
3. alle Elemente mit der Klasse special findet.
4. alle li -Elemente mit der Klasse keyword findet.
5. alle span -Elemente mit der Klasse special findet.
6. alle Elemente findet, die die Klassen i UND b haben.
31
32
2 Jetzt werden Sie Manipulator
Übung 4: Makler und Anwälte…
Abb. 2.8 additional_files/02/exercises/makler_und_anwaelte.html
Stellen Sie sich vor, Sie haben die fertige Website einer Immobilien-Firma in der »Schublade«. Nun haben Sie einen neuen Kunden — eine Anwaltskanzlei — und finden, dass
sich das Layout der Website der Makler auch perfekt für die Anwälte eignen würde. Natürlich können Sie dem neuen Kunden den »neuen« Entwurf nicht mit den Texten der Makler vorstellen. Damit Sie nicht mühevoll mit copy & paste hantieren müssen, schreiben Sie
Code, der die vorhandenen Texte gegen Blind-Texte austauscht. Sie können dafür einen
der berüchtigten Lorem Ipsum-Generatoren (oder natürlich das geniale Bacon Ipsum12
bzw. Veggie Ipsum13 — je nach persönlichem Geschmack) verwenden.
1. Schreiben Sie eine Funktion, die den Inhalt aller h1 -Tags austauscht.
2. Schreiben Sie eine weitere Funktion, um den Inhalt der p -Tags auszutauschen.
3. Auch die Navigationspunkte sollen ausgetauscht werden.
2.4.1
Attribut-Selektoren
Die letzte Übung war eine nette Fingerübung, aber es gibt noch viel mehr CSS-Selektoren —
diese sind natürlich, wie alle CSS-Selektoren, auch in JS verwendbar.
Die nächsten CSS-Selektoren, die Sie sich anschauen sollten, sind die sogenannten attribute
selectors. Mit ihrer Hilfe können Sie auf Elemente mit bestimmten Attributen und Werten
zugreifen. Tabelle 2.2 zeigt eine Übersicht.
12. https://baconipsum.com
13. http://veggieipsum.com