This commit is contained in:
Philippe Torrel
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -166,7 +166,7 @@
|
||||
|
||||
const createBtn = (options = {}) => {
|
||||
const {
|
||||
classNames = [],
|
||||
classNames = ['btn-primary'],
|
||||
iconName = 'circle',
|
||||
label,
|
||||
clickHandler = (e) => {
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user