[S4L1] DOM Flashcards
Wofür steht der DOM?
-Document Object Model (DOM)
Was ist der DOM?
- Eine Object Representation der HTML Elemente einer Website
- Der DOM ist die Brücke zwischen Content und dem Browser
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
Was ist der DOM?
- Language Neutral API
- Dynamische/Dynamic Änderungen
- Tree Structure die Content, Struktur und Style represented
Aus welchen Bestandteilen besteht der DOM?
- Aus Nodes und Types
- Jeder Node hat einen Type
Was ist ein Node im DOM?
-Jeder Node ist ein Teil des Documents und besitzt einen Type
Wie kann man in der Chrome Inspect Console sich den DOM anzeigen lassen?
console.log(document);
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
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>
Was sind TagNames im DOM?
-HTML Tag Names, wie header, a, h1, p
Macht document.getElementsByTagName(‘div’)
und document.getelementsbytagName(‘div’) das gleiche?
-NEIN, CASE-SENSITIVE!
Wie kann man mittel DOM alle Elemente einer Website beim Class name selektieren?
document.getElementsByClassName(‘nav-item’)
Wie speicher man ein DOM element als Variable?
const title = document.getElementByID(‘content’)
Was kann man mit DOM Selectierten HTML Elementen machen?
- Positionen ändern
- Überschreiben
- EventHandler hinzufügen
- in Variablen Speichern
Funktioniert der DOM Selector für Klassen mit der . Notation?
getElementsByClassName(‘.bd-toc’)
-Nein, Klassen werden nur mit ihrem Namen selektiert
Funktioniert der folgende DOM Selector?
document.querySelector(‘.bd-tock’)
Ja, hier wird mit .Notation gearbeitet
Was ist dunder proto __proto__?
-Sagt woher die Methods eines Objects kommen
Was macht der DOM Selector?
document.querySecltorAll(‘header li.nav-item’)
-Liefert einer Collection aller lists der Nav-Items
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. textContentWie 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.
