HTML5 - DOM-structuurnavigatie

Binnen een document HTML We kunnen navigeren tussen de verschillende elementen die tot de DOM-boom behoren, hiervoor hebben we de hiërarchische structuur en kunnen we meerdere methoden gebruiken waarmee we de relaties van de documenten kunnen benaderen.
Navigeer door de DOM-structuur
Zoals we al zeiden, kan de navigatie worden gedaan door de hiërarchische structuur die het schema als een boom visualiseert, op deze manier kunnen we de elementen behandelen als ouders, kinderen, broers en zussen.
Hiermee kan het zoeken naar een element worden gedaan volgens de filosofie van het zoeken op relatie.
Laten we de beschikbare methoden bekijken voordat we verder gaan met de praktische toepassingen:

· childNodes: Retourneert alle onderliggende elementen van het bovenliggende element.

· eerstgeborene: Retourneert het element dat het eerste onderliggende element is van een bovenliggend element.

· hasChildNodes (): Retourneert waar of waar als het huidige element onderliggende knooppunten heeft.

· laatste kind: Retourneert het laatste onderliggende element van een element in het document.

· volgendeBroer/zus: Retourneert het broer/zus-element gedefinieerd door het huidige HTML-element.

· parentNode: Retourneert het bovenliggende element van het huidige HTML-element.

· vorigeBroer/zus: Retourneert het broer/zus-element vóór het huidige HTML-element.

Als we eenmaal weten welke methoden we beschikbaar hebben, gaan we een eenvoudig codevoorbeeld zien waarmee we gaan begrijpen waar de navigatie doorheen gaat. DOM-boom.

 Voorbeeld 

Er zijn veel verschillende soorten fruit - er zijn alleen al meer dan 500 soorten bananen. Tegen de tijd dat we de talloze soorten appels, sinaasappels en ander bekend fruit toevoegen, staan ​​we voor duizenden keuzes.
 
Een van de meest interessante aspecten van fruit is de variëteit die in elk land beschikbaar is. Ik woon in de buurt van Londen, in een gebied dat bekend staat om zijn appels.

Ouder Eerste kind Vorige broer of zus Volgende broer of zus

Wat deze code bereikt, is om tussen elementen te kunnen navigeren en zodra deze ze in lichtgrijs overschaduwt om te kunnen onderscheiden in welk deel van het document we ons bevinden, laten we in de afbeelding zien hoe we het in onze browser zouden moeten zien:

Zoals we kunnen zien, helpt deze manier om de elementen in de DOM te plaatsen ons wanneer we niet zeker zijn van de identifiers of wanneer het een dynamische maar gedefinieerde structuur is.
Hiermee hebben we deze tutorial afgerond, waar we in staat waren om naar elementen in een HTML-document te zoeken zonder afhankelijk te zijn van identifiers of elementnamen, simpelweg door hun relatie in de hiërarchische structuur te gebruiken.Vond je deze tutorial leuk en hielp je hem?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven