HTML DOM (asiakirjaobjektimalli) on hierarkkinen esitys HTML-dokumenteista. Se määrittelee verkkosivun elementtien rakenteen ja ominaisuudet, mikä mahdollistaa JavaScriptin dynaamisen pääsyn, muokkaamisen ja päivittämisen sisältöön, mikä parantaa interaktiivisuutta ja toimivuutta.

Huomautus : Sitä kutsutaan loogiseksi rakenteeksi, koska DOM ei määritä mitään suhdetta objektien välillä.

Sisällysluettelo

• Miksi DOM vaaditaan?
• DOM:n rakenne
• DOM:n ominaisuudet
• Dokumenttiobjektimallin menetelmät
• Mikä DOM ei ole?
• DOM-tasot:

Mikä on DOM?

DOM , tai Asiakirjaobjektimalli , on ohjelmointirajapinta, joka edustaa strukturoituja asiakirjoja, kuten HTML ja XML esineiden puuna. Se määrittää, kuinka asiakirjaelementtejä voidaan käyttää, käsitellä ja muokata komentosarjakielillä, kuten JavaScriptillä.

Joten pohjimmiltaan Document Object Model on API joka edustaa HTML- tai XML-dokumentteja ja on vuorovaikutuksessa niiden kanssa.

DOM on a W3C (World Wide Web Consortium) standardi ja se määrittelee standardin asiakirjoihin tutustumiselle.

W3C Dom -standardi on jaettu kolmeen eri osaan:

• Ydin DOM – vakiomalli kaikille asiakirjatyypeille
• XML DOM – vakiomalli XML-asiakirjoille
• HTML DOM – vakiomalli HTML-dokumenteille

HTML DOM

HTML DOM on standardi objektimalli ja ohjelmointirajapinta HTML-dokumentteja. HTML DOM on tapa edustaa verkkosivua a rakenteellisesti hierarkkisesti jotta ohjelmoijien ja käyttäjien on helpompi liukua asiakirjan läpi.

HTML DOM:n avulla voimme helposti käyttää ja käsitellä HTML:n tunnisteita, tunnuksia, luokkia, attribuutteja tai elementtejä dokumenttiobjektin antamien komentojen tai menetelmien avulla.

Käyttämällä DOM JavaScriptiä saamme pääsyn web-sivun HTML:ään ja CSS:ään ja voimme myös muokata HTML-elementtien käyttäytymistä.

Miksi DOM vaaditaan?

HTML on tottunut rakenne verkkosivut ja Javascript käytetään lisäämiseen käyttäytymistä nettisivuillemme. Kun HTML-tiedosto ladataan selaimeen, JavaScript ei voi ymmärtää HTML-asiakirjaa suoraan. Joten se tulkitsee ja on vuorovaikutuksessa Document Object Model (DOM) -mallin kanssa, jonka selain luo HTML-dokumentin perusteella.

linkitetty lista java

DOM on periaatteessa saman HTML-dokumentin esitys, mutta puumaisessa rakenteessa, joka koostuu objekteista. JavaScript ei ymmärrä tunnisteita () HTML-dokumentissa, mutta pystyy ymmärtämään objektia h1 DOM:ssa.

JavaScript tulkitsee DOM:n helposti käyttämällä sitä siltana elementtien käsiksi ja manipuloimiseksi. DOM Javascript mahdollistaa pääsyn jokaiseen objektiin (h1, p jne.) käyttämällä eri toimintoja.

Document Object Model (DOM) on välttämätön verkkokehityksessä useista syistä:

• Dynaamiset verkkosivut: Sen avulla voit luoda dynaamisia verkkosivuja. Sen avulla JavaScript pääsee käsiksi ja manipuloi sivun sisältöä, rakennetta ja tyyliä dynaamisesti, mikä tarjoaa interaktiivisia ja reagoivia verkkokokemuksia, kuten sisällön päivittämisen lataamatta koko sivua uudelleen tai vastaamalla käyttäjän toimiin välittömästi.
• Interaktiivisuus: DOM:n avulla voit vastata käyttäjien toimiin (kuten napsautuksiin, syötteisiin tai vierittämiseen) ja muokata verkkosivua vastaavasti.
• Sisältöpäivitykset: Kun haluat päivittää sisältöä päivittämättä koko sivua, DOM mahdollistaa kohdennettuja muutoksia tehden verkkosovelluksista tehokkaampia ja käyttäjäystävällisempiä.
• Selainten välinen yhteensopivuus: Eri selaimet voivat hahmontaa HTML- ja CSS-koodit eri tavoilla. DOM tarjoaa standardoidun tavan olla vuorovaikutuksessa sivuelementtien kanssa.
• Yksisivuiset sovellukset (SPA): Reactin tai Angularin kaltaisilla kehyksillä rakennetut sovellukset luottavat vahvasti DOM:iin tehokkaassa hahmontamisessa ja sisällön päivittämisessä yhdellä HTML-sivulla lataamatta koko sivua uudelleen.

DOM:n rakenne

DOM voidaan ajatella puuna tai metsänä (useampi kuin yksi puu). Termi rakennemalli käytetään joskus kuvaamaan asiakirjan puumaista esitystä.

Jokainen puun haara päättyy solmuun ja jokainen solmu sisältää objekteja. Tapahtumaseuraajat voidaan lisätä solmuihin ja laukaista tietyn tapahtuman esiintyessä. Yksi tärkeä DOM-rakennemallien ominaisuus on rakenteellinen isomorfismi : jos mitä tahansa kahta DOM-toteutusta käytetään luomaan esitys samasta asiakirjasta, ne luovat saman rakennemallin täsmälleen samoilla objekteilla ja suhteilla.

Miksi DOM:ia kutsutaan objektimalliksi?

Asiakirjat mallinnetaan objektien avulla, ja malli sisältää dokumentin rakenteen lisäksi myös dokumentin ja sen koostuvien objektien käyttäytymisen kuten HTML:n attribuutteilla varustettuja tag-elementtejä.

DOM:n ominaisuudet

Katsotaanpa asiakirjaobjektin ominaisuuksia, joita asiakirjaobjekti voi käyttää ja muokata.

DOM:n edustus

np.linspace

• Ikkunan objekti : Window Object on selaimen objekti, joka on aina hierarkian yläosassa. Se on kuin API, jota käytetään määrittämään ja käyttämään kaikkia selaimen ominaisuuksia ja menetelmiä. Selain luo sen automaattisesti.
• Asiakirjan objekti: Kun HTML-dokumentti ladataan ikkunaan, siitä tulee dokumenttiobjekti. 'Dokumentti'-objektilla on useita ominaisuuksia, jotka viittaavat muihin objekteihin, jotka mahdollistavat pääsyn verkkosivun sisältöön ja sen muokkaamisen. Jos on tarvetta käyttää jotakin HTML-sivun elementtiä, aloitamme aina asiakirja-objektin käyttämisestä. Asiakirjaobjekti on ikkunaobjektin ominaisuus.
• Lomakeobjekti: Sitä edustaa muodossa tunnisteet.
• Linkkiobjekti : Sitä edustaa linkki tunnisteet.
• Ankkuriobjekti : Sitä edustaa a href tunnisteet.
• Lomakkeen ohjauselementit: Lomakkeessa voi olla monia ohjauselementtejä, kuten tekstikenttiä, painikkeita, valintanappeja, valintaruutuja jne.

Dokumenttiobjektin menetelmät

DOM tarjoaa erilaisia ​​menetelmiä, joiden avulla käyttäjät voivat olla vuorovaikutuksessa asiakirjan kanssa ja käsitellä sitä. Joitakin yleisesti käytettyjä DOM-menetelmiä ovat:

Esimerkki: Tässä esimerkissä käytämme HTML-elementtitunnusta DOM HTML -elementin etsimiseen.

    
techcodeview.comh2>
Tietojenkäsittelytieteen portaali nörteille. p>
Tämä esimerkki havainnollistaa getElementByIdb> -menetelmä. p>
p>