finalized JS DOM

03_dom/uebungen/u18_cuteycats/README.md

@@ -0,0 +1,22 @@
+# Übung 18: Cuteycat
+
+Der Katzenfreundeverein Cuteycat hat einen Auftrag für dich. Der Verein möchte auf seiner Website einen Wettbewerb ausrichten. Die Seite zeigt eine Reihe von Katzen, aus denen ein Besucher jeweils die drei niedlichsten auswählen soll.
+
+1. Sobald ein Besucher auf eine der Katzen klickt, soll diese auch in der rechten Box (Cutest Cats) erscheinen. Sie darf aber aus der Liste der Katzen (Our Cats) nicht verschwinden!
+
+2. Achte darauf, dass sich die gleiche Katze nicht zweimal auswählen lässt.
+
+3. Es darf nicht mehr als drei niedlichste Katzen geben.
+
+4. Benutzer sollen eine Katze in der Gewinnerbox (Cutest Cats) anklicken können, um sie wieder herauszunehmen.
+
+**Hinweise**
+Versuche die Übung ohne .innerHTML zu lösen!
+
+Unter der URL <http://loremflickr.com/150/150/cute,kitten/all> kannst du weitere zufällige Katzenbilder generieren.
+
+Die Seite <http://fantasynamegenerators.com/cat-names.php> produziert zufällige Katzennamen.
+
+Verwende `.cloneNode(true)` auf den `li`-Elementen, um das Entfernen der Katzen aus Our Cats zu verhindern.
+
+Registriere den Event-Handler auf den `li`-Elementen. Falls der Benutzer aber nicht direkt das `li` anklickt, sondern nur Bild oder Text (Name der Katze), so zeigt event.target auf das angeklickte Element. Mittels event.currentTarget kannst du aber immer noch auf das `li` zugreifen. `currentTarget` enthält immer das Element, auf dem der Handler tatsächlich registriert wurde.

03_dom/uebungen/u18_cuteycats/assets/css/main.css

@@ -0,0 +1,76 @@
+@charset "UTF-8";
+/* Color Theme Swatches in Hex */
+/* Color Theme Swatches in RGBA */
+*,
+html {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  background-color: #f7eedf;
+}
+
+.m-cutey-cat h2 {
+  color: #7aa67a;
+}
+.m-cutey-cat .box-cat-selection {
+  position: fixed;
+}
+.m-cutey-cat ul.list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-family: Georgia, "Times New Roman", Times, serif;
+  font-size: 2rem;
+}
+.m-cutey-cat ul.list li {
+  min-width: 400px;
+  background-color: #feaea5;
+  margin: 0 0 10px;
+  user-select: none;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
+  transition: all 0.4s cubic-bezier(0.52, 0.02, 0.43, 1.39);
+}
+.m-cutey-cat ul.list li:not(.selected):hover {
+  background-color: #fd8173;
+  box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
+  transform: scale(1.1);
+}
+.m-cutey-cat ul.list li:not(.selected):hover img {
+  border-width: 0;
+}
+.m-cutey-cat ul.list li img {
+  width: 120px;
+  border: 10px solid rgba(255, 255, 255, 0.6);
+  transition: all 0.4s;
+}
+.m-cutey-cat ul.list li span {
+  color: white;
+  padding: 0 1rem;
+  letter-spacing: 2px;
+}
+.m-cutey-cat ul.list.list-cat-vote li.selected {
+  background-color: #ffdbd7;
+  opacity: 0.5;
+}
+.m-cutey-cat ul.list.list-cat-selection li {
+  background-color: #b7cfb7;
+}
+.m-cutey-cat ul.list.list-cat-selection li:hover {
+  background-color: #98bb98;
+}
+.m-cutey-cat ul.list.list-cat-selection li:hover::after {
+  position: absolute;
+  top: 30px;
+  right: 1.5rem;
+  content: "";
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  color: white;
+}
+
+/*# sourceMappingURL=main.css.map */

03_dom/uebungen/u18_cuteycats/assets/css/main.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss"],"names":[],"mappings":";AAEA;AAOA;AAWA;AAAA;EAEE;;;AAGF;AAAA;EAEE;EACA,kBAzBa;;;AA+Bb;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA,kBA7CS;EA8CT;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAMA;EACE;EACA;;AAMJ;EACE,kBAxFO;;AAyFP;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"main.css"}

03_dom/uebungen/u18_cuteycats/assets/js/libs/helpers.js

@@ -0,0 +1,17 @@
+const $ = (qs) => document.querySelector(qs);
+const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+const $on = (el, ev, fn) => {
+  Array.isArray(el) ? el.forEach((ae) => $on(ae, ev, fn)) : el.addEventListener(ev, fn);
+  return el;
+};
+
+Node.prototype.on = function (name, fn) {
+  this.addEventListener(name, fn);
+  return this;
+};
+
+Array.prototype.on = Array.prototype.addEventListener = function (name, fn) {
+  this.forEach((elem) => elem.addEventListener(name, fn));
+  return this;
+};

03_dom/uebungen/u18_cuteycats/assets/js/main.js

@@ -0,0 +1,40 @@
+'use strict';
+
+(() => {
+  // === DOM & VARS =======
+  const DOM = {};
+
+  // === INIT =============
+  const init = () => {};
+
+  // === EVENTHANDLER =====
+
+  // === XHR/FETCH ========
+
+  // === FUNCTIONS ========
+
+  init();
+})();
+
+// Übung 18: Cuteycat
+
+// Der Katzenfreundeverein Cuteycat hat einen Auftrag für dich. Der Verein möchte auf seiner Website einen Wettbewerb ausrichten. Die Seite zeigt eine Reihe von Katzen, aus denen ein Besucher jeweils die drei niedlichsten auswählen soll.
+
+// 1. Sobald ein Besucher auf eine der Katzen klickt, soll diese auch in der rechten Box (Cutest Cats) erscheinen. Sie darf aber aus der Liste der Katzen (Our Cats) nicht verschwinden!
+
+// 2. Achte darauf, dass sich die gleiche Katze nicht zweimal auswählen lässt.
+
+// 3. Es darf nicht mehr als drei niedlichste Katzen geben.
+
+// 4. Benutzer sollen eine Katze in der Gewinnerbox (Cutest Cats) anklicken können, um sie wieder herauszunehmen.
+
+// Hinweise
+// Versuche die Übung ohne .innerHTML zu lösen!
+
+// Unter der URL http://loremflickr.com/150/150/cute,kitten/all kannst du weitere zufällige Katzenbilder generieren.
+
+// Die Seite http://fantasynamegenerators.com/cat-names.php produziert zufällige Katzennamen.
+
+// Verwende .cloneNode(true) auf den li-Elementen, um das Entfernen der Katzen aus Our Cats zu verhindern.
+
+// Registriere den Event-Handler auf den li-Elementen. Falls der Benutzer aber nicht direkt das li anklickt, sondern nur Bild oder Text (Name der Katze), so zeigt event.target auf das angeklickte Element. Mittels event.currentTarget kannst du aber immer noch auf das li zugreifen. currentTarget enthält immer das Element, auf dem der Handler tatsächlich registriert wurde.

03_dom/uebungen/u18_cuteycats/assets/scss/main.scss

@@ -0,0 +1,103 @@
+// sass assets/scss/main.scss:assets/css/main.css --style=expanded --watch
+
+/* Color Theme Swatches in Hex */
+$color-theme1: #f7eedf;
+$color-theme2: #b7cfb7;
+$color-theme3: #ffcdb6;
+$color-theme4: #feaea5;
+$color-theme5: #ffc7a2;
+
+$primary-color: #efefef;
+
+// Allgemeine Formatierung =================================
+
+*,
+html {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  background-color: $color-theme1;
+}
+
+// Module cutey cat ======================
+
+.m-cutey-cat {
+  h2 {
+    color: darken($color-theme2, 20);
+  }
+
+  .box-cat-selection {
+    position: fixed;
+  }
+
+  ul.list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    font-size: 2rem;
+
+    li {
+      min-width: 400px;
+      background-color: $color-theme4;
+      margin: 0 0 10px;
+      user-select: none;
+      border-radius: 16px;
+      overflow: hidden;
+      box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
+      transition: all 0.4s cubic-bezier(0.52, 0.02, 0.43, 1.39);
+      &:not(.selected):hover {
+        background-color: darken($color-theme4, 10);
+        box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
+        transform: scale(1.1);
+
+        img {
+          border-width: 0;
+        }
+      }
+
+      img {
+        width: 120px;
+        border: 10px solid rgba(white, 0.6);
+        transition: all 0.4s;
+      }
+
+      span {
+        color: white;
+        padding: 0 1rem;
+        letter-spacing: 2px;
+      }
+    }
+
+    &.list-cat-vote {
+      li {
+        &.selected {
+          background-color: lighten($color-theme4, 10);
+          opacity: 0.5;
+        }
+      }
+    }
+
+    &.list-cat-selection {
+      li {
+        background-color: $color-theme2;
+        &:hover {
+          background-color: darken($color-theme2, 10);
+
+          &::after {
+            position: absolute;
+            top: 30px;
+            right: 1.5rem;
+            content: '\f1f8';
+            font-family: 'Font Awesome 5 Free';
+            font-weight: 900;
+            color: white;
+          }
+        }
+      }
+    }
+  }
+}

03_dom/uebungen/u18_cuteycats/index.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cutey Cats</title>
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css" />
+    <link rel="stylesheet" href="assets/css/main.css" />
+
+    <script src="assets/js/main.js" defer></script>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Cutey Cats</h1>
+      </div>
+
+      <section class="section-cutey-cat">
+        <div class="m-cutey-cat">
+          <div class="container">
+            <div class="row">
+              <div class="col">
+                <div class="box-cat-vote">
+                  <h2>Our Cats</h2>
+                  <ul class="list list-cat-vote">
+                    <li><img src="assets/img/kittens/1.jpg" alt="cat 1" /><span>Chance</span></li>
+                    <li><img src="assets/img/kittens/2.jpg" alt="cat 2" /><span>MeowMix</span></li>
+                    <li><img src="assets/img/kittens/3.jpg" alt="cat 3" /><span>Stripes</span></li>
+                    <li><img src="assets/img/kittens/4.jpg" alt="cat 4" /><span>Schrodinger</span></li>
+                    <li><img src="assets/img/kittens/5.jpg" alt="cat 5" /><span>Waffles</span></li>
+                    <li><img src="assets/img/kittens/6.jpg" alt="cat 6" /><span>Tazmina</span></li>
+                    <li><img src="assets/img/kittens/7.jpg" alt="cat 7" /><span>Wiggle</span></li>
+                    <li><img src="assets/img/kittens/8.jpg" alt="cat 8" /><span>Gin</span></li>
+                    <li><img src="assets/img/kittens/9.jpg" alt="cat 9" /><span>Paws</span></li>
+                    <li><img src="assets/img/kittens/10.jpg" alt="cat 10" /><span>Marshmallow</span></li>
+                    <li><img src="assets/img/kittens/11.jpg" alt="cat 11" /><span>Caesar</span></li>
+                    <li><img src="assets/img/kittens/12.jpg" alt="cat 12" /><span>Trogdor</span></li>
+                    <li><img src="assets/img/kittens/13.jpg" alt="cat 13" /><span>Sourpuss</span></li>
+                    <li><img src="assets/img/kittens/14.jpg" alt="cat 14" /><span>Stitch</span></li>
+                    <li><img src="assets/img/kittens/15.jpg" alt="cat 15" /><span>Sunshine</span></li>
+                  </ul>
+                </div>
+              </div>
+
+              <div class="col">
+                <div class="box-cat-selection">
+                  <h2>Cutest Cats</h2>
+                  <ul class="list list-cat-selection"></ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>

03_dom/unterricht/tag26/01_product-manager-final/assets/js/main.js

@@ -23,6 +23,7 @@
     console.log('init');
     // Funktionaufrufe zu beginn der Anwendung
     initProducts();
+
     // Event-Lauscher zu beginn der Anwendung
     DOM.btnAdd.addEventListener('click', onClickAdd);
   };
@@ -37,33 +38,51 @@
     };
 
     addProduct(product);
+
+    disableNonFunctionalButtons();
   };
 
   const onClickRemove = (e) => {
     const btnEl = e.currentTarget;
-    const currentRowEl = btnEl.parentNode.parentNode; // parentNode -> td - parentNode -> tr
+    //const currentRowEl = btnEl.parentNode.parentNode; // parentNode -> td - parentNode -> tr
+    // MDN https://developer.mozilla.org/de/docs/Web/API/Element/closest
+    //const currentRowEl = btnEl.closest('tr');
+
+    const currentRowEl = parents(btnEl, 'tr')[0];
 
     currentRowEl.remove(); // kein IE11 support
     // DOM.tBody.removeChild(currentRowEl);
+    disableNonFunctionalButtons();
   };
 
   const onClickMoveUp = (e) => {
     const btnEl = e.currentTarget;
-    const currentRowEl = btnEl.parentNode.parentNode; // aktuelle Zeile (tr) mit dem Button
+    // const currentRowEl = btnEl.parentNode.parentNode; // aktuelle Zeile (tr) mit dem Button
+    const currentRowEl = parents(btnEl, 'tr')[0];
 
     // ParentNode.insertBefore(referenceElement, targetElement)
-    DOM.tBody.insertBefore(currentRowEl, currentRowEl.previousElementSibling);
+    // DOM.tBody.insertBefore(currentRowEl, currentRowEl.previousElementSibling);
+
+    // targetElement.before(referenceElement)
+    currentRowEl.previousElementSibling.before(currentRowEl);
 
     console.log('move up');
+    disableNonFunctionalButtons();
   };
 
   const onClickMoveDown = (e) => {
     const btnEl = e.currentTarget;
-    const currentRowEl = btnEl.parentNode.parentNode; // aktuelle Zeile (tr) mit dem Button
+    // const currentRowEl = btnEl.parentNode.parentNode; // aktuelle Zeile (tr) mit dem Button
+    const currentRowEl = parents(btnEl, 'tr')[0];
 
     // ParentNode.insertBefore(referenceElement, targetElement)
-    DOM.tBody.insertBefore(currentRowEl, currentRowEl.nextElementSibling.nextElementSibling);
+    // DOM.tBody.insertBefore(currentRowEl, currentRowEl.nextElementSibling.nextElementSibling);
+
+    // targetElement.after(referenceElement)
+    currentRowEl.nextElementSibling.after(currentRowEl);
+
     console.log('move down');
+    disableNonFunctionalButtons();
   };
 
   // === XHR/FETCH ========
@@ -73,7 +92,7 @@
     PRODUCTS.forEach((product) => {
       addProduct(product);
     });
-
+    disableNonFunctionalButtons();
     // PRODUCTS.forEach(addProduct);
   };
 
@@ -93,29 +112,65 @@
     const td = document.createElement('td');
     td.classList.add('td-actions');
 
-    const btnRemove = createButtonRemove();
+    const btnRemove = createButton({
-    const btnMoveUp = createButtonMoveUp();
+      classes: ['btn-danger', 'button-product-remove'],
-    const btnMoveDown = createButtonMoveDown();
+      iconName: 'trash-can',
+      label: 'Remove Product',
+      clickHandler: onClickRemove,
+    });
+    const btnMoveUp = createButton({
+      classes: ['btn-secondary', 'button-product-move-up'],
+      iconName: 'caret-up',
+      label: 'Move Up',
+      clickHandler: onClickMoveUp,
+    });
+    const btnMoveDown = createButton({
+      classes: ['btn-secondary', 'button-product-move-down'],
+      iconName: 'caret-down',
+      label: 'Move Down',
+      clickHandler: onClickMoveDown,
+    });
 
     // td.append(btnRemove, btnMoveUp, btnMoveDown)
     td.appendChild(btnRemove);
     td.appendChild(btnMoveUp);
     td.appendChild(btnMoveDown);
 
