JavaScript Academy · Lektion

Valg af elementer med querySelector

Find elementer ved hjælp af CSS-selektorer.

Lektion 1 af 413 trin

Valg af elementer med querySelector er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Mød querySelector

querySelector returnerer det første element, der matcher en CSS-selektor, eller null, hvis intet matcher. Metoden findes på document og på hvert element.

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

Alle CSS-selektorer virker

Styrken ved querySelector er, at den accepterer de samme selektorer, som du bruger i CSS: tags, klasser, id'er, attributter og kombinationer.

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

querySelectorAll

querySelectorAll returnerer alle matchende elementer som en statisk NodeList. Selv ved nul resultater returnerer den en tom liste, aldrig null.

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

Gennemløb af resultater

En NodeList fra querySelectorAll understøtter forEach direkte, hvilket gør gennemløbet enkelt.

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

Selektorer til efterkommere

Du kan målrette indlejrede elementer med et mellemrum (efterkommere), ligesom i CSS. Dette finder alle .price-elementer inde i et .product-element.

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

Kombination af klasser

Når du kæder klasser sammen uden mellemrum, skal et element have alle klasserne. Her matcher vi knapper, der både er primære og store.

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

Afgrænsede forespørgsler

Når du kalder querySelector på et element (ikke på document), søger den kun inde i dette element. Det holder søgningerne lokale og hurtige.

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

Pseudo-klasser

Strukturelle pseudo-klasser som :first-child og :nth-of-type virker også.

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

Håndtering af manglende match

Da querySelector kan returnere null, skal du kontrollere resultatet, før du bruger det, så du undgår en TypeError.

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

Attributselektorer

Attributselektorer lader dig matche på dataattributter, hvilket er nyttigt, når du vil koble dig til elementer uden at være afhængig af klasser.

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

querySelector sammenlignet med ældre API'er

querySelector er mere fleksibel end getElementById, fordi den accepterer enhver selektor, men opslag efter id er stadig en smule hurtigere. Brug det rigtige værktøj til opgaven.

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

Hurtigt tjek

Afprøv din forståelse af selektorer.

Besvar den i den interaktive lektion

Opsummering

Du har lært, at querySelector returnerer det første match (eller null), og at querySelectorAll returnerer en statisk NodeList med alle matches. Begge accepterer komplette CSS-selektorer og kan afgrænses til et overordnet element. Kontrollér altid for null, når du bruger querySelector.

Gratis at komme i gang

Lær JavaScript 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: 59
Lektioner: 200

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Valg af elementer med querySelector” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Valg af elementer med querySelector”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Valg af elementer med querySelector”?

Find elementer ved hjælp af CSS-selektorer. Du øver dig i JavaScript 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å JavaScript Academy?

Der kræves ingen tidligere erfaring. JavaScript 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 “Valg af elementer med querySelector”?

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 JavaScript Academy-lektion?

Ja. Alle JavaScript 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

Valg af elementer med querySelector
getElementById og getElementsByClassName
Gennemgang af forældre, børn og søskende
NodeList sammenlignet med HTMLCollection

← Tilbage til JavaScript Academy