Arbeider med Node Relationships to Code med JavaScript-dummies

HTML DOM-trær ligner familietrær i det hierarkiske forholdet mellom noder. Faktisk, de tekniske termer som brukes av JavaScript-programmerere for å beskrive relasjoner mellom noder i et tre, tar navn fra familieforhold.

• Hver knute, unntatt rotnoden, har en forelder.

• Hver knute kan ha noen antall barn.

• Noder med samme forelder er søsken.

Siden HTML-dokumenter ofte har flere elementer som er av samme type, gir DOM deg tilgang til forskjellige elementer i en nodeliste ved hjelp av et indeksnummer. For eksempel kan du referere til det første

elementet i et dokument som p [0] og den andre

elementnoden som p [1].

Selv om en nodeliste kan se ut som en matrise, er det ikke. Du kan gå gjennom innholdet i en nodeliste, men du kan ikke bruke array-metoder på nodelister.

I denne koden er de tre

elementene alle elementets barn. Fordi de har samme foreldre, er de søsken.

HTML-familien Første

Andre

Tredje


I eksemplet ovenfor er HTML-kommentarene også barn til seksjonselementet. Den siste kommentaren før den avsluttende delen-taggen heter siste barnet i seksjonen.






Ved å forstå forholdet mellom dokumentnoder, kan du bruke DOM-treet til å finne noe element i et dokument.
Her er et HTML-dokument som inneholder et skript som utdataer alle barnnoder av seksjonselementet.
HTML-familien Første

Andre

Tredje


Noder i delen elementet
var myNodelist = 

dokument. kropp. childNodes [1]. childNodes; for (i = 0; i 
");}

Dette er hva utdataene til denne koden ser ut i en nettleser. Legg merke til at den første barnnoden til seksjonselementet er en tekstknute. Hvis du ser nøye på HTML-oppslaget, ser du at det er et enkelt mellomrom mellom åpningsdeltaggen og kommentaren.Selv noe som er så enkelt som dette enkeltromet, oppretter en hel knute i DOM-treet. Dette faktum må tas i betraktning når du navigerer DOM ved hjelp av relasjoner mellom noder.

Vise utgangen på koden din.
HTML DOM gir også et par søkeord for å navigere noder ved hjelp av posisjoner i forhold til deres søsken eller foreldre. De relative egenskapene er


firstChild: Referanser det første barnet til en node


lastChild: Referanser det siste barnet i node


nextSibling: Henvisninger neste nod med samme foreldre node


forrigeSibling: Referanser forrige nod med samme foreldre node


Dette eksempelet viser hvordan du kan bruke disse relative egenskapene til å krysse DOM.
Iguaner er ingen morsom funksjon boldFirstAndLastNav () {dokument. kropp. childNodes [1]. første barn. stil. fontWeight = “fet”; dokument. kropp. childNodes [1]. siste barn. stil. fontWeight = "bold";} Hjem | 
href = "hvorfor. html "> Hvorfor er Iguanas ikke moro? | Hva kan bli gjort? | Kontakt oss
Iguaner er ikke morsomme å være rundt. Bruk koblingene ovenfor for å lære mer.
boldFirstAndLastNav ();

Legg merke til at alle avstandene må fjernes mellom elementene i elementet, slik at de første egenskapene for Cild og LastChild får tilgang til de riktige elementene du vil velge og stilere.
Dette er hva dokumentet ser ut når det forhåndsvises i en nettleser. Legg merke til at bare de første og siste koblingene i navigeringen er fet.

Forhåndsvisning av koden din i en nettleser.
Dette er et eksempel på bruk av DOM for å gjøre endringer i eksisterende elementer i dokumentet. Denne metoden for å velge elementer er nesten aldri brukt. Det er for utsatt for feil og for vanskelig å tolke og bruke.