Introduksjon til DOM

Uansett hvilken handling vi utfører på en HTML -webside som å endre et element, endre attributtene til et element, eller endre stilen til et element ved hjelp av et skriptspråk, utføres ved hjelp av DOM. Dette er fordi skriptspråket ikke får tilgang til HTML -elementet på egen hånd, det er derfor det krever et midtgrensesnitt som knytter skriptspråket til HTML -elementet.

DOM kan kalles strukturen i dokumentet der dokumentet kan være en HTML -webside eller en XML -side. I dette innlegget skal vi vite hva DOM er, hvordan man jobber med live dom -seere og hvordan du får tilgang til elementer med et skriptspråk.

Hva er Dom?

DOM står for dokumentobjektsmodell og anses å være en standard for tilgang til, endre og slette elementer fra dokumentet. Denne standarden er satt av W3C (World Wide Web Consortium) Og det er grunnen til at Dom ofte blir referert til som W3C DOM. World Wide Web Consortium definerte DOM som et grensesnitt som hjelper språk å samhandle med et dokument mens du holder språknøytral.

De Dokument I DOM står for et dokument som kan være et HTML -dokument eller et XML -dokument. De Gjenstand I DOM brukes til å referere til elementer eller noder i dokumentet. Mens Modell I DOM refererer til strukturen (eller treet) i dokumentet.

DOM fungerer også som et applikasjonsgrensesnitt (API) for skriptspråket for å endre elementer i HTML -dokumentet

Strukturen i dokumentet er noe som et tre. Den inneholder overordnet nod og barneknuter.

Arbeider med live dom -seere

Noen nettsteder gir oss levende DOM -generatorer, en av slike live DOM -seere er gitt på Codepen.io. Tenk på følgende elementer på HTML -webside:

Google	Bing
John Doe, Ruski	California

For å generere DOM -hierarkiet ved hjelp av JavaScript -koden på kodepenn, kopier og lim inn disse HTML -elementene i DOM -seeren på Codepen.io

Under denne HTML -fanen på “Codepen”, Du vil kunne se Dom -hierarkiet som:

Du kan tydelig se foreldrodene, barneknuter og søskenknuter basert på deres innrykk i strukturen

Få tilgang til HTML -elementer med JavaScript

JavaScript gir flere metoder for å koble elementene på en HTML -webside ved å samhandle med DOM. Disse metodene er nemlig:

• getElementById ()
• getElementByClassName ()
• getElementByname ()
• getElementBytagName ()
• getElementBytagns ()

For å demonstrere dette, lag en HTML -side med følgende linjer:

Jeg er en P -tagg i DOM

Legg til lenken i skriptfilen ved å bruke følgende linje:

Inne i skriptfilen, legg til følgende kodelinjer for å endre bakgrunnsfargen på dette P -tag:

var ptag = dokument.getElementById ("Demo");
PTAG.stil.BakgrunnColor = "Gul";

Du får følgende resultat i nettleseren:

Der du går har du endret stilen til et element ved hjelp av skriptspråk.

Konklusjon

DOM er satt som en standard av W3C (World Wide Web Consortium) som et grensesnitt for skriptspråket for å samhandle med elementene i dokumentet (HTML eller XML). Skriptspråket (for eksempel JavaScript) har ikke direkte tilgang til elementene på nettsiden. Derfor samhandler det med DOM og DOM fungerer som en API og utfører endringer i elementene i HTML -websiden. Dom -strukturen er som et tre, som har foreldroder, barneknuter og søskenknuter.