Frontend Academy · Lektion

querySelector og querySelectorAll

Find enkelte og flere elementer med CSS-selectorstrenge, og forstå forskellen mellem NodeList og HTMLCollection.

Lektion 1 af 413 trin

querySelector og querySelectorAll er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad er DOM?

Dokumentobjektmodellen er et træ af JavaScript-objekter, der repræsenterer HTML-strukturen. JavaScript interagerer med DOM for at læse, ændre, tilføje og fjerne elementer — og dermed gøre websider dynamiske.

getElementById

Den klassiske selektor. document.getElementById('myId') returnerer elementet med det pågældende id eller null, hvis det ikke findes. Den er hurtig, men fungerer kun med id'er.

const header = document.getElementById('site-header');
if (header) {
  header.style.backgroundColor = 'navy';
}

querySelector — enkelt element

document.querySelector(cssSelector) returnerer det første element, der matcher en CSS-selektor. Den returnerer null, hvis ingen elementer matcher. Den er mere fleksibel end getElementById.

const btn = document.querySelector('.btn-primary');
const input = document.querySelector('input[type="email"]');
const hero = document.querySelector('#hero h1');

querySelectorAll — flere elementer

document.querySelectorAll(cssSelector) returnerer en statisk NodeList med alle matchende elementer. Det er ikke et levende array — du skal iterere gennem det. Brug Array.from() eller spredningsoperatoren for at bruge array-metoder.

const cards = document.querySelectorAll('.card');
cards.forEach(card => card.classList.add('loaded'));

// Convert to array for array methods:
const hrefs = Array.from(document.querySelectorAll('a')).map(a => a.href);

Afgrænsede forespørgsler

Du kan kalde querySelector på ethvert element for kun at søge i dets undertræ — ikke i hele dokumentet. Det er mere effektivt og forhindrer, at du ved et uheld vælger elementer fra andre dele af siden.

const nav = document.querySelector('#main-nav');
const links = nav.querySelectorAll('a'); // only links inside #main-nav

NodeList kontra HTMLCollection

NodeList (fra querySelectorAll) er statisk — den afspejler DOM på det tidspunkt, hvor forespørgslen blev udført. HTMLCollection (fra getElementsByClassName osv.) er levende — den opdateres automatisk, når DOM ændres. Begge ligner arrays, men er ikke arrays.

Navigering i DOM

Fra ethvert element kan du navigere med: element.parentElement, element.children, element.firstElementChild, element.lastElementChild, element.nextElementSibling, element.previousElementSibling.

const list = document.querySelector('ul');
console.log(list.children.length);       // number of li elements
console.log(list.firstElementChild);     // first li
console.log(list.parentElement);         // ul's parent

Kontrol af, om et element findes

Kontrollér altid, at querySelector ikke returnerede null, før du bruger resultatet, især for elementer, som ikke nødvendigvis findes på alle sider.

const modal = document.querySelector('.modal');
if (modal) {
  // safe to use modal here
  modal.classList.add('open');
}

matches() og closest()

element.matches(selector) returnerer true, hvis elementet matcher selektoren. element.closest(selector) bevæger sig op gennem DOM-træet og returnerer den første overordnede node, der matcher selektoren, eller null.

const item = document.querySelector('.list-item');
console.log(item.matches('.active'));     // false

// Event delegation: find the clicked card
document.addEventListener('click', (e) => {
  const card = e.target.closest('.card');
  if (card) card.classList.toggle('selected');
});

contains()

parentElement.contains(childElement) returnerer true, hvis barnet befinder sig inde i forælderen (eller selv er forælderen). Det er nyttigt til at kontrollere, om et klik skete uden for en modaldialog eller en rullemenu.

document.addEventListener('click', (e) => {
  const menu = document.querySelector('.dropdown-menu');
  if (!menu.contains(e.target)) {
    menu.hidden = true; // clicked outside
  }
});

Ydeevne: Minimér DOM-forespørgsler

DOM-forespørgsler er ikke gratis. Gem resultatet i en variabel i stedet for at kalde querySelector gentagne gange. I løkker skal du samle DOM-læsninger og DOM-skrivninger hver for sig for at undgå unødige layoutberegninger.

// Bad — queries DOM in every iteration:
for (let i = 0; i < 100; i++) {
  document.querySelector('#counter').textContent = i;
}

// Good — cache the element:
const counter = document.querySelector('#counter');
for (let i = 0; i < 100; i++) counter.textContent = i;

Hurtigt tjek

Hvilken metode returnerer en statisk NodeList med alle matchende elementer?

Besvar den i den interaktive lektion

Opsamling: Valg af DOM-elementer

querySelector returnerer det første element, der matcher. querySelectorAll returnerer alle matchende elementer som en statisk NodeList. Afgræns forespørgsler til et undertræ for bedre ydeevne. Gem resultaterne af forespørgsler i cache. Brug closest() til hændelsesdelegering. Kontrollér altid for null, før du bruger et element, der er fundet med en forespørgsel.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “querySelector og querySelectorAll” gratis?

Ja — hele teksten til “querySelector og querySelectorAll” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “querySelector og querySelectorAll”?

Find enkelte og flere elementer med CSS-selectorstrenge, og forstå forskellen mellem NodeList og HTMLCollection. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “querySelector og querySelectorAll”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

querySelector og querySelectorAll
addEventListener og Event-objektet
Ændring af indhold: textContent, innerHTML og classList
Oprettelse og tilføjelse af elementer

← Tilbage til Frontend Academy