JavaScript Academy · Lektion

getElementById og getElementsByClassName

Brug de klassiske metoder til valg af elementer.

Lektion 2 af 413 trin

getElementById og getElementsByClassName er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 2 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.

getElementById

getElementById returnerer det ene element med det matchende id, eller null. Id'er skal være unikke på en side, så metoden returnerer ét element.

const header = document.getElementById("header");
console.log(header.tagName);

Intet hash-tegn

I modsætning til CSS-selektorer skal du angive det rå id uden #. Hvis du angiver "#header", finder metoden ikke noget match.

document.getElementById("menu");   // correct
document.getElementById("#menu");  // wrong, returns null

getElementsByClassName

getElementsByClassName returnerer en live HTMLCollection med alle elementer, der har den angivne klasse.

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

HTMLCollection er live

Samlingen opdateres automatisk, når DOM'en ændres. Hvis du senere tilføjer et nyt .card, vokser cards.length uden en ny forespørgsel.

const cards = document.getElementsByClassName("card");
// later, after appending a new .card element
// cards.length reflects the new total automatically

Indeksering af en samling

Få adgang til elementer via deres indeks. En HTMLCollection ligner et array, men er ikke et rigtigt array.

const cards = document.getElementsByClassName("card");
console.log(cards[0].textContent);

Intet direkte forEach

Fordi den ligner et array (men ikke er et array), har HTMLCollection ingen forEach. Konvertér den først, eller brug en almindelig for-løkke.

const cards = document.getElementsByClassName("card");
for (let i = 0; i < cards.length; i++) {
  console.log(cards[i].textContent);
}

getElementsByTagName

getElementsByTagName returnerer en live HTMLCollection med alle elementer med et bestemt tag, f.eks. alle afsnit.

const paras = document.getElementsByTagName("p");
console.log(paras.length);

Flere klasser

Du kan angive flere klassenavne adskilt af mellemrum. Elementer skal have alle de angivne klasser for at blive inkluderet.

const items = document.getElementsByClassName("btn primary");

Afgrænset til et element

Disse metoder findes også på elementer, så søgningen afgrænses til efterkommerne af det pågældende element.

const list = document.getElementById("todo-list");
const items = list.getElementsByClassName("done");

Konvertering til et array

Hvis du vil bruge array-metoder som map eller filter, skal du sprede samlingen ind i et rigtigt array.

const cards = document.getElementsByClassName("card");
const titles = Array.from(cards).map((c) => c.textContent);

Hvornår skal du bruge hvad?

Brug getElementById til hurtige opslag efter unikke elementer. Foretræk querySelectorAll, når du vil have et statisk øjebliksbillede eller komplekse selektorer. Brug getElementsBy*-familien, når du specifikt vil have en live samling.

Hurtigt tjek

Vælg den rigtige adfærd.

Besvar den i den interaktive lektion

Opsummering

Du har lært getElementById (ét element via råt id, uden #), getElementsByClassName og getElementsByTagName (live HTMLCollections). Live samlinger skal konverteres via Array.from, hvis du vil bruge array-metoder, og de har ikke deres egen forEach.

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 “getElementById og getElementsByClassName” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “getElementById og getElementsByClassName”, 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 “getElementById og getElementsByClassName”?

Brug de klassiske metoder til valg af elementer. 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 2 af 4.

Hvor lang tid tager lektionen “getElementById og getElementsByClassName”?

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