From af025ac50c8dd66b0d5a61d4320c85c09d968a85 Mon Sep 17 00:00:00 2001
From: Philippe Torrel <webmaster@gkontra.de>
Date: Thu, 1 Oct 2026 13:13:09 +0200
Subject: [PATCH]

---
 .../unterricht/tag19/01_vorwort/vorwort.md    | 22 +++++
 .../02_document-query-selector/index.html     | 27 ++++++
 .../tag19/03_css-selektoren/index.html        | 73 +++++++++++++++
 .../04_document-query-selector-all/index.html | 46 ++++++++++
 .../05_css-attribut-selektoren/index.html     | 88 +++++++++++++++++++
 5 files changed, 256 insertions(+)
 create mode 100644 03_js-dom/unterricht/tag19/01_vorwort/vorwort.md
 create mode 100644 03_js-dom/unterricht/tag19/02_document-query-selector/index.html
 create mode 100644 03_js-dom/unterricht/tag19/03_css-selektoren/index.html
 create mode 100644 03_js-dom/unterricht/tag19/04_document-query-selector-all/index.html
 create mode 100644 03_js-dom/unterricht/tag19/05_css-attribut-selektoren/index.html

diff --git a/03_js-dom/unterricht/tag19/01_vorwort/vorwort.md b/03_js-dom/unterricht/tag19/01_vorwort/vorwort.md
new file mode 100644
index 0000000..fabe20a
--- /dev/null
+++ b/03_js-dom/unterricht/tag19/01_vorwort/vorwort.md
@@ -0,0 +1,22 @@
+| Bezeichnung | Abkürzung                             |
+| ----------- | ------------------------------------- |
+| DOM         | Document Object Model                 |
+| API         | Application Programming Interface     |
+| ROCA        | Resource-Oriented Client Architecture |
+| SEO         |  Search Engine Optimization           |
+| SEA         | Search Engine Advertising             |
+| Vanilla JS  | reines JavaScript ohne Framework      |
+
+## Links: Warum kein jQuery mehr?
+
+- <http://youmightnotneedjquery.com>
+- <http://blog.garstasio.com/you-dont-need-jquery>
+- <https://tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery>
+- <http://programmers.stackexchange.com/questions/166273/advantages-of-using-pure-javascript-over-jquery>
+
+## Links: Warum jQuery yeah!
+
+- <https://hackernoon.com/i-still-love-jquery-and-you-should-too-3114f33f249e>
+- <https://remysharp.com/2017/12/15/is-jquery-still-relevant>
+- <https://trends.builtwith.com/javascript/jQuery>
+- <https://learn.onemonth.com/why-you-should-learn-jquery-before-javascript/>
diff --git a/03_js-dom/unterricht/tag19/02_document-query-selector/index.html b/03_js-dom/unterricht/tag19/02_document-query-selector/index.html
new file mode 100644
index 0000000..9ace5cf
--- /dev/null
+++ b/03_js-dom/unterricht/tag19/02_document-query-selector/index.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>document.querySelector() - Hello World!</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>document.querySelector() - Hello World!</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const h1El = document.querySelector('h1');
+
+      h1El.innerHTML = 'Hello <em>World</em>';
+
+      console.log(h1El);
+
+      console.log(typeof h1El); // => 'object' vom Type Node-Objekt, spezifisch ein HTMLHeadlineElement
+    </script>
+  </body>
+</html>
diff --git a/03_js-dom/unterricht/tag19/03_css-selektoren/index.html b/03_js-dom/unterricht/tag19/03_css-selektoren/index.html
new file mode 100644
index 0000000..889e3e6
--- /dev/null
+++ b/03_js-dom/unterricht/tag19/03_css-selektoren/index.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CSS Selektoren</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <style>
+      /* universal Selektor (*) */
+      *,
+      html {
+        box-sizing: border-box;
+      }
+
+      /* type selector (HTML_ELEMENT) */
+      h1 {
+        color: tomato;
+      }
+
+      /* id selector (#) */
+      #image-main {
+        border: 10px solid #efefef;
+        border-radius: 12px;
+        margin: 1rem;
+      }
+
+      /* class selector (.) */
+      .box {
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        background-color: tomato;
+        border: 5px solid #333;
+        margin: 1rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      /* Menge von Selektoren (,) */
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>CSS Selektoren</h1>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore beatae veritatis quo? Voluptatibus omnis
+          deserunt suscipit placeat. Quas doloribus consectetur minima, itaque tempore, ipsam architecto veritatis
+          corporis perspiciatis deserunt aliquam!
+        </p>
+        <div class="box">Box</div>
+        <div class="box">Box</div>
+        <img src="https://picsum.photos/seed/picsum/900/400" alt="" id="image-main" />
+        <img src="https://dummyimage.com/900x400/000/f90.jpg" alt="image" />
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // document.querySelector(/* CSS SELEKTOR AUSSER PSEUDOELEMENTE */)
+      console.log(document.querySelector('h1'));
+    </script>
+  </body>
+</html>
diff --git a/03_js-dom/unterricht/tag19/04_document-query-selector-all/index.html b/03_js-dom/unterricht/tag19/04_document-query-selector-all/index.html
new file mode 100644
index 0000000..c7a58ff
--- /dev/null
+++ b/03_js-dom/unterricht/tag19/04_document-query-selector-all/index.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>document.querySelectorAll()</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>document.querySelectorAll()</h1>
+        <hr />
+        <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>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const h1El = document.querySelector('h1');
+
+      const h2Els = document.querySelectorAll('h2');
+
+      // const h2Array = [...document.querySelectorAll('h2')];
+      const h2Array = Array.from(document.querySelectorAll('h2'));
+
+      console.log('h1El: ', h1El); // => <h1>document.querySelectorAll()</h1>
+
+      // https://developer.mozilla.org/de/docs/Web/API/NodeList
+      console.log('h2Els: ', h2Els); // =>  NodeList(4) [h2.news, h2.news, h2.news, h2.news]
+      console.log('h2Array: ', h2Array); // => [h2.news, h2.news, h2.news, h2.news]
+
+      const els = h2Array.map((el) => {
+        el.style.backgroundColor = 'tomato';
+        el.style.padding = '1rem';
+        el.style.color = 'white';
+        return el;
+      });
+
+      console.log(els);
+    </script>
+  </body>
+</html>
diff --git a/03_js-dom/unterricht/tag19/05_css-attribut-selektoren/index.html b/03_js-dom/unterricht/tag19/05_css-attribut-selektoren/index.html
new file mode 100644
index 0000000..3cf4023
--- /dev/null
+++ b/03_js-dom/unterricht/tag19/05_css-attribut-selektoren/index.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CSS Attribut Selektor</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <style>
+      /* Allgemeine Formatierung */
+
+      /* universal Selektor (*) */
+      *,
+      html {
+        box-sizing: border-box;
+      }
+
+      a {
+        color: tomato;
+        text-decoration: none;
+      }
+
+      /* attribut selector ([ATTRIBUT_NAME="value"]) */
+      a[href='https://www.gfn.de'] {
+        color: blue;
+      }
+
+      /* attribut selector beginnend ([ATTRIBUT_NAME^="value"]) */
+      a[href^='https'] {
+        background-color: aqua;
+      }
+
+      /* attribut selector abschließend ([ATTRIBUT_NAME$="value"]) */
+      img[src$='jpg'],
+      img[src$='jpeg'] {
+        border: 10px solid #555;
+      }
+
+      /* attribut selector suchend ([ATTRIBUT_NAME*="value"]) */
+      a[href*='#'] {
+        font-weight: bolder;
+        text-decoration: underline;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>CSS Attribut Selektor</h1>
+
+        <hr />
+        <!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link 0$} -->
+        <nav class="menu-main">
+          <ul class="list">
+            <li><a href="https://www.google.com">Google </a></li>
+            <li><a href="https://netflix.com">Netflix</a></li>
+            <li>
+              <a href="#dropdown">Projects</a>
+              <ul class="sublist">
+                <li><a href="#">Project 01</a></li>
+                <li><a href="#">Project 02</a></li>
+                <li><a href="#">Project 03</a></li>
+              </ul>
+            </li>
+            <li><a href="http://www.gfn.de">GFN</a></li>
+            <li><a href="#text">Text</a></li>
+          </ul>
+        </nav>
+
+        <h2>Bilder</h2>
+        <p>Erstellte Bilder über Dummyimage.com</p>
+        <ul class="list">
+          <li><img src="https://dummyimage.com/400x200/c00/fff.jpg" alt="" /></li>
+          <li><img src="https://dummyimage.com/400x200/f90/fff.png" alt="" /></li>
+          <li><img src="https://dummyimage.com/400x200/fd0/fff.jpg" alt="" /></li>
+          <li><img src="https://dummyimage.com/400x200/090/fff.png" alt="" /></li>
+        </ul>
+        <p>
+          Lorem, ipsum dolor sit amet consectetur <a href="https://www.gfn.de">Zur GFN Webseite</a> adipisicing elit.
+          Veniam quisquam quidem ut eos dolorem corrupti aut <a href="#">Link</a> sed rerum voluptate dolore quod unde
+          explicabo architecto numquam eaque in, qui possimus voluptatem?
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+    </script>
+  </body>
+</html>