Navigera bland föräldrar, barn och syskon
Navigera i DOM-trädet mellan relaterade noder.
Navigera bland föräldrar, barn och syskon är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 3 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.
Varför traversera
När du väl har ett element behöver du ofta dess släktingar: behållaren runt det, objekten inuti det eller elementet direkt bredvid det. DOM-egenskaper för traversering låter dig förflytta dig i trädet.
parentElement
parentElement ger dig elementet som innehåller det aktuella elementet, eller null högst upp i trädet.
const item = document.querySelector(".item");
const container = item.parentElement;
console.log(container.className);children
children är en live HTMLCollection med ett elements direkta underordnade element (textnoder exkluderas).
const list = document.querySelector("ul");
console.log(list.children.length);firstElementChild och lastElementChild
Dessa hoppar direkt till det första eller sista underordnade elementet och hoppar över text- och kommentarsnoder.
const list = document.querySelector("ul");
console.log(list.firstElementChild.textContent);
console.log(list.lastElementChild.textContent);nextElementSibling
nextElementSibling returnerar elementet direkt efter det aktuella elementet inom samma förälder.
const current = document.querySelector("li.active");
const after = current.nextElementSibling;previousElementSibling
previousElementSibling förflyttar sig åt andra hållet. Båda returnerar null när det inte finns något syskon.
const current = document.querySelector("li.active");
const before = current.previousElementSibling;Elementegenskaper jämfört med Node-egenskaper
Var uppmärksam på att childNodes, nextSibling och parentNode även inkluderar textnoder (blanksteg). Versionerna med *Element* är vanligtvis det du vill använda.
list.childNodes; // includes whitespace text nodes
list.children; // only elementsclosest
closest går upp i trädet från det aktuella elementet och returnerar den närmaste förfadern (eller elementet självt) som matchar en väljare.
const btn = document.querySelector(".delete");
const row = btn.closest("tr");closest för händelsedelegering
closest är perfekt när ett klick hamnar på ett inre element men du behöver den yttre behållare som hanterar klicket.
function onClick(e) {
const card = e.target.closest(".card");
if (card) {
console.log(card.dataset.id);
}
}matches
matches testar om själva elementet uppfyller en väljare och returnerar ett booleskt värde. Praktiskt tillsammans med traversering.
const el = document.querySelector(".item");
console.log(el.matches(".item.active"));Kombinera traversering
Du kan kedja ihop traverseringssteg för att navigera i komplexa strukturer, till exempel från en knapp upp till dess rad och vidare till nästa rad.
const next = btn.closest("tr").nextElementSibling;Snabbtest
Välj rätt egenskap.
Sammanfattning
Du kan förflytta dig uppåt med parentElement och closest, in i underordnade element med children, firstElementChild och lastElementChild, samt i sidled med nextElementSibling och previousElementSibling. Föredra egenskaperna som bara gäller element för att hoppa över textnoder med blanksteg.
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 ”Navigera bland föräldrar, barn och syskon” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Navigera bland föräldrar, barn och syskon”, 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 ”Navigera bland föräldrar, barn och syskon”?
Navigera i DOM-trädet mellan relaterade noder. 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 3 av 4.
Hur lång tid tar lektionen ”Navigera bland föräldrar, barn och syskon”?
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