Html dom

For å gjøre et HTML -dokument mer dynamisk og interaktivt, kreves JavaScript for å få tilgang til dokumentinnholdet og identifisere brukeren som samhandler med det. JavaScript oppnår dette ved å samhandle med nettleseren ved hjelp av HTML DOM (Document Object Model), dens egenskaper, hendelser og metoder.

Denne oppskrivningen vil diskutere HTML DOM, dens betydning og struktur. Vi vil også snakke om egenskapene og metodene til dokumentobjektsmodellen og DOM -nivåene.

Html dom

HTML -dokumentobjektmodellen eller HTML DOM er et XML- og HTML -programmeringsgrensesnitt. Dokumentobjektmodellen oppretter en logisk dokumentstruktur og definerer metoden for å få tilgang til og endre dem. Fordi HTML DOM ikke identifiserer noen objektforhold, betegnes det som logisk struktur.

HTML DOM er også kjent for å representere websider på en hierarkisk og organisert måte, slik at brukerne og JavaScript -programmererne enkelt kan navigere gjennom dokumentet. HTML DOM tillater deg å få tilgang til og manipulere HTML -elementer, klasser, tagger, attributter og ID -er ved å bruke de tilbudte metodene og kommandoene.

Hvorfor trenger du HTML DOM

JavaScript brukes til å legge til relatert funksjonalitet hvis du bruker HTML for å strukturere websidene dine. Når et HTML -dokument blir lastet inn i nettleseren, kan JavaScript ikke forstå det direkte. Derfor opprettes en tilsvarende dokumentobjektmodell. Den genererte DOM representerer det samme HTML -dokumentet annerledes ved hjelp av objektene. Etter det kan JavaScript lett tolke HTML DOM.

I et HTML -dokument kan for eksempel ikke JavaScript direkte forstå taggene (

avsnitt

); Imidlertid kan den forstå objektet "p”I dokumentobjektmodellen. Med denne muligheten kan JavaScript bruke flere metoder for å få tilgang til de ekstra objektene til HTML -dokumenter.

Struktur av HTML DOM

HTML DOM eller Document Object Model har en trelignende struktur, der treet definerer strukturmodellen til dokumentet. I HTML DOM -strukturmodellen, “Strukturell isomorfisme”Er en essensiell egenskap som sier at hvis du har brukt to DOM -implementeringer for å konstruere en representasjon eller modell av det samme HTML -dokumentet, vil de produsere de samme strukturelle modellene som er basert på de samme objektene og deres forhold.

Hvorfor kaller vi HTML DOM en dokumentmodell

HTML -objekter brukes til modellering av dokumenter. Denne modellen omfatter dokumentstrukturen, objekter og deres oppførsel, for eksempel HTML -tagelementene som har sine attributter.

HTML DOM -egenskaper

La oss nå sjekke ut dokumentobjektets egenskaper som kan hente og endre dokumentobjektet:

• Vinduobjekt: Du vil alltid se “Window -objektet” øverst i DOM -hierarkiet.
• Dokumentobjekt: Når du laster inn et HTML -dokument i en nettleser, konverteres det til et dokumentobjekt.
• Ankerobjekt: Href -tagger brukes til å representere ankerobjektene.
• Formobjekt: Formagger brukes til å representere formobjektene.
• Lenkeobjekt: Koblingskoder brukes til å representere koblingsobjektene.
• Form kontrollelementer: Skjemaer kan også ha andre kontrollelementer som knapper, tilbakestilling, radioknapper, tekstområder, avmerkingsboks.

HTML Dokumentobjektmetoder

Her er noen nyttige HTML -dokumentobjektmetoder som du kan bruke i henhold til dine krav:

• getElementByClassName (): Metoden GetElementByClassName () brukes til å hente elementer som har det spesifiserte klassenavnet.
• getElementBytagName (): Metoden GetElementBytagName () brukes til å hente elementer med det ekstra tagnavnet.
• getElementByname (): GetElementByName () -metoden brukes til å hente elementer som har den spesifiserte navneverdien.
• getElementById (): GetElementById () -metoden brukes til å hente elementer som har den spesifiserte ID -verdien.
• skrive(): Skriv () -metoden brukes til å skrive den spesifiserte strengen i dokumentet.

Eksempel 1: Finn og få HTML -element av ID i JavaScript

I det undergitte eksemplet har vi brukt getElementById () -metoden for å finne HTML DOM som har ID “P1”:

Dette er Linuxhint.com

Finn og få HTML DOM -elementer etter ID

Dette er et JavaScript -program som bruker metoden "getElementsById"

Utfør ovennevnte program i din favorittkodeditor eller en hvilken som helst online kodende sandkasse; Imidlertid vil vi bruke JSBIN til dette formålet:

Utførelse av det ovennevnte JavaScript-programmet vil vise følgende utgang:

Eksempel 2: HTML DOM -elementer representasjon

Følgende eksempel illustrerer representasjonen av HTML -elementer i DOM (Document Object Model):

Sykkel	Fly
Lastebil	Buss

Her er representasjonen av de ovennevnte elementene i en trelignende struktur:

HTML DOM -nivå

HTML DOM består av fire nivåer: nivå 0, nivå 1, nivå 2 og nivå 3.

Dom nivå 0

Dette nivået tilbyr et grensesnittsett på lavt nivå.

Dom nivå 1

DOM -nivå 1 omfatter Html og KJERNE deler. HTML leverer grensesnitt på høyt nivå som kan brukes til å representere HTML-dokumenter, og kjernedelen brukes til å representere det strukturerte dokumentet.

Dom nivå 2

DOM -nivå 2 er basert på seks spesifikasjoner: rekkevidde, traversal, stil, hendelser og core2.

• OMRÅDE: Det tillater HTML -programmer for dynamisk tildeling av et innholdsområde i dokumentet.
• Traversal: Det tillater HTML -programmer å krysse dokumentet dynamisk.
• STIL: Det tillater programmer å hente og stille inn stilarkens innhold.
• ARRANGEMENTER: Når en bruker samhandler med en webside, er hendelser skriptene som er utført som et resultat av det.
• Visninger: Det tillater HTML -programmer å hente og angi dokumentets innhold.

Dom nivå 3

DOM -nivå 3 er basert på fem spesifikasjoner: xpath, hendelser, validering, lagring, last og core3.

• Xpath: Det er et banespråk som brukes for å få tilgang til trestrukturen til DOM.
• ARRANGEMENTER: Det forbedrer funksjonaliteten til DOM -nivå 2 -hendelser.
• Validering: Det tillater HTML -programmet å endre strukturen og dokumentets innhold, samtidig som det oppgir det medfølgende dokumentet er gyldig.
• LAGRE og LASTE: HTML -programmet tillater dynamisk lasting og lagring av XML -dokumentinnholdet i et DOM -dokument.
• Core3: Det forbedrer funksjonaliteten til DOM -nivå 2 -kjernen.

Konklusjon

HTML DOM eller dokumentobjektmodellen er avgjørende for å utvikle interaktive nettsteder. Det er et brukergrensesnitt som lar et programmeringsspråk endre nettstedets stil, struktur og innhold. HTML DOM fungerer også som et grensesnitt mellom HTML og JavaScript. Denne oppskrivningen diskuterte HTML DOM, dens betydning og struktur. Vi har også snakket om egenskapene og metodene for dokumentobjektsmodell og DOM -nivåer.