Introduksjon til spørring av DOM

Spørring av DOM innebærer å velge og få tilgang til spesifikke elementer i dokumentet slik at du kan manipulere eller samhandle med dem. JavaScript tilbyr flere metoder for å hente elementer, hver med sitt eget bruksområde og oppførsel.

GetElementById

getElementById brukes for å velge ett enkelt element ved hjelp av dets unike ID. Dette er en av de mest brukte metodene fordi ID-er skal være unike i dokumentet.
Bruksområde: Best egnet for å velge et spesifikt element når du kjenner dets ID.
Returnerer: Ett enkelt element eller null hvis ingen elementer finnes.

// HTML:
<div id="header">Welcome</div>

// JS:
const headerEl = document.getElementById('header');
console.log(headerEl.textContent); // Output: Welcome

GetElementsByClassName

getElementsByClassName velger elementer etter klassenavn og returnerer en levende HTMLCollection av elementer.
Bruksområde: Nyttig når du må velge flere elementer med samme klasse.
Returnerer: En levende HTMLCollection av samsvarende elementer, som oppdateres hvis DOM-en endres.
Begrensninger: Kan ikke bruke array-metoder direkte; må konverteres til en array om nødvendig.

// HTML:
<p class="text">First paragraph</p>
<p class="text">Second paragraph</p>

// JS:
const textEls = document.getElementsByClassName('text');
console.log(textEls); // Output: HTMLCollection(2) [p.text, p.text]
console.log(textEls[0].textContent); // Output: First paragraph
console.log(textEls[1].textContent); // Output: Second paragraph

GetElementsByTagName

getElementsByTagName velger elementer etter tag-navn (for eksempel div, p) og returnerer en levende HTMLCollection.
Bruksområde: Ideell for å velge alle elementer av en bestemt type.
Returnerer: En levende HTMLCollection av elementer.
Begrensninger: Lite spesifikk, da den velger alle elementer med gitt tag innenfor konteksten.

// HTML:
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

// JS:
const listItems = document.getElementsByTagName('li');
console.log(listItems); // Output: HTMLCollection(2) [li, li]
console.log(listItems.length); // Output: 2

QuerySelector

querySelector velger det første elementet som samsvarer med en CSS-selektor. Den er allsidig og lar deg bruke enhver gyldig CSS-selektor for å finne elementer.
Bruksområde: Velegnet for å velge første treff av en hvilken som helst CSS-selektor.
Returnerer: Det første samsvarende elementet eller null hvis ingen treff finnes.

// HTML:
<div class="box" id="main-box">Content</div>

// JS:
const boxEl = document.querySelector('.box'); // Selects the first .box element
console.log(boxEl.id); // Output: main-box
console.log(boxEl.className); // Output: box
console.log(boxEl.textContent); // Output: Content

QuerySelectorAll

querySelectorAll velger alle elementer som samsvarer med en CSS-selektor og returnerer en statisk NodeList. I motsetning til andre metoder oppdateres den ikke dynamisk hvis DOM-en endres.
Bruksområde: Perfekt for å velge flere elementer med komplekse selektorer.
Returnerer: En statisk NodeList av elementer som ikke oppdateres automatisk.

// HTML:
<p class="content">Paragraph</p>
<span class="content">Text</span>
<div class="content">Container</div>

// JS:
const contentEls = document.querySelectorAll('.content');
console.log(contentEls); // Output: NodeList(3) [p.content, span.content, div.content]
console.log(contentEls.length); // Output: 3

Forskjeller mellom disse metodene

Returtyper

Live vs. statiske samlinger

CSS-selektorer

Ytelse

Praktisk eksempel: Skjemavalidering

Kombinasjon av disse metodene i et praktisk scenario: fremheving av ugyldige skjemafelt ved bruk av klasser.

Metoden getElementById velger skjemaelementet, mens querySelectorAll henter alle inndatafelt med klassen .input-field. En hendelseslytter på skjemaets "submit"-hendelse forhindrer standard innsending og kontrollerer hvert inndatafelt. Hvis et felt er tomt, markeres det med en rød kant, mens utfylte felt får en grønn kant, noe som gir umiddelbar visuell tilbakemelding til brukeren.