Introduktion til forespørgsler i DOM'en

Forespørgsler i DOM'en indebærer at udvælge og tilgå specifikke elementer i dokumentet, så de kan manipuleres eller interageres med. JavaScript tilbyder flere metoder til at forespørge elementer, hver med sit eget anvendelsesområde og adfærd.

GetElementById

getElementById bruges til at udvælge et enkelt element via dets unikke ID. Det er en af de mest anvendte metoder, da ID'er skal være unikke i dokumentet.
Anvendelse: Velegnet til at udvælge et specifikt element, når ID'et er kendt.
Returnerer: Et enkelt element eller null, hvis intet element findes.

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

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

GetElementsByClassName

getElementsByClassName udvælger elementer via deres klassenavn og returnerer en live HTMLCollection af elementer.
Anvendelse: Anvendes når der skal udvælges flere elementer med samme klasse.
Returnerer: En live HTMLCollection af matchende elementer, som opdateres hvis DOM'en ændres.
Begrænsninger: Kan ikke anvende array-metoder direkte; skal konverteres til et array hvis nødvendigt.

// 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 vælger elementer efter deres tag-navn (f.eks. div, p) og returnerer en live HTMLCollection.
Anvendelse: Velegnet til at vælge alle elementer af en bestemt type.
Returnerer: En live HTMLCollection af elementer.
Begrænsninger: Ikke specifik, da den vælger alle elementer med det givne tag inden for 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 vælger det første element, der matcher en CSS-selector. Metoden er alsidig og gør det muligt at bruge enhver gyldig CSS-selector til at finde elementer.
Anvendelse: Velegnet til at vælge det første match for en hvilken som helst CSS-selector.
Returnerer: Det første matchende element eller null, hvis der ikke findes et match.

// 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 vælger alle elementer, der matcher en CSS-selector og returnerer en statisk NodeList. I modsætning til andre metoder opdateres den ikke dynamisk, hvis DOM'en ændres.
Anvendelse: Ideel til at vælge flere elementer med komplekse selectors.
Returnerer: En statisk NodeList af elementer, der ikke opdateres 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

Forskelle mellem disse metoder

Returtyper

Live vs. statiske samlinger

CSS-vælgere

Ydeevne

Praktisk eksempel: Formularvalidering

Kombination af disse metoder i et praktisk scenarie: fremhævning af ugyldige formularfelter ved hjælp af klasser.

getElementById-metoden vælger formelementet, mens querySelectorAll henter alle inputfelter med klassen .input-field. En eventlytter på formens "submit"-hændelse forhindrer standardafsendelsen og kontrollerer hvert inputfelt. Hvis et felt er tomt, markeres det med en rød kant, mens udfyldte felter får en grøn kant, hvilket giver brugeren øjeblikkelig visuel feedback.