Document Object Model eller DOM ('Document Object Model' eller 'Document Representation Object Model') er i hovedsak et plattformgrensesnitt, eller programmerings- API for HTML-dokumenter, som gir et standardsett med objekter for å representere dokumenter. HTML , XHTML , XML og SVG , [ note 1 ] en standardmodell for hvordan slike objekter kan kombineres, og et standardgrensesnitt for å få tilgang til og manipulere dem. [ 1 ]Gjennom DOM kan programmer få tilgang til og modifisere innholdet, strukturen og stilen til nevnte dokumenter, noe det først og fremst er designet for å gjøre.
På denne måten tillater DOM dynamisk tilgang gjennom programmering for å dynamisk få tilgang til, legge til og endre strukturert innhold i dokumenter med språk som ECMAScript ( JavaScript ). Faktisk er DOM som et flerspråklig plattformgrensesnitt (cross-language API) for å få tilgang til og modifisere XML-dokumenter språkuavhengig, og derfor bruker en rekke programmeringsspråk DOM på daglig basis - som C++ og Python blant andre - når de samhandler med det . XML for ulike oppgaver. [ 2 ] [ 3 ]
Hovedstandardiseringen av DOM utføres av World Wide Web Consortium (W3C).
DOM ble født som et sett med objekter som representerer et HTML-dokument, og som fungerer som et grensesnitt mellom JavaScript og selve dokumentet, dens opprinnelse er Netscape Navigator fra selskapet Netscape Communications . Designet for å oppdage hendelser generert av brukeren og modifisere HTML-dokumentet, er dens første generasjon kjent som DOM Level 0 eller legacy (DOM Level 0 eller Legacy DOM).
Det oppsto opprinnelig under påvirkning av minst to utviklinger som har formet dataverdenen betydelig i den siste tiden. Begge er basert på behovet for enkel og konsistent tilgang til strukturerte data i HTML- og XML-dokumenter. [ 4 ]
På midten av 1990-tallet, ettersom populariteten til World Wide Web vokste, ble JavaScript-skriptspråket oppfunnet, og siden den gang har nettlesere inkludert tolker som utfører slike skript.
Microsofts Internet Explorer fulgte Netscape Navigator , begge disse nettleserne inkluderte støtte for Dynamic HTML (DHTML) [ 5 ] , som krevde utvidelser som da ble tilbudt av datidens rudimentære DOM, slik at webutviklere kunne lage sider med side-ved-side interaktivitet. fra klienten, slik at dokumentet nå kunne manipuleres gjennom DOM; det samme dokumentet ble imidlertid ikke gjengitt på samme måte av de to nettleserne.
JavaScript-tolkere, eller motorer for JavaScript, ble implementert i stor utstrekning av begge nettleserne. Microsoft på den tiden bestemte seg for å implementere JScript og VBScript for daværende Internet Explorer, noe som ga opphav til de såkalte "nettleserkrigene" på slutten av 1990-tallet mellom Netscape Navigator og Internet Explorer.
Så JavaScript definerte rudimentære måter å få tilgang til HTML-dokumentet og håndtere hendelser på. Senere oppfant forskjellige nettleserprodusenter forskjellige Dynamic HTML (DHTML)-modeller som tillot mer omfattende modifikasjoner av strukturen og utseendet til dokumentet mens det ble vist i nettleseren. Disse forskjellene gjorde imidlertid arbeidet til webutviklere som ønsket å bruke dynamisk HTML ekstremt kjedelig, da de ofte praktisk talt ble tvunget til å skrive en egen versjon for hver nettleser. De tidlige W3C ( WWW Consortium ) DOM-standardene er dermed forsøk på å slå sammen, standardisere og til slutt erstatte de forskjellige proprietære JavaScript- og DHTML-teknikkene som dukket opp under nettleserkrigene. Dette har vært så vellykket at DOM nå spiller en sentral rolle i JavaScript-programmering. [ 6 ]
I september 2008 dukker det gradvis opp nye nettlesere på scenen under Chromium -prosjektet , hvis kodebase er mye brukt av både Chrome -nettleseren og den nyere Microsoft Edge . Netscape Navigator forsvinner som en kommersiell nettleser [ 7 ] og etterlater Mozilla Firefox som en slags etterfølger .
Disse siste hendelsene og intervensjonen fra WWW Consortium (W3C), markerte en ny trend i kontinuerlig utvikling, og gradvis forsvant inkompatibilitetsproblemene med innføringen av DOM standardisert av W3C. DOM (nivå 4) er nå innebygd i HTML 5 -standarden , ble utgitt i desember 2015 og ble sist oppdatert i desember 2020. [ 6 ]
I dag har DOM gjennomsyret alle programmeringsspråk, uavhengig av språket, en rekke programmeringsspråk bruker DOM på daglig basis, som blant annet C++ og Python , da de samhandler med XML-applikasjoner for ulike oppgaver. [ 2 ] [ 3 ]
DOM definerer hvordan objekter og elementer forholder seg til hverandre i nettleseren og i dokumentet.
Ethvert programmeringsspråk som er egnet for webdesign kan brukes . Når det gjelder JavaScript , har hvert objekt et navn, som er unikt og unikt. Når det er mer enn ett objekt av samme type i et nettdokument, organiseres de i en vektor.
Det er mulig å tilordne en id til et objekt, og deretter bruke den til å referere til det, for eksempel:
<!- html document --> < div id = "WikiLanguages" > < li > Deutsch </ li > < li > Engelsk </ li > < li > Français </ li > </ div >For å referere til dette elementet kan du bruke getElementById -funksjonen
// JavaScript -dokument . getElementById ( "WikiLanguages" )Og utfør en operasjon på den, i dette tilfellet legger vi til et nytt element:
dokument . getElementById ( "WikiLanguages" ). innerHTML += "<li>Portugisisk</li>"Beregningsobjekter, som alle objekter i det virkelige liv, har egenskaper. Noen eksempler på virkelige objektegenskaper er dimensjoner, farge og vekt.
I de fleste beregningsobjekter kan noen egenskaper bestemmes som følger:
Objekt . egenskap = verdi ; //for eksempel for objektet "Glass" glass . farge = rød ;Objektmanipulering følger de samme prinsippene som i programmeringsspråket som brukes. En av egenskapene til disse objektene er funksjonen de er designet for, faktisk har de i de fleste tilfeller mer enn én funksjon. I JavaScript er mange funksjoner for hvert av objektene, inkludert nettleseren og vinduet som inneholder det, tidligere definert; I tillegg kan brukeren definere funksjoner i henhold til deres behov, for eksempel koden:
function eatTheLetterA ( Text ) { var NewText = "" ; while ( bokstaver i tekst ){ //les neste bokstav //hvis denne bokstaven ikke er "a" legg den til i den nye teksten } returner NyTekst ; }Legger til en ny funksjon i dokumentet som brukes til å lage en nettside.
Fra et beregningsmessig synspunkt oppstår en hendelse når en situasjon i datamaskinen endrer seg , slik som musens posisjon, trykk på en tast, innholdet i noen av minnene, tilstanden til skjermen osv. Ved oppretting av nettsider representerer disse hendelsene brukerens interaksjon med datamaskinen.
Når en av disse hendelsene inntreffer, for eksempel at en museknapp trykkes ned, vil du at datamaskinen skal reagere på en eller annen måte. Dette er grunnen til at det finnes hendelsesbehandlere , som er objekter som reagerer på hendelser. En måte å legge til hendelser til DOM ved hjelp av JavaScript er:
<element onevent= "script" > .... </element>For eksempel:
<div id= "midivision" onClick= "javascript:myFunction('bar');" > her er en annen tekst </div>Å være javascript -pseudoprotokollflagget : et valgfritt tillegg, og bare brukt av Microsoft Internet Explorer , der VBScript -reservespråket kan settes som standard . [ 8 ]
En annen måte å håndtere hendelser i JavaScript på , når du oppretter nettsider, er å behandle dem som egenskaper for elementene som utgjør siden, for eksempel:
objekt . hendelse = funksjon ; //For eksempel: dokument . getElementById ( "midivision" ). onclick = doNoe ;I DOM anses en hendelse å stamme fra utenfor nettsiden og forplante seg på en eller annen måte til de interne elementene på siden. Et mulig eksempel på denne forplantningen er:
HENDELSE → Vindu → Dokument → HTML → BODY → DIV → MÅL SVAR → DIV → BODY → HTML → Dokument → Vindu → HENDELSEEtter denne ideen etableres tre stadier: fangst , som skjer når hendelsen beveger seg til destinasjonen. White , som oppstår når den når den hvite, det vil si at den når målet. Dette målet er objektet for å lage en reaksjon på denne hendelsen. Til slutt det boblende stadiet som oppstår når hendelsen "går tilbake" til sin opprinnelige posisjon.
Enkelte objekter kan være oppmerksomme på visse hendelser. For å gjøre dette legger objektet til en "hendelseslytter" med addEventListener-funksjonen. Når hendelsen inntreffer, utføres en gitt funksjon. I denne prosessen er det indikert i hvilket øyeblikk funksjonen utføres, enten i fangststadiet eller i boblestadiet . Dette øyeblikket er indikert med ordet sant hvis det skulle forekomme i fangststadiet eller usant hvis det skulle oppstå i boblestadiet. I JavaScript er det skrevet som følger:
objekt . addEventListener ( hendelse , funksjon , tid ); //for eksempel: dokument . getElementById ( "min avdeling" ). addEventListener ( "klikk" , doSomething , usant );