Innholdsfortegnelse:
Video: Week 10 2025
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 TredjeI 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 TredjeNoder 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.
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.
