diff --git a/03_js-dom/uebungen/u15_tasse-01001/index.html b/03_js-dom/uebungen/u15_tasse-01001/index.html
index 78bb0f8..34136cf 100644
--- a/03_js-dom/uebungen/u15_tasse-01001/index.html
+++ b/03_js-dom/uebungen/u15_tasse-01001/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -103,7 +103,18 @@
         // 1. Füge in der Liste der Product Specifications mithilfe von JavaScript folgenden Listenpunkt hinzu:
         // Capacity: 11 oz.
 
+        const newItem = document.createElement('li');
+        newItem.textContent = 'Capacity: 11 oz.';
+        const listProductSpecification = $('#product_specification');
+        listProductSpecification.append(newItem);
+
         // 2. Erweitere die Select-Box neben dem buy-Button mithilfe von JavaScript um den Eintrag: 5 items.
+
+        const formBuy = $('#buy_form');
+        const selectEl = formBuy.querySelector('select');
+        const newOption = document.createElement('option');
+        newOption.textContent = '5 items';
+        selectEl.append(newOption);
       }
     </script>
   </body>
diff --git a/03_js-dom/uebungen/u16_tasse-01001/index.html b/03_js-dom/uebungen/u16_tasse-01001/index.html
index 58d8753..58c6cda 100644
--- a/03_js-dom/uebungen/u16_tasse-01001/index.html
+++ b/03_js-dom/uebungen/u16_tasse-01001/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -101,8 +101,15 @@
         // Verändere erneut die Produktseite der Binär-Tasse mithilfe von JavaScript. Du kannst auch hier wieder die JS-Konsole verwenden.
 
         // 1. Entferne die Überschrift Description mit der remove-Methode.
+        // Die erste h2-Überschrift im main-Bereich ist Description.
+        $('main h2').remove();
+        // $('main h2').parentNode.removeChild($('main h2'))
 
         // 2. Entferne mit der remove-Methode den Text "010010000100111101010100" aus der Hauptüberschrift.
+        // Der Binärtext steht in einem eigenen span innerhalb der Hauptüberschrift.
+
+        $('h1.article .keyword').remove();
+        // $('h1.article .keyword').parentNode.removeChild($('h1.article .keyword'));
       }
     </script>
   </body>
diff --git a/03_js-dom/uebungen/u17_tasse-01001/index.html b/03_js-dom/uebungen/u17_tasse-01001/index.html
index 5b9ded8..50650fc 100644
--- a/03_js-dom/uebungen/u17_tasse-01001/index.html
+++ b/03_js-dom/uebungen/u17_tasse-01001/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -101,10 +101,37 @@
         // Verändere die Produktseite der Binär-Tasse mithilfe von JavaScript.
 
         // Füge noch einmal den folgenden Listenpunkt zur Liste der Product Specifications hinzu:
+        const li = document.createElement('li');
+        li.textContent = 'Capacity: 11 oz.';
 
         // Capacity: 11 oz.
 
         // Füge den Listenpunkt aber dieses Mal nicht am Ende der Liste ein, sondern vor dem Eintrag Materials: Ceramic.
+
+        $('#product_specification').insertBefore(li, $$('#product_specification li')[4]);
+
+        $$('#product_specification li')[4].before(li);
+
+        // DOM Traversal Befehle
+        document
+          .getElementById('product_specification')
+          .lastElementChild //
+          .previousElementSibling.before(li);
+
+        document.getElementById('product_specification').children[4].before(li);
+
+        // Element suchen
+        const foundListItem = $$('#product_specification li').find((el) => {
+          return el.textContent.trim().includes('Materials: Ceramic');
+        });
+
+        foundListItem && foundListItem.before(li);
+
+        const foundListItemIdx = $$('#product_specification li').findIndex((el) => {
+          return el.textContent.trim().includes('Materials: Ceramic');
+        });
+
+        foundListItemIdx !== -1 && $(`#product_specification li:nth-child(${foundListItemIdx} )`).before(li);
       }
     </script>
   </body>
diff --git a/03_js-dom/unterricht/tag23/03_product-manager/assets/js/main.js b/03_js-dom/unterricht/tag23/03_product-manager/assets/js/main.js
index f5923b5..e77bf66 100644
--- a/03_js-dom/unterricht/tag23/03_product-manager/assets/js/main.js
+++ b/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) => {
diff --git a/03_js-dom/unterricht/tag24/01_dom-bereiche/dom-creation.html b/03_js-dom/unterricht/tag24/01_dom-bereiche/dom-creation.html
new file mode 100644
index 0000000..8111bbb
--- /dev/null
+++ b/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>
diff --git a/03_js-dom/unterricht/tag24/01_dom-bereiche/dom-manipulation.html b/03_js-dom/unterricht/tag24/01_dom-bereiche/dom-manipulation.html
new file mode 100644
index 0000000..b1253e2
--- /dev/null
+++ b/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>
diff --git a/03_js-dom/unterricht/tag24/01_dom-bereiche/dom-selection.html b/03_js-dom/unterricht/tag24/01_dom-bereiche/dom-selection.html
new file mode 100644
index 0000000..0d7bdeb
--- /dev/null
+++ b/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>
diff --git a/03_js-dom/unterricht/tag24/01_dom-bereiche/dom-traversal.html b/03_js-dom/unterricht/tag24/01_dom-bereiche/dom-traversal.html
new file mode 100644
index 0000000..c606346
--- /dev/null
+++ b/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>