✅ HTML5 - DOM Tree Navigation

Innholdsfortegnelse

Innenfor et dokument HTML Vi kan navigere mellom de forskjellige elementene som tilhører DOM -treet, for dette har vi den hierarkiske strukturen, og vi kan bruke flere metoder som vi kan nærme oss forholdene til dokumentene.
Naviger i DOM -treet
Som vi nevnte, kan navigasjonen gjøres gjennom den hierarkiske strukturen som visualiserer opplegget som et tre, på denne måten kan vi behandle elementene som foreldre, barn, søsken.
Med dette kan søket etter et element gjøres etter filosofien om et søk etter forhold.
La oss se de tilgjengelige metodene før vi går videre til de praktiske applikasjonene:

· childNodes: Returnerer alle underelementene i det overordnede elementet.

· første barn: Returnerer elementet som er det første barnet til et overordnet element.

· hasChildNodes (): Returnerer true eller true hvis det nåværende elementet har underordnede noder.

· siste barn: Returnerer det siste barnet til et element i dokumentet.

· nextSibling: Returnerer søskenelementet som er definert av det gjeldende HTML -elementet.

· parentNode: Returnerer overordnet element for gjeldende HTML -element.

· forrigeSibling: Returnerer søskenelementet før gjeldende HTML -element.

Når vi vet hvilke metoder vi har tilgjengelig, kommer vi til å se et enkelt kodeeksempel som vi skal forstå hva navigasjonen gjennom det handler om. DOM -tre.

Eksempel

Det er mange forskjellige frukttyper - det er over 500 varianter av bananer alene. Når vi legger til de utallige typer epler, appelsiner og annen kjent frukt, står vi overfor tusenvis av valg.

En av de mest interessante aspektene ved frukt er variasjonen som er tilgjengelig i hvert land. Jeg bor i nærheten av London, i et område som er kjent for sine epler.

Foreldre Første barn Forrige søsken Neste søsken

Hva denne koden oppnår er å kunne navigere mellom elementer, og når den skygger dem i lysegrå for å kunne skille hvilken del av dokumentet vi er, la oss se på bildet hvordan vi skal se det i nettleseren vår:

Som vi kan se, hjelper denne måten å plassere elementene i DOM oss når vi ikke er sikre på identifikatorene eller når det er en dynamisk, men definert struktur.
Med dette fullførte vi denne opplæringen, der vi var i stand til å søke etter elementer i et HTML -dokument uten å stole på identifikatorer eller elementnavn, bare ved å bruke deres forhold i den hierarkiske strukturen.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng