JavaScript DOM eksamensoppgaver

Hva er DOM?

DOM står for Document Object Model. Det er en programmeringsgrensesnitt for HTML- og XML-dokumenter som gjør det mulig for programmer å manipulere innhold, struktur og stil.

Hva står DOM for?

DOM står for Document Object Model.

Hvordan er DOM-strukturen organisert?

DOM-strukturen er organisert i en trestruktur med noder. Hver node representerer et element, attributt eller tekst i dokumentet.

Hva er en node?

En node er et grunnleggende element i DOM. Det kan være en elementnode, tekstnode eller kommentar-node.

Elementnode vs tekstnode?

Elementnode representerer HTML-elementer, mens tekstnode representerer tekstinnhold i disse elementene.

Hvordan navigere i DOM?

Du kan navigere i DOM ved hjelp av metoder som 'getElementById', 'getElementsByClassName' og 'querySelector'.

Hva er hovedkomponentene i DOM?

Hovedkomponentene inkluderer: 1. Document 2. Elementer 3. Attributter 4. Tekst 5. Kommentarer.

Er det true eller false? 'DOM er statisk.'

False. DOM er dynamisk og kan endres ved hjelp av JavaScript.

Hva er en rot-node?

Rot-noden er den øverste noden i DOM-treet, vanligvis representert av 'document'.

Fyll inn blank: Hver ______ i DOM kan ha barn.

Hver node i DOM kan ha barn. Barn kan være andre noder.

Hvilken metode brukes for å hente et element ved ID?

'getElementById' er metoden som brukes for å hente et element basert på dets ID-attributt.

Hva er et attributt i DOM?

Et attributt gir ekstra informasjon om et element. For eksempel, 'src' i et <img>-element.

Hva er en tekstnode?

En tekstnode inneholder den faktiske teksten i et DOM-element. Den representerer innholdet mellom åpning og lukking av et element.

Hva er forskjellen mellom 'childNodes' og 'children'?

'childNodes' inkluderer alle typer noder, mens 'children' bare inkluderer elementnoder.

Hva representerer 'document' i DOM?

'document' representerer hele HTML- eller XML-dokumentet og er inngangspunket for å få tilgang til DOM.

Hvordan kan du sjekke om en node har barn?

Du kan sjekke 'hasChildNodes()' metoden for å se om en node har barn.

querySelectorMetoden

En metode for å hente det første elementet som passer til en CSS-velger. Brukes ofte for å få tilgang til spesifikke DOM-elementer.

createElement

Metode for å lage et nytt DOM-element. Brukes for å dynamisk generere HTML-elementer i JavaScript.

appendChild

Legger til et nytt barn-element til et eksisterende DOM-element. - Nytt element - Forelder - Struktur endres

true or false: innerHTML kan brukes til å endre et elements innhold.

Sant. innerHTML setter eller henter HTML-innholdet til et element, noe som gjør det enkelt å oppdatere visningen.

replaceChild

Erstatter et eksisterende barn-element med et nytt. Nytt element må være en DOM-node.

Hvordan fjerne et element?

Bruk removeChild på foreldreelementet. Eksempel: ```javascript parent.removeChild(child); ```

setAttribute

Setter eller endrer en attributt for et DOM-element. Nyttig for å manipulere egenskaper som src og class.

insertBefore

Setter et nytt barn-element før et eksisterende barn i DOM-strukturen. - Foreldre - Nytte ved rekkefølge

true or false: DOM-elementer kan ikke ha flere klasser.

Falsk. DOM-elementer kan ha flere klasser ved å bruke setAttribute eller classList.

classList.add

Legger til en eller flere klasser til et DOM-element. Dette gir muligheter for dynamisk styling utan å overskrive eksisterende klasser.

textContent vs innerHTML

textContent henter eller setter tekstinnhold, mens innerHTML henter eller setter HTML-innhold. - Sikkerhet - Ytelse

CloneNode

Metode for å lage en kopi av et DOM-element. Kan kopiere med eller uten barn-elementer.

how to change style?

Bruk element.style for å endre CSS-stiler direkte. Eksempel: element.style.color = 'red';

removeAttribute

Fjerner en spesifisert attributt fra et DOM-element. Brukes til å rydde opp i elementets attributter.

true or false: du kan manipulere DOM uten JavaScript.

Falsk. JavaScript er nødvendig for å programmere manipulering av DOM.

parentNode

Gir tilgang til foreldreelementet til et spesifisert DOM-element. Viktig for navigering i DOM-strukturen.

Hendelseshåndtering

Prosessen med å registrere og reagere på brukerinteraksjoner i webapplikasjoner.

Hva er en hendelse?

En hendelse er en handling eller en forekomst som skjer i DOM, som klikk, tastetrykk eller musbevegelser.

Event Listener

En funksjon som venter på og reagerer på en bestemt hendelse på et DOM-element.

Syntetiske hendelser

Hendelser som genereres av JavaScript-kode i stedet for brukeren, for eksempel ved bruk av `dispatchEvent`.

True or False: Alle DOM-elementer kan ha hendelseshåndterere.

True. Alle DOM-elementer kan registrere hendelseshåndterere for forskjellige typer hendelser.

Event Bubbling vs. Event Capturing

Bubbling: Hendelser går fra barn til foreldre. Capturing: Hendelser går fra foreldre til barn.

Hva er 'preventDefault()'?

En metode som forhindrer den normale oppførselen til en hendelse, som å hindre en lenke fra å navigere.

Hvilken metode brukes for å fjerne en hendelseshåndterer?

Metoden `removeEventListener()` brukes for å fjerne en tidligere registrert hendelseshåndterer.

Hendelsesobjekt

Et objekt som inneholder informasjon om hendelsen, som `target`, `type`, og `timestamp`.

Hva er 'this' i en hendelseshåndterer?

Refererer til DOM-elementet som hendelsen er tilknyttet, og gir tilgang til dets egenskaper.

Hendelse delegasjon

En teknikk der en enkelt hendelseshåndterer plasseres på et overordnet element for å håndtere hendelser for barn.

Hvilket event triggeres når en musklikk skjer?

Eventet 'click' triggeres når en bruker klikker på et DOM-element.

Fill in the blank: '_____ handler om å fange hendelser på et overordnet nivå og delegere dem til barnelementer.'

'Hendelsesdelegasjon' handler om å fange hendelser på et overordnet nivå og delegere dem til barnelementer.

Hva er 'stopPropagation()'?

En metode som stopper videre videreføring av hendelsen i bubbling eller capturing-fasen.

Eksempel på bruk av 'addEventListener'

document.getElementById('knapp').addEventListener('click', funksjon); // Legger til en klikkhendelseshåndterer

Hva er 'setTimeout()'?

'setTimeout()' er en JavaScript-funksjon som brukes til å forsinke utførelsen av en funksjon eller et uttrykk. Den tar to argumenter: funksjonen som skal kjøres, og tiden i millisekunder før den kjøres. Eksempel: setTimeout(() => { console.log('Hendelse utført!'); }, 1000); // Kalles etter 1 sekund

Virtuell DOM

En representasjon av DOM i minnet. Den gjør oppdateringer raskere ved å minimere direkte manipulasjon av DOM.

Hvilken metode brukes for å oppdatere DOM effektivt?

Bruk av 'diffing' og batchoppdateringer sikrer at færre endringer kreves, og forbedrer ytelsen.

Er det sant at flere reflow kan redusere ytelsen?

Sant. Reflow innebærer omberegning av layout, som er kostbart i ytelse.

Event Delegation

En teknikk som gjør at man kan håndtere hendelser på et overordnet element, i stedet for individuelle elementer. Reduserer antall event listeners.

Sammenlign innerHTML og createElement.

innerHTML er enklere, men kan føre til sikkerhetsproblemer. createElement er mer sikker og tillater bedre kontroll.

Hvilken situasjon er best for å bruke requestAnimationFrame?

Når man skal animere eller oppdatere DOM basert på synkronisering med skjermoppdateringer for å forbedre ytelsen.

Hva er 'throttling'?

En teknikk for å begrense antall ganger en funksjon kan kjøres, spesielt under rullering eller vindusstørrelse endringer.

Bør man bruke inline-stiler i DOM-manipulasjon?

Generelt nei; det er bedre å bruke CSS-klasser for å holde stil og logikk adskilt.

Hvilken metode kan brukes for å fjerne elementer fra DOM?

removeChild() fjerner et spesifisert barn fra DOM, som også kan hjelpe med minnehåndtering.

Hvordan kan man optimalisere bilder i DOM?

Bruk av lazy loading kan redusere initial lastetid ved å laste bilder kun når de trengs.

Hvilken effekt har bruk av 'documentFragment'?

Det reduserer antall reflows ved å muliggjøre batch-manipulering av DOM før elementene settes inn.

Skriv et kort eksempel på bruk av setTimeout.

setTimeout(() => { console.log('Hei!'); }, 1000); // Viser 'Hei!' etter 1 sekund.

Hva er en 'MutationObserver'?

Et objekt som kan overvåke endringer i DOM og kan trigge handlinger når endringer oppdages.

Hvilket problem løser 'shadow DOM'?

Den isolerer stiler og skripter i komponenter, noe som hindrer konflikter med globale stiler.

Beskriv 'debouncing'.

En teknikk for å forsinke utførelse av en funksjon til en viss tid har gått etter den siste hendelsen. Brukt for optimalisering.

Hva er 'Intersection Observer'?

'Intersection Observer' er en API som lar utviklere overvåke synligheten av DOM-elementer i forhold til viewporten. Dette gjør at man kan optimalisere ytelsen ved å lastes inn innhold bare når det er synlig for brukeren, noe som reduserer unødvendig ressursbruk.