[S4L1] DOM

Question 1

Wofür steht der DOM?

Answer 1

-Document Object Model (DOM)

Question 2

Was ist der DOM?

Answer 2

• Eine Object Representation der HTML Elemente einer Website

- Der DOM ist die Brücke zwischen Content und dem Browser

Question 3

Ist der DOM in Javascript oder HTML oder Static?

Answer 3

• Nein der DOM ist
• KEIN Javascript
• KEIN HTML oder CSS
• NICHT Statisch/static, sondern veränderbar

Question 4

Was ist der DOM?

Answer 4

• Language Neutral API
• Dynamische/Dynamic Änderungen
• Tree Structure die Content, Struktur und Style represented

Question 5

Aus welchen Bestandteilen besteht der DOM?

Answer 5

• Aus Nodes und Types

- Jeder Node hat einen Type

Question 6

Was ist ein Node im DOM?

Answer 6

-Jeder Node ist ein Teil des Documents und besitzt einen Type

Question 7

Wie kann man in der Chrome Inspect Console sich den DOM anzeigen lassen?

Answer 7

console.log(document);

Question 8

Erkläre den DOM in einfachen Worten!

Answer 8

• Der DOM ist die Repräsentation von dem HTML und CSS Code den man geschrieben hat und welcher im Browser repräsentiert wird.
• Aber es ist nicht der Code, den man selber im IDE schreibt,
• Er ist die API/Brücke zwischen Content und der Website

Question 9

Was macht der DOM Selector:

document.getElementsByTagName(‘div’)

Answer 9

• Gibt alle Elemente der Website aus, welche ein HTML <div> sind
• Liefert diese als eine Collection zurück, welche jedes Element mit einer ID belegt

-WICHTIG CASE-SENSITIVE!!</div>

Question 10

Was sind TagNames im DOM?

Answer 10

-HTML Tag Names, wie header, a, h1, p

Question 11

Macht document.getElementsByTagName(‘div’)

und document.getelementsbytagName(‘div’) das gleiche?

Answer 11

-NEIN, CASE-SENSITIVE!

Question 12

Wie kann man mittel DOM alle Elemente einer Website beim Class name selektieren?

Answer 12

document.getElementsByClassName(‘nav-item’)

Question 13

Wie speicher man ein DOM element als Variable?

Answer 13

const title = document.getElementByID(‘content’)

Question 14

Was kann man mit DOM Selectierten HTML Elementen machen?

Answer 14

• Positionen ändern
• Überschreiben
• EventHandler hinzufügen
• in Variablen Speichern

Question 15

Funktioniert der DOM Selector für Klassen mit der . Notation?

getElementsByClassName(‘.bd-toc’)

Answer 15

-Nein, Klassen werden nur mit ihrem Namen selektiert

Question 16

Funktioniert der folgende DOM Selector?

document.querySelector(‘.bd-tock’)

Answer 16

Ja, hier wird mit .Notation gearbeitet

Question 17

Was ist dunder proto __proto__?

Answer 17

-Sagt woher die Methods eines Objects kommen

Question 18

Was macht der DOM Selector?

document.querySecltorAll(‘header li.nav-item’)

Answer 18

-Liefert einer Collection aller lists der Nav-Items

Question 19

Was selektiert querySelector bei vielen HTML Elementen?

Answer 19

Queryselector ohne All selektiert das erste Ergebnis

Question 20

Wie verändert man den dritten Paragraph einer Website mit dem DOM Selector?

Answer 20

const paragraphs = document.getElementsByTagName(‘p’)

paragraphs[2].textContent = ‘CHANGED’

Question 21

Wie verändert man den h1 header einer Website mit dem DOM Selector?

Answer 21

const headerNew = document.querySelectorAll(‘header h1’);

headerNew[0].textContent = ‘Changed Code’;

Question 22

Wann sollte man einen querySelector und wann getElementByID etc senden?

Answer 22

-querySelector bietet mehr Freiheiten, dadurch dass man sehr einfach alles selektieren kann

Question 23

Was ist der Unterschied zwischen einem Array und der Collection, welche ein querySelector zurückgibt?

Answer 23

-Der querySelector bietet keine forEach Methode für die Collection an

Question 24

Wie fügt man mit DOM ein Button hinzu?

Answer 24

const button = document.createElement('button')
// Button existiert im Memory nun, muss aber noch dem Dokument hinzugefügt werden

button.textContent = 'click me'
//Platzierung fehlt noch

section. appendChild(button)
docuemnt. querySelector(‘section.main.content’).appendChild(section)

//Klasse dem Button hinufügen NACHDEM er geadded wurde
button,classList.add('lambda-button')

Question 25

Kann man neue HTML Elemente mit dem DOM erstellen, manipulieren und sie werden trotzdem nicht angezeigt?

Answer 25

Ja, man muss das Element noch an das Document anhängen/einfügen

section.appendChild(button)

Question 26

Wie selektiert man mittels DOM die navigation und fügt einen roten Border Rand hinzu?

Answer 26

const navEl = document.querySelector(‘.top-nav’)

navEl.style.border = ‘1px solid red’

Question 27

Wie kann man über Collections die man von DOM Selectors erhält iterieren?

Answer 27

• querySelectorAll() returned eine NodeList, welche eine eingebaute forEach() Methode besitzt
• gerElementsByTagName returned eine HTMLCollection, bei welche man Array.from() nutzen muss um daraus einen Array zu machen

let nav = document.getElementsByTagName('nav a')
nav = Array.from(nav)
nav.forEach(el => console.log(el))

Question 28

Bekommt man auch wenn man getELEMENTSByClassName benutzt eine HTML Collection?

Answer 28

Ja.

Question 29

Was liefert der folgende DOM selector zurück?

document.getElementById(‘intro-info’);

Answer 29

-Das eine spezifische Element und keine HTML Collection.

Question 30

Was kann ein document.querySelector(); selektieren?

Answer 30

-Alles was CSS auch selektieren kann
-Liefert nur das erste Item zurück
-ID (‘#intro-info’)
-Class (‘.nav-item’)
-

Question 31

wie kann man mit einem querySelector alle Items anstatt nur das erste selektiern?

Answer 31

document. querySelectorAll(‘.nav-item’);

- Liefert eine NodeList zurück, welche eine forEach Methode anbietet

Question 32

Was sind die Unterschiede zwischen einer NodeList und einer HTML Collection?

Answer 32

-beide haben .length
-NodeList hat eine forEach(item => console.log(item)) Methode
-

Question 33

Wie wandelt man ein Array-like Object wie ein HTML Collection in einen Array um, um .map und .filter etc zu verwenden?

Answer 33

const arr = Array.from(nameOfConst);
arr.map( item => {return item} )

Question 34

Wie kann man den text aus einem HTML Element grabben?

Answer 34

const introText = document.querySelector('#intro-info p'); 
introText. textContent

Question 35

Wie greift man auf den TextInhalt eines HTML Elementes zu und überschreibt diesen?

Answer 35

introText. textContent = “Test”

Question 36

Wie kann man ein Attribut von einem HTML img Tag im DOMS verändern?

Answer 36

-catIMG.setAttribute(‘src’, “https://xx”); //Property way
-catImg.src = “https://xxx”; //Method way
catImg .alt = “Another Cat”;

Question 37

Wie kann man ein HTML Element umstylen mittels DOM?

Answer 37

headline. style. fontSize = “5rem”;
headline. style. color= “red”;
headline. style. color= “#fff”;

Question 38

Was genau passiert, wenn man die .style Methode in Javascript mittels DOM verwendet?

Answer 38

-Man stezt ein InlineStyle Element, welches nur von !Important noch überschrieben werden kann

Question 39

Wie kann man auf ein Object welche mittels folgendem Code im DOM selecte wurde die Klasse ändern?
const header = document.querySelector('header')

Answer 39

header. className = “green”

Question 40

Was passiert, wenn ein HTML Element mehrere Klassen hat und man diese selektieren möchte?

Answer 40

header. classList

- Liefert eine Liste mit allen Klassen des Elementes zurück

Question 41

Wie kann man Klassen aus einer classList hinzufügen oder entfernen?

Answer 41

header. classList. add(‘top’);

header. classList. remove(‘bottom’);

Question 42

was macht folgender Befehl?

header.classList. toggle(‘green’)

Answer 42

• Setzt die Klasse falls es nicht da sein sollte

- Entfernt die Klasse falls sie schon da sein sollte

Question 43

Wie erschafft man ein HTML Element mittels DOM?

Answer 43

const subHeadline = document.createElement('h1');
subHeadline.textContent = "Another Headline!"
subHeadline.style.fontSize = "5rem";
subHeadline.style.color= "red";
subHeadline .style.marginRight = "20px";
headerEl.appendChild(subHeadline)

Question 44

Was macht der Befehl headerEl.appendChild(subHeadline) im DOM?

Answer 44

-Fügt ein HTML Element als Child an das Ende des Parent Nodes an.

Question 45

Wie kann man flex Eigenschaften mit dem DOM verändern?

Answer 45

section. style. flexWrap = “wrap”;

section. style. justifyContent = “center”;

Question 46

Was macht die DOM Methode section .prepend()

Answer 46

-Fügt ein Child Element an den Anfang des Parent Elementes.