HTML5 - DOM Tree Navigation

Inden for et dokument HTML Vi kan navigere mellem de forskellige elementer, der tilhører DOM -træet, til dette har vi den hierarkiske struktur, og vi kan bruge flere metoder, som vi kan gribe dokumenternes forhold til.
Naviger i DOM -træet
Som vi nævnte, kan navigationen foretages gennem den hierarkiske struktur, der visualiserer skemaet som et træ, på denne måde kan vi behandle elementerne som forældre, børn, søskende.
Med dette kan søgningen efter et element foretages efter filosofien om en søgning efter forhold.
Lad os se de tilgængelige metoder, før vi går videre til de praktiske applikationer:

· barneknuder: Returnerer alle underelementerne i forældrelementet.

· første barn: Returnerer det element, der er det første barn i et forældrelement.

· hasChildNodes (): Returnerer true eller true, hvis det aktuelle element har underordnede noder.

· sidste barn: Returnerer det sidste barn af et element i dokumentet.

· nextSibling: Returnerer søskendeelementet defineret af det aktuelle HTML -element.

· parentNode: Returnerer det overordnede element for det aktuelle HTML -element.

· forrigeSibling: Returnerer søskendeelementet før det aktuelle HTML -element.

Når vi ved, hvilke metoder vi har til rådighed, vil vi se et simpelt kodeeksempel, som vi vil forstå, hvad navigationen igennem det handler om. DOM træ.

 Eksempel 

Der er masser af forskellige slags frugt - der er over 500 sorter bananer alene. Når vi tilføjer de utallige typer æbler, appelsiner og andre velkendte frugter, står vi over for tusindvis af valgmuligheder.
 
Et af de mest interessante aspekter af frugt er sorten i hvert land. Jeg bor i nærheden af ​​London, i et område, der er kendt for sine æbler.

Forælder Første barn Forrige søskende Næste søskende

Hvad denne kode opnår er at være i stand til at navigere mellem elementer, og når den skygger dem i lysegrå for at kunne differentiere i hvilken del af dokumentet vi er, lad os se på billedet, hvordan vi skal se det i vores browser:

Som vi kan se, hjælper denne måde at placere elementerne i DOM os, når vi ikke er sikre på identifikatorerne, eller når det er en dynamisk, men defineret struktur.
Hermed afsluttede vi denne vejledning, hvor vi var i stand til at søge efter elementer i et HTML -dokument uden at stole på identifikatorer eller elementnavne, blot ved at bruge deres forhold i den hierarkiske struktur.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt