03_js-dom/unterricht/tag23/03_product-manager/assets/js/main.js

@@ -166,7 +166,7 @@
 
   const createBtn = (options = {}) => {
     const {
-      classNames = [],
+      classNames = ['btn-primary'],
       iconName = 'circle',
       label,
       clickHandler = (e) => {

03_js-dom/unterricht/tag24/01_dom-bereiche/dom-creation.html

@@ -0,0 +1,49 @@
+<!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);
+
+      // const img = new Image(); //  document.createElement('img');
+
+      // DOM Manipulation ==========
+      $('ul.list').appendChild(liEl);
+      $('ul.list').appendChild(liCloneEl);
+    </script>
+  </body>
+</html>

03_js-dom/unterricht/tag24/01_dom-bereiche/dom-manipulation.html

@@ -0,0 +1,107 @@
+<!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 list = $('ul.list');
+
+      // createElement()
+      const liEl = document.createElement('li');
+      liEl.textContent = 'Listenpunkt neu';
+
+      // appendChild()
+      list.appendChild(liEl);
+
+      // append()
+      list.append($('ul.list li'));
+
+      // prepend()
+      list.prepend(liEl);
+
+      // before() || after()
+      $('ul.list li').before(document.createElement('li'));
+      $('ul.list li:first-child').after(document.createElement('li'));
+
+      // insertBefore(newChild, refChild)
+      list.insertBefore(liEl, $('ul.list li:last-child'));
+
+      // insertAdjacentHTML(position, text)
+      // 'beforebegin' -> vor dem Element
+      // 'afterbegin'  -> erstes Kind im Element
+      // 'beforeend'   -> letztes Kind im Element
+      // 'afterend'    -> nach dem Element
+      list.insertAdjacentHTML('beforebegin', '<p>Direkt vor der Liste</p>');
+      list.insertAdjacentHTML('afterbegin', '<li class="text-primary">Erster Punkt (HTML)</li>');
+      list.insertAdjacentHTML('beforeend', '<li class="text-success">Letzter Punkt (HTML)</li>');
+      list.insertAdjacentHTML('afterend', '<p>Direkt nach der Liste</p>');
+
+      // insertAdjacentElement(position, element)
+      const badge = document.createElement('span');
+      badge.textContent = ' Neu';
+      $('h1').insertAdjacentElement('beforeend', badge);
+
+      // replaceWith()
+      const replacement = document.createElement('li');
+      replacement.textContent = 'Ersetzter Punkt';
+      $('ul.list li:nth-child(2)').replaceWith(replacement);
+
+      // replaceChild(newChild, oldChild)
+      list.replaceChild(replacement, $('ul.list li:last-child'));
+
+      // replaceChildren() // leert den Container oder ersetzt alle Kinder auf einmal
+      // list.replaceChildren();
+
+      // remove()
+      $('ul.list li').remove();
+
+      // removeChild() // IE11 support
+      list.removeChild($('ul.list li'));
+
+      // classList
+      list.classList.add('list-group');
+      list.classList.remove('andere-klasse');
+      list.classList.toggle('active');
+
+      // dataset & attribute
+      list.dataset.id = 'list'; // <ul data-id="list">...</ul>
+      list.setAttribute('aria-label', 'Hauptliste');
+      list.removeAttribute('aria-label');
+      $('.container').id = 'main-container';
+
+      // style
+      $('h1').style.backgroundColor = 'tomato';
+      $('h1').setAttribute('title', 'headline');
+
+      // createDocumentFragment()
+      const fragment = document.createDocumentFragment();
+      for (let i = 5; i <= 7; i++) {
+        const item = document.createElement('li');
+        item.textContent = `Listenpunkt 0${i}`;
+        fragment.appendChild(item);
+      }
+      list.appendChild(fragment);
+    </script>
+  </body>
+</html>

03_js-dom/unterricht/tag24/01_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>
+
+      // =====  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_js-dom/unterricht/tag24/01_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>