getElementById och getElementsByClassName
Använd de klassiska metoderna för elementselektion.
getElementById och getElementsByClassName är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
getElementById
getElementById returnerar det enda elementet med matchande id, eller null. Id:n måste vara unika på en sida, så metoden returnerar ett enda element.
const header = document.getElementById("header");
console.log(header.tagName);Ingen hash-symbol
Till skillnad från CSS-väljare skickar du in det råa id-värdet utan #. Att skicka in "#header" skulle inte ge någon träff.
document.getElementById("menu"); // correct
document.getElementById("#menu"); // wrong, returns nullgetElementsByClassName
getElementsByClassName returnerar en live HTMLCollection med alla element som har den angivna klassen.
const cards = document.getElementsByClassName("card");
console.log(cards.length);HTMLCollection är live
Samlingen uppdateras automatiskt när DOM-trädet ändras. Om du senare lägger till ett nytt .card växer cards.length utan att du behöver göra en ny sökning.
const cards = document.getElementsByClassName("card");
// later, after appending a new .card element
// cards.length reflects the new total automaticallyIndexering av en samling
Hämta objekt med hjälp av index. En HTMLCollection liknar en array men är inte en riktig array.
const cards = document.getElementsByClassName("card");
console.log(cards[0].textContent);Inget direkt forEach
Eftersom HTMLCollection liknar en array (men inte är en array) har den inget forEach. Konvertera den först eller använd en vanlig for-loop.
const cards = document.getElementsByClassName("card");
for (let i = 0; i < cards.length; i++) {
console.log(cards[i].textContent);
}getElementsByTagName
getElementsByTagName returnerar en live HTMLCollection med alla element av en viss tagg, till exempel alla stycken.
const paras = document.getElementsByTagName("p");
console.log(paras.length);Flera klasser
Du kan skicka in flera klassnamn separerade med mellanslag. Element måste ha alla angivna klasser för att inkluderas.
const items = document.getElementsByClassName("btn primary");Begränsat till ett element
Dessa metoder finns även på element och begränsar då sökningen till ättlingarna till det elementet.
const list = document.getElementById("todo-list");
const items = list.getElementsByClassName("done");Konvertera till en array
Om du vill använda arraymetoder som map eller filter kan du sprida ut samlingen i en riktig array.
const cards = document.getElementsByClassName("card");
const titles = Array.from(cards).map((c) => c.textContent);När ska vilken användas
Använd getElementById för snabba sökningar efter unika element. Föredra querySelectorAll när du vill ha en statisk ögonblicksbild eller komplexa väljare. Använd getElementsBy*-familjen när du specifikt vill ha en live-samling.
Snabbtest
Välj rätt beteende.
Sammanfattning
Du har lärt dig getElementById (ett element med ett rått id, utan #), getElementsByClassName och getElementsByTagName (live HTMLCollections). Live-samlingar måste konverteras via Array.from för att arraymetoder ska kunna användas, och de har inget eget forEach.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 59
- Lektioner
- 200
Vanliga frågor
Är lektionen ”getElementById och getElementsByClassName” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”getElementById och getElementsByClassName”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”getElementById och getElementsByClassName”?
Använd de klassiska metoderna för elementselektion. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?
Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”getElementById och getElementsByClassName”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?
Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Välja element med querySelector
- getElementById och getElementsByClassName
- Navigera bland föräldrar, barn och syskon
- NodeList jämfört med HTMLCollection