JavaScript Academy · leksjon

Velge elementer med querySelector

Finn elementer ved hjelp av CSS-selektorer.

Leksjon 1 av 413 trinn

Velge elementer med querySelector er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Bli kjent med querySelector

querySelector returnerer det første elementet som samsvarer med en CSS-selektor, eller null hvis ingen samsvarer. Metoden finnes på document og på alle elementer.

const title = document.querySelector("h1");
console.log(title.textContent);

Alle CSS-selektorer fungerer

Det som gjør querySelector kraftig, er at den godtar de samme selektorene som brukes i CSS: tagger, klasser, id-er, attributter og kombinasjoner av disse.

document.querySelector("#main");      // by id
document.querySelector(".card");      // by class
document.querySelector("input[type=email]"); // by attribute

querySelectorAll

querySelectorAll returnerer alle samsvarende elementer som en statisk NodeList. Selv uten treff returneres en tom liste (aldri null).

const cards = document.querySelectorAll(".card");
console.log(cards.length);

Gå gjennom resultater

En NodeList fra querySelectorAll støtter forEach direkte, noe som gjør itereringen ryddig.

const items = document.querySelectorAll("li");
items.forEach((li) => {
  console.log(li.textContent);
});

Selektorer for underordnede elementer

Det er mulig å velge nestede elementer med et mellomrom (underordnede elementer), akkurat som i CSS. Dette finner alle .price inne i en .product.

const prices = document.querySelectorAll(".product .price");

Kombinere klasser

Når klasser kjedes sammen uten mellomrom, må et element ha alle klassene. Her finner vi knapper som både er primære og store.

const btn = document.querySelector("button.primary.large");

Avgrensede søk

Når querySelector kalles på et element (ikke document), søker den bare inne i dette elementet. Det holder søkene lokale og raske.

const form = document.querySelector("#signup");
const emailField = form.querySelector("input[name=email]");

Pseudoklasser

Strukturelle pseudoklasser som :first-child og :nth-of-type fungerer også.

document.querySelector("li:first-child");
document.querySelectorAll("tr:nth-of-type(even)");

Håndtere manglende treff

Fordi querySelector kan returnere null, bør resultatet kontrolleres før det brukes, slik at en TypeError unngås.

const banner = document.querySelector(".banner");
if (banner) {
  banner.classList.add("hidden");
}

Attributtselektorer

Attributtselektorer gjør det mulig å velge elementer basert på dataattributter. Det er nyttig når elementer skal kobles til funksjonalitet uten å være avhengig av klasser.

const widget = document.querySelector("[data-role=widget]");
const openTabs = document.querySelectorAll("[aria-expanded=true]");

querySelector sammenlignet med eldre API-er

querySelector er mer fleksibel enn getElementById fordi den godtar alle selektorer, men id-oppslag er fortsatt litt raskere. Bruk riktig verktøy til oppgaven.

document.querySelector("#nav");        // flexible
document.getElementById("nav");        // fastest for ids

Rask sjekk

Test forståelsen av selektorer.

Besvar den i den interaktive leksjonen

Oppsummering

Det er lært at querySelector returnerer det første treffet (eller null), mens querySelectorAll returnerer en statisk NodeList med alle treffene. Begge godtar fullstendige CSS-selektorer og kan avgrenses til et overordnet element. Kontroller alltid om resultatet er null når querySelector brukes.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 59
Leksjoner: 200

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Velge elementer med querySelector» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Velge elementer med querySelector», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Velge elementer med querySelector»?

Finn elementer ved hjelp av CSS-selektorer. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Velge elementer med querySelector»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Velge elementer med querySelector
getElementById og getElementsByClassName
Navigere mellom foreldre, barn og søsken
NodeList kontra HTMLCollection

← Tilbake til JavaScript Academy