Arbetar med Node Relationships to Code med JavaScript-dummies

HTML DOM-träd liknar familjeträd i det hierarkiska förhållandet mellan noder. Faktum är att de tekniska termer som används av JavaScript-programmerare för att beskriva relationer mellan noder i ett träd tar sina namn från familjeförhållanden.

• Varje nod, förutom rotnodet, har en förälder.

• Varje nod kan ha ett antal barn.

• Noder med samma förälder är syskon.

Eftersom HTML-dokument ofta har flera element som är av samma typ tillåter DOM dig att komma åt olika element i en nodlista med hjälp av ett indexnummer. Du kan till exempel hänvisa till det första

-elementet i ett dokument som p [0] och den andra

elementnoden som p [1].

Även om en nodlista kan se ut som en matris, är det inte. Du kan gå igenom innehållet i en nodlista, men du kan inte använda array-metoder på nodlistor.

I denna kod är de tre

-elementen alla elementets barn. Eftersom de har samma förälder är de syskon.

HTML-familjen Första

Andra

Tredje


I exemplet ovan är HTML-kommentarerna också barn till sektionselementet. Den sista kommentaren innan den stängande sektionstaggen heter sista barnet i avsnittet.






Genom att förstå förhållandena mellan dokumentnoder kan du använda DOM-trädet för att hitta något element i ett dokument.
Här är ett HTML-dokument som innehåller ett skript som matar ut alla barnkoder i sektionselementet.
HTML-familjen Första

Andra

Tredje


Noder i sektionselementet
var myNodelist = 

dokument. kropp. childNodes [1]. childNodes; för (i = 0; i 
");}

Så här ser utmatningen av den här koden ut i en webbläsare. Observera att den första barnnoden för sektionselementet är en textnod. Om du tittar noga på HTML-markeringen ser du att det finns ett enda mellanslag mellan öppningsdeltaggen och kommentaren.Även något så enkelt som detta enda utrymme skapar en hel nod i DOM-trädet. Detta faktum måste beaktas när du navigerar DOM med relationer mellan noder.

Visar kodens utgång.
HTML DOM ger också ett par nyckelord för att navigera noder med sina positioner i förhållande till deras syskon eller föräldrar. De relativa egenskaperna är


firstChild: Referenser det första barnet i en nod


lastChild: Referenser det sista barnet i noden


nextSibling: Referenser nästa nod med samma moderkod


tidigareSibling: Referenser föregående nod med samma moderkod


Detta exempel visar hur du kan använda dessa relativa egenskaper för att korsa DOM.
Iguanor är ingen kulfunktion boldFirstAndLastNav () {dokument. kropp. childNodes [1]. förstfödde. stil. fontWeight = ”fet”; dokumentera. kropp. childNodes [1]. sista barnet. stil. fontWeight = "bold";} Hem | 
href = "varför. html "> Varför är Iguanas ingen kul? | Vad kan göras? | Kontakta oss
Iguanor är inte roliga att vara runt. Använd länkarna ovan för att lära dig mer.
boldFirstAndLastNav ();

Observera att all avstånd måste tas bort mellan elementen i elementet för att de första egenskaperna förHild och LastChild ska kunna komma åt de korrekta elementen som du vill välja och stila.
Så här ser dokumentet ut när det förhandsgranskas i en webbläsare. Observera att bara de första och sista länkarna i navigeringen är fetstil.

Förhandsgranska din kod i en webbläsare.
Detta är ett exempel på att använda DOM för att göra en ändring av befintliga element i dokumentet. Denna metod för att välja element används nästan aldrig. Det är för benäget för misstag och för svårt att tolka och använda.