- Eine Object Representation der HTML Elemente einer Website - Der DOM ist die Brücke zwischen Content und dem Browser

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

[S4L1] DOM Flashcards by Sascha Majewsky

Wofür steht der DOM?

-Document Object Model (DOM)

How well did you know this?

Not at all

Perfectly

Was ist der DOM?

Eine Object Representation der HTML Elemente einer Website

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

How well did you know this?

Not at all

Perfectly

Ist der DOM in Javascript oder HTML oder Static?

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

How well did you know this?

Not at all

Perfectly

Was ist der DOM?

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

How well did you know this?

Not at all

Perfectly

Aus welchen Bestandteilen besteht der DOM?

Aus Nodes und Types

- Jeder Node hat einen Type

How well did you know this?

Not at all

Perfectly

Was ist ein Node im DOM?

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

How well did you know this?

Not at all

Perfectly

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

console.log(document);

How well did you know this?

Not at all

Perfectly

Erkläre den DOM in einfachen Worten!

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

How well did you know this?

Not at all

Perfectly

Was macht der DOM Selector:

document.getElementsByTagName(‘div’)

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>

How well did you know this?

Not at all

Perfectly

Was sind TagNames im DOM?

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

How well did you know this?

Not at all

Perfectly

Macht document.getElementsByTagName(‘div’)

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

-NEIN, CASE-SENSITIVE!

How well did you know this?

Not at all

Perfectly

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

document.getElementsByClassName(‘nav-item’)

How well did you know this?

Not at all

Perfectly

Wie speicher man ein DOM element als Variable?

const title = document.getElementByID(‘content’)

How well did you know this?

Not at all

Perfectly

Was kann man mit DOM Selectierten HTML Elementen machen?

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

How well did you know this?

Not at all

Perfectly

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

getElementsByClassName(‘.bd-toc’)

-Nein, Klassen werden nur mit ihrem Namen selektiert

How well did you know this?

Not at all

Perfectly

Funktioniert der folgende DOM Selector?

document.querySelector(‘.bd-tock’)

Ja, hier wird mit .Notation gearbeitet

How well did you know this?

Not at all

Perfectly

Was ist dunder proto __proto__?

-Sagt woher die Methods eines Objects kommen

How well did you know this?

Not at all

Perfectly

Was macht der DOM Selector?

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

-Liefert einer Collection aller lists der Nav-Items

How well did you know this?

Not at all

Perfectly

Was selektiert querySelector bei vielen HTML Elementen?

Queryselector ohne All selektiert das erste Ergebnis

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

const paragraphs = document.getElementsByTagName(‘p’)

paragraphs[2].textContent = ‘CHANGED’

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

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

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

Wann sollte man einen querySelector und wann getElementByID etc senden?

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

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

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

Wie fügt man mit DOM ein Button hinzu?

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')

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

Ja, man muss das Element noch an das Document anhängen/einfügen section.appendChild(button)

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

const navEl = document.querySelector('.top-nav') navEl.style.border = '1px solid red'

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

- 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)) ```

Bekommt man auch wenn man getELEMENTSByClassName benutzt eine HTML Collection?

Ja.

Was liefert der folgende DOM selector zurück? | document.getElementById('intro-info');

-Das eine spezifische Element und keine HTML Collection.

Was kann ein document.querySelector(); selektieren?

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

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

document. querySelectorAll('.nav-item'); | - Liefert eine NodeList zurück, welche eine forEach Methode anbietet

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

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

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

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

Wie kann man den text aus einem HTML Element grabben?

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

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

introText. textContent = "Test"

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

-catIMG.setAttribute('src', "https://xx"); //Property way -catImg.src = "https://xxx"; //Method way catImg .alt = "Another Cat";

Wie kann man ein HTML Element umstylen mittels DOM?

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

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

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

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

header. className = "green"

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

header. classList | - Liefert eine Liste mit allen Klassen des Elementes zurück

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

header. classList. add('top'); | header. classList. remove('bottom');

was macht folgender Befehl? | header.classList. toggle('green')

- Setzt die Klasse falls es nicht da sein sollte | - Entfernt die Klasse falls sie schon da sein sollte

Wie erschafft man ein HTML Element mittels DOM?

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

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

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

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

section. style. flexWrap = "wrap"; | section. style. justifyContent = "center";

Was macht die DOM Methode section .prepend()

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