+    // td.appendChild(
+    //   createButton({
+    //     classes: ['btn-primary', 'button-login'],
+    //     label: 'login',
+    //     iconName: 'right-to-bracket',
+    //     clickHandler: () => {
+    //       console.log('login');
+    //     },
+    //   }),
+    // );
+
     return td;
   };
 
-  const createButtonRemove = () => {
+  const createButton = (options = {}) => {
+    // Destructuring
+    const {
+      classes = [],
+      iconName = 'circle',
+      label = 'No Label',
+      clickHandler = () => {
+        console.log('no action');
+      },
+    } = options;
+
     const btn = document.createElement('button');
     const icon = document.createElement('i');
     const span = document.createElement('span');
 
-    btn.classList.add('btn', 'btn-sm', 'btn-danger', 'button-product-remove');
+    btn.classList.add('btn', 'btn-sm', ...classes);
-    icon.classList.add('fas', 'fa-trash-can');
+    icon.classList.add('fas', `fa-${iconName}`);
     span.classList.add('visually-hidden');
-    span.textContent = 'Remove Product';
+    span.textContent = label;
 
-    btn.addEventListener('click', onClickRemove);
+    btn.addEventListener('click', clickHandler);
     // btn.append(icon,span)
     btn.appendChild(icon);
     btn.appendChild(span);
@@ -123,41 +178,68 @@
     return btn;
   };
 
-  const createButtonMoveUp = () => {
+  // createButton({
-    const btn = document.createElement('button');
+  //   classes: ['btn-primary', 'button-login-user'],
-    const icon = document.createElement('i');
+  //   iconName: 'right-to-bracket',
-    const span = document.createElement('span');
+  //   label: 'Login',
+  //   clickHandler: () => {
+  //     console.log('login process...');
+  //   },
+  // });
 
-    btn.classList.add('btn', 'btn-sm', 'btn-secondary', 'button-product-move-up');
+  // const createButtonRemove = () => {
-    icon.classList.add('fas', 'fa-caret-up');
+  //   const btn = document.createElement('button');
-    span.classList.add('visually-hidden');
+  //   const icon = document.createElement('i');
-    span.textContent = 'Move Up';
+  //   const span = document.createElement('span');
 
-    btn.addEventListener('click', onClickMoveUp);
+  //   btn.classList.add('btn', 'btn-sm', 'btn-danger', 'button-product-remove');
-    // btn.append(icon,span)
+  //   icon.classList.add('fas', 'fa-trash-can');
-    btn.appendChild(icon);
+  //   span.classList.add('visually-hidden');
-    btn.appendChild(span);
+  //   span.textContent = 'Remove Product';
 
-    return btn;
+  //   btn.addEventListener('click', onClickRemove);
-  };
+  //   // btn.append(icon,span)
+  //   btn.appendChild(icon);
+  //   btn.appendChild(span);
 
-  const createButtonMoveDown = () => {
+  //   return btn;
-    const btn = document.createElement('button');
+  // };
-    const icon = document.createElement('i');
-    const span = document.createElement('span');
 
-    btn.classList.add('btn', 'btn-sm', 'btn-secondary', 'button-product-move-down');
+  // const createButtonMoveUp = () => {
-    icon.classList.add('fas', 'fa-caret-down');
+  //   const btn = document.createElement('button');
-    span.classList.add('visually-hidden');
+  //   const icon = document.createElement('i');
-    span.textContent = 'Move Down';
+  //   const span = document.createElement('span');
 
-    btn.addEventListener('click', onClickMoveDown);
+  //   btn.classList.add('btn', 'btn-sm', 'btn-secondary', 'button-product-move-up');
-    // btn.append(icon,span)
+  //   icon.classList.add('fas', 'fa-caret-up');
-    btn.appendChild(icon);
+  //   span.classList.add('visually-hidden');
-    btn.appendChild(span);
+  //   span.textContent = 'Move Up';
 
-    return btn;
+  //   btn.addEventListener('click', onClickMoveUp);
-  };
+  //   // btn.append(icon,span)
+  //   btn.appendChild(icon);
+  //   btn.appendChild(span);
+
+  //   return btn;
+  // };
+
+  // const createButtonMoveDown = () => {
+  //   const btn = document.createElement('button');
+  //   const icon = document.createElement('i');
+  //   const span = document.createElement('span');
+
+  //   btn.classList.add('btn', 'btn-sm', 'btn-secondary', 'button-product-move-down');
+  //   icon.classList.add('fas', 'fa-caret-down');
+  //   span.classList.add('visually-hidden');
+  //   span.textContent = 'Move Down';
+
+  //   btn.addEventListener('click', onClickMoveDown);
+  //   // btn.append(icon,span)
+  //   btn.appendChild(icon);
+  //   btn.appendChild(span);
+
+  //   return btn;
+  // };
 
   const createTd = (text, className = '') => {
     const td = document.createElement('td');
@@ -177,5 +259,24 @@
     return tr;
   };
 
+  const disableNonFunctionalButtons = () => {
+    Array.from(DOM.tBody.querySelectorAll('tr')).forEach((tr) => {
+      const btnMoveUp = tr.querySelector('.button-product-move-up');
+      const btnMoveDown = tr.querySelector('.button-product-move-down');
+
+      btnMoveUp.disabled = !tr.previousElementSibling;
+      btnMoveDown.disabled = !tr.nextElementSibling;
+    });
+  };
+
+  // Helferfunktion aus jQuery (youmightnotjquery)
+  const parents = (el, selector) => {
+    const parents = [];
+    while ((el = el.parentNode) && el !== document) {
+      if (!selector || el.matches(selector)) parents.push(el);
+    }
+    return parents;
+  };
+
   init();
 })();

03_dom/unterricht/tag26/02_dom-bereiche/dom-creation.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DOM Creation</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>DOM Creation</h1>
+        <hr />
+        <ul class="list">
+          <li>Listenpunkt 01</li>
+          <li>Listenpunkt 02</li>
+          <li>Listenpunkt 03</li>
+          <li>Listenpunkt 04</li>
+        </ul>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const $ = (qs) => document.querySelector(qs);
+      const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+      // Node.innerHTML
+      $('ul.list').innerHTML += '<li>Listenpunkt 05</li>';
+
+      // Node.innerText & Node.textContent
+      $('ul.list li').textContent = 'Listenpunkt 001';
+      $('ul.list li:nth-child(2)').innerText = 'Listenpunkt 002';
+
+      // document.createElement('HTML_ELEMENT')
+      const liEl = document.createElement('li');
+      liEl.textContent = 'Listenpunkt 06';
+
+      // Node.cloneNode(true)
+      const liCloneEl = $('ul.list li').cloneNode(true);
+
+      // DOM Manipulation ==========
+      $('ul.list').appendChild(liEl);
+      $('ul.list').appendChild(liCloneEl);
+    </script>
+  </body>
+</html>

03_dom/unterricht/tag26/02_dom-bereiche/dom-manipulation.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DOM Manipulation</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>DOM Manipulation</h1>
+        <hr />
+        <ul class="list">
+          <li>Listenpunkt 01</li>
+          <li>Listenpunkt 02</li>
+          <li>Listenpunkt 03</li>
+          <li>Listenpunkt 04</li>
+        </ul>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const $ = (qs) => document.querySelector(qs);
+      const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+      const liEl = document.createElement('li');
+      liEl.textContent = 'Listenpunkt neu';
+
+      // DOM Manipulation
+
+      // appendChild()
+      $('ul.list').appendChild(liEl);
+
+      // append()
+      $('ul.list').append($('ul.list li'));
+
+      // prepend()
+      $('ul.list').prepend(liEl);
+
+      // remove()
+      $('ul.list li').remove();
+
+      // removeChild() // IE11 support
+      $('ul.list').removeChild($('ul.list li'));
+
+      // insertBefore(refNode, targetNode)
+      $('ul.list').insertBefore($('ul.list li'), $('ul.list li:last-child'));
+
+      // before() || after()
+      $('ul.list li').before($('ul.list li:last-child'));
+      $('ul.list li:first-child').after($('ul.list li:last-child'));
+
+      //
+      $('ul.list').classList.add('list-group');
+      $('ul.list').dataset.id = 'list';
+      $('.container').id = 'main-container';
+      $('h1').style.backgroundColor = 'tomato';
+      $('h1').setAttribute('title', 'headline');
+    </script>
+  </body>
+</html>

03_dom/unterricht/tag26/02_dom-bereiche/dom-selection.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DOM Selection</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 id="headline">DOM Selection</h1>
+        <hr />
+        <!-- ul.list>li*4{Listenpunkt 0$} -->
+        <ul class="list">
+          <li>Listenpunkt 01</li>
+          <li>Listenpunkt 02</li>
+          <li>Listenpunkt 03</li>
+          <li>Listenpunkt 04</li>
+        </ul>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const $ = (qs) => document.querySelector(qs);
+      const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+      // DOM Selection
+      console.log($('ul.list li')); //=> <li>Listenpunkt 01</li>
+      console.log($$('ul.list li')); //=> [<li>Listenpunkt 01</li>, ...]
+
+      // document.querySelector('css-selector')
+      console.log(document.querySelector('ul.list li')); //=> <li>Listenpunkt 01</li>
+
+      // document.querySelectorAll('css-selector')
+      console.log(Array.from(document.querySelectorAll('ul.list'))); //=>  [<li>Listenpunkt 01</li>, ...]
+
+      // =======================
+
+      // document.getElementById('ID');
+      console.log(document.getElementById('headline')); //=> <h1 id="headline">DOM Selection</h1>
+
+      // ===== NOT RECOMMENDED TO USE OLD SELECT METHODS =====
+
+      // document.getElementsByClassName('className')
+      console.log(document.getElementsByClassName('container')); //=> HTMLCollection [div.container.py-5]
+
+      // document.getElementsByTagName('li')
+      console.log(document.getElementsByTagName('li')); //=> HTMLCollection(4) [li, li, li, li]
+    </script>
+  </body>
+</html>

03_dom/unterricht/tag26/02_dom-bereiche/dom-traversal.html

@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DOM Traversal</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>DOM Traversal</h1>
+        <hr />
+        <!-- ul.list>li*4{Listenpunkt 0$} -->
+        <ul class="list">
+          <li>Listenpunkt 01</li>
+          <li>Listenpunkt 02</li>
+          <li>Listenpunkt 03</li>
+          <li>Listenpunkt 04</li>
+        </ul>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const $ = (qs) => document.querySelector(qs);
+      const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+      // DOM Traversal
+
+      const firstLiEl = $('ul.list li');
+
+      // parentNode - Elternelement
+      console.log(firstLiEl.parentNode); //=> <ul class="list">...</ul>
+
+      // previousElementSibling - Geschwisterelement (vor)
+      console.log($('ul.list li:last-child').previousElementSibling); //=> <li>Listenpunkt 03</li>
+
+      // nextElementSibling - Geschwisterelement (nach)
+      console.log($('ul.list li:first-child').nextElementSibling); //=> <li>Listenpunkt 02</li>
+
+      // children - Kindelemente
+      console.log($('ul.list').children); // => HTMLCollection [li, li, li, li]
+
+      // Array.from(Node.children)
+      console.log(Array.from($('ul.list').children)); // =>  [li, li, li, li]
+
+      // firstElementChild - erstes Kindelement
+      console.log($('ul.list').firstElementChild); //=> <li>Listenpunkt 01</li>
+
+      // lastElementChild - letztes Kindelement
+      console.log($('ul.list').lastElementChild); //=> <li>Listenpunkt 04</li>
+
+      // ==========
+      console.log($('ul.list').children[1]); //=> <li>Listenpunkt 02</li>
+
+      // childElementCount
+      console.log($('ul.list').childElementCount); //=> 4
+
+      console.log($('ul.list').children.length); //=> 4
+      console.log($$('ul.list > li').length); //=> 4
+      console.log($('ul.list').querySelectorAll('li').length); //=> 4
+    </script>
+  </body>
+</html>

03_dom/unterricht/tag26/03_text-content-vs-inner-text-vs-inner-html/index.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>textContent vs innerText vs innerHTML</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>textContent vs innerText vs innerHTML</h1>
+        <hr />
+        <p>
+          Lorem ipsum dolor sit, <a href="https://www.gfn.de">GFN Link</a> amet consectetur adipisicing elit. Amet
+          tempora repudiandae dicta et libero, ex, quibusdam nisi id atque quaerat nam asperiores laborum hic ipsum
+          suscipit numquam. Obcaecati vero consequatur repellendus nostrum beatae laborum voluptate aperiam numquam
+          <span style="display: none">
+            VERSTECKT!!!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, commodi.
+          </span>
+          iusto optio delectus animi quia quam, provident vitae ex. Accusantium, officiis? Nemo quidem accusantium
+          voluptatibus cumque voluptates natus, consequatur exercitationem eum eligendi dolor sit nisi. Magni enim omnis
+          voluptatibus obcaecati aut? Nulla asperiores incidunt atque labore alias quia assumenda molestias, dolores
+          facilis aspernatur ea quos! Magnam suscipit et, saepe culpa repellat nesciunt repudiandae dignissimos? Nemo
+          neque nisi repellendus doloribus reiciendis, ducimus quae id?
+        </p>
+
+        <div class="output-text-content alert alert-secondary my-3"></div>
+        <div class="output-inner-text alert alert-secondary my-3"></div>
+        <div class="output-inner-html alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const $ = (qs) => document.querySelector(qs);
+      const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+      // textContent ohne Leeraum (am Anfang und Ende) und ohne HTML-Syntax (<TAGNAME>...</TAGNAME>)
+      console.log('textContent:', $('p').textContent.length);
+      // innerText ohne Leeraum (am Anfang, Ende und Zeilenumbrüchen), ohne HTML-Syntax (<TAGNAME>...</TAGNAME>) und ohne versteckten Inhalt
+      console.log('innerText:', $('p').innerText.length);
+      // innerHTML so wie im Element vorliegend
+      console.log('innerHTML:', $('p').innerHTML.length);
+
+      $('.output-text-content').textContent =
+        '<p>lorem ipsum <a href="#">Link</a><span style="display:none">IM SPAN</span></p>';
+      $('.output-inner-text').innerText =
+        '<p>lorem ipsum <a href="#">Link</a><span style="display:none">IM SPAN</span></p>';
+
+      $('.output-inner-html').innerHTML =
+        '<p>lorem ipsum <a href="#">Link</a><span style="display:none">IM SPAN</span></p>';
+    </script>
+  </body>
+</html>

03_dom/unterricht/tag26/04_outer-html-vs-inner-html/index.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Node.outerHTML vs Node.innerHTML</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Node.outerHTML vs <em>Node.innerHTML</em></h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const $ = (qs) => document.querySelector(qs);
+      const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+      console.log($('h1').innerHTML); //=> Node.innerHTML <em>Node.innerHTML</em>
+
+      console.log($('h1').outerHTML); //=> <h1>Node.outerHTML vs  <em>Node.innerHTML</em></h1>
+    </script>
+  </body>
+</html>