Introduktion till att fråga DOM:en

Att fråga DOM:en innebär att välja och komma åt specifika element i dokumentet så att du kan manipulera eller interagera med dem. JavaScript tillhandahåller flera metoder för att fråga efter element, var och en med sitt eget användningsområde och beteende.

GetElementById

getElementById används för att välja ett enskilt element med dess unika ID. Det är en av de mest använda metoderna eftersom ID:n ska vara unika inom dokumentet.
Användningsområde: Bäst för att välja ett specifikt element när du känner till dess ID.
Returnerar: Ett enskilt element eller null om inget element hittas.

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

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

GetElementsByClassName

getElementsByClassName väljer element efter deras klassnamn och returnerar en levande HTMLCollection av element.
Användningsområde: Användbart när du behöver välja flera element med samma klass.
Returnerar: En levande HTMLCollection av matchande element, som uppdateras om DOM:en ändras.
Begränsningar: Kan inte använda array-metoder direkt; måste konverteras till en array om det behövs.

// 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äljer element efter deras taggnamn (t.ex. div, p) och returnerar en levande HTMLCollection.
Användningsområde: Lämplig för att välja alla element av en viss typ.
Returnerar: En levande HTMLCollection av element.
Begränsningar: Ospecifik, eftersom den väljer alla element med angiven tagg inom kontexten.

// 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äljer det första elementet som matchar en CSS-selektor. Den är mångsidig och låter dig använda valfri giltig CSS-selektor för att hitta element.
Användningsområde: Utmärkt för att välja den första träffen av en CSS-selektor.
Returnerar: Det första matchande elementet eller null om ingen träff finns.

// 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äljer alla element som matchar en CSS-selektor och returnerar en statisk NodeList. Till skillnad från andra metoder uppdateras den inte dynamiskt om DOM:en ändras.
Användningsområde: Perfekt för att välja flera element med komplexa selektorer.
Returnerar: En statisk NodeList av element som inte uppdateras automatiskt.

// 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

Skillnader mellan dessa metoder

Returtyper

Levande vs. statiska samlingar

CSS-väljare

Prestanda

Praktiskt exempel: Formulärvalidering

Kombinera dessa metoder i ett praktiskt scenario: markera ogiltiga formulärfält med hjälp av klasser.

getElementById-metoden väljer formelementet, medan querySelectorAll hämtar alla inmatningsfält med klassen .input-field. En händelselyssnare på formulärets "submit"-händelse förhindrar standardinlämningen och kontrollerar varje inmatningsfält. Om ett fält är tomt markeras det med en röd kant, medan ifyllda fält får en grön kant, vilket ger omedelbar visuell återkoppling till användaren.