SELF-Wiki: Was ist das DOM?

[Matthias Scharwies]

Guten Morgen,

Wie schon angekündigt, möchte ich am 29.01. um 20:15 einen Workshop auf Discord veranstalten.

Thema: JavaScript und das DOM

Hier geht es um das 1. und 3. Kapitel, bei denen ich einerseits Verbesserungsbedarf sah, jetzt aber nicht weiß, ob ich, bzw. das Tutorial in die richtige Richtung laufe(n).

1. Was ist das DOM?

hier hatte ich es schon angekündigt: JavaScript und das DOM/Was ist das DOM?

Wir hatten an verschiedenen Stellen nahezu gleichlautende Erklärungen, die ich jetzt zu einem Anfänger-Tutorial zusammengefasst habe:

1. kurze Einleitung
2. Überschrift #DOM als Baumstruktur
   Jetzt wird der Elementbaum gezeigt, der Begriff node eingeführt und mit dem „Node-Inspektor“ veranschaulicht.
3. #Elementknoten
   muss da noch ein Beispiel hin, oder reicht der „Node-Inspektor“?

Das Tutorial ist ja geplant als erste Begegnung mit dem DOM - im Nachhinein würde ich hier am node-Inspektor einen Hinweis platzieren, dass wir so etwas in den Folgekapiteln selbst bauen werden.

Und deshalb sollte irgendwann auch mal im Tutorial ein kleineres Beispiel selbst entwickelt werden. Deshalb stelle ich am 14.01. diese Frage:

Die beiden h3-Überschriften und Abschnitte könnten evtl. nach oben, evtl. aber auch nicht. Würde ich gerne diskutieren.

Mein Vorschlag: Das "Hallo Welt"-Beispiel aus #Elementknoten_ansprechen gleich in den oberen Abschnitt #Elementknoten integrieren.

Dann würde ich - wenn wir das so beschließen - die Abschnitte "Textknoten" (ein Einzeiler) und "#Textknoten ansprechen" zusammenfassen. Dort geht es um innerHTML und die bessere Eigenschaft textContent.^[1]

Problem dieser Vorgehensweise: Der Abschnitt über Elementknoten enthält bereits den (noch nicht erklärten) Textknoten.

Alternative: Die drei Abschnitte direkt in die Liste der farbigen Knotentypen integrieren und dann nach dem Theoriekapitel eben das Kapitel DOM-Methoden lassen. Ich mag nämlich den Einleitungssatz:

Dieser Elementbaum ist jedoch nicht statisch, sondern kann durch DOM-Manipulation ausgelesen, verändert und erweitert werden.

Ausgehend von einem ermittelten Elementknoten lässt sich dann schnell auf dessen Attribute und Inhalt zugreifen.

1.4. Attributknoten

Wer hat eine Idee zu einem besseren Beispiel, das evtl. auch mit Element.hasAttributes arbeitet.

Das ist hier das Problem: Attributknoten würde ich heute mit classList, querySelector() und matches() ansprechen. Habt ihr einen Use Case, in dem es wirklich vorrangig um Attribute geht?

Dann könnte man das hier so kurz lassen und auf ein anderes Beispiel weiter hinten/woanders verweisen.

3. DOM-Manipulation

Wie gesagt: Es geht um ein Anfänger-Tutorial, in dem erste Schritte der Erzeugung und Veränderung von Elenenten gezeigt werden sollten.

Da war der Bildwechsler ideal:

Aus …

<a href="peru-3.jpg">
  	<img src="peru-3-sm.jpg" alt="Peru 2007: Machu Picchu">
  </a>  

nehmen wir href, alt und fügen es in einem dialog-Element in ein neues Bild ein. Den Link unterdrücken wir mit preventDefault.

Das Script war imho auch für Anfänger verständlich:

  document.querySelector('.gallery').addEventListener('click',function (evt) {
    evt.preventDefault();
		let element = event.target;
		let parentURL = element.parentNode.href;
		let imgAlt = event.target.alt;
		let img = document.querySelector('#lightbox img');
		img.src = parentURL;
		img.alt = imgAlt;
		lightbox.showModal();
  });
 
  document.getElementById('close-dialog').addEventListener('click', () => {
			lightbox.close();
		}); 

Das Erzeugen der Buttons und die Weiter-Methode mit closest schienen mir zu schwierig, weswegen ich den Neuansatz mit der ToDo-Liste anfing. Sie ist aber im halbfertigen Zustand bereits komplexer als der Bildwechsler.

@Felix Riesterer schlug folgendes vor:

Wie wäre es mit einem Anwendungsbeispiel, welches z.B. eine tabellarische Darstellung von Informationen interaktiv nutzbar macht? Etwas in der Art, wie wir auf unseren Profil-Seiten unser Postingaufkommen in einer Diagrammkurve dargestellt bekommen, vielleicht? Du hattest doch mal die Idee zu einem Vokabeltrainer...?

Das wäre der Zeitpunkt unseren Workshop für ein Brainstorming / Getränke- und Pinkelpause für 10min zu unterbrechen.

Anschließend könnte man die verschiedenen Ideen zu Anwendungsfällen diskutieren. Und im Idealfall eine attraktive, anfängergerechte und trotzdem anspruchsvolle Aufgabe finden. Die Umsetzung würde ich dann übernehmen.

4. DOM-Traversal

Eigentlich könnte das noch ins 1. Kapitel, würde dort aber aus einem Tutorial einen theoretischen Grundlagenartikel machen. Hier (oder in einer eigenen Seite) wäre es eine gute Wiederholung zum DOM-tree und jetzt stellt sich mir die Frage:

Gibt es einen Anwendungsfall, in dem man heute noch parentNode und childNodes beötigt?

ChatGPT spuckte mir hier aus, das man beim Durchsuchen von textContent auf verbotene Inhalte durch den DOM-Tree gehen könnte.

Hat jemand eine zündende Idee?

X. unsere Referenzseiten

• JavaScript/DOM/Node
• JavaScript/DOM/Element

Hier gibt es viele Beispiele, die noch von Stefan Münz stammen. document.write und onclick sind entfernt, trotzdem könnten viele Seiten ein Gardening vertragen:

1. {{Iconset|}} durch {{Caniuse|}} ersetzen (Kangax ist imho nicht mehr nötig, da Caniuse mittlerweile auch alle JS-Methoden enthält)
2. Überschrift "Anwendungsbeispiel" weg, dafür einen titel=... ins Beispiel
3. attraktive(re) Beispiele suchen
4. Weblinks und Quellen zusammenfassen; tote Links entfernen; Links aktualisieren.
5. ein Siehe auch mit Cards zu unserem DOM-Tutorial einfügen.

Wer Lust hat, kurz eine kleinere Seite zu überarbeiten - nur zu! Freiwillige vor!

---

Ich würde mich freuen, wenn am Mittwoch einige aufschlagen würden und wir gemeinsam eines der wichtigsten Tutorials verbessern könnten!

Herzliche Grüße
Matthias Scharwies

---

1. Auf JavaScript/DOM/Node/textContent findet sich ein tutorialartiger Vergleich von innerHTML vs innerText vs textContent - das müsste man abgleichen. ↩︎