HTML5 - DOM Tree Navigation

Inom ett dokument HTML Vi kan navigera mellan de olika elementen som tillhör DOM -trädet, för detta har vi den hierarkiska strukturen och vi kan använda flera metoder med vilka vi kan närma oss dokumentens förhållanden.
Navigera i DOM -trädet
Som vi nämnde kan navigeringen göras genom den hierarkiska strukturen som visualiserar schemat som ett träd, på så sätt kan vi behandla elementen som föräldrar, barn, syskon.
Med detta kan sökningen efter ett element göras efter filosofin om en sökning efter relation.
Låt oss se de tillgängliga metoderna innan vi går vidare till de praktiska tillämpningarna:

· barnNoder: Returnerar alla underordnade element i det överordnade elementet.

· förstfödde: Returnerar elementet som är det första barnet i ett överordnat element.

· hasChildNodes (): Returnerar true eller true om det aktuella elementet har underordnade noder.

· sista barnet: Returnerar det sista barnet i ett element i dokumentet.

· nextSibling: Returnerar syskonelementet som definieras av det aktuella HTML -elementet.

· parentNode: Returnerar det överordnade elementet för det aktuella HTML -elementet.

· föregåendeSibling: Returnerar syskonelementet före det aktuella HTML -elementet.

När vi vet vilka metoder vi har tillgängliga kommer vi att se ett enkelt kodexempel som vi kommer att förstå vad navigeringen genom det handlar om. DOM -träd.

 Exempel 

Det finns massor av olika sorters frukt - det finns över 500 banansorter ensamma. När vi lägger till de otaliga typerna av äpplen, apelsiner och annan välkänd frukt står vi inför tusentals val.
 
En av de mest intressanta aspekterna av frukt är sorten som finns i varje land. Jag bor nära London, i ett område som är känt för sina äpplen.

Förälder Första barn Föregående syskon Nästa syskon

Vad den här koden uppnår är att kunna navigera mellan element och när det skuggas dem i ljusgrått för att kunna skilja i vilken del av dokumentet vi är, låt oss se på bilden hur vi ska se det i vår webbläsare:

Som vi kan se hjälper detta sätt att placera elementen i DOM oss när vi inte är säkra på identifierarna eller när det är en dynamisk men definierad struktur.
Med detta avslutade vi denna handledning, där vi kunde söka efter element i ett HTML -dokument utan att förlita oss på identifierare eller elementnamn, helt enkelt med hjälp av deras relation i den hierarkiska strukturen.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng