HTML DOM (dokumento objekto modelis) yra hierarchinis HTML dokumentų atvaizdavimas. Ji apibrėžia tinklalapio elementų struktūrą ir ypatybes, todėl JavaScript gali dinamiškai pasiekti turinį, jį manipuliuoti ir atnaujinti, o tai padidina interaktyvumą ir funkcionalumą.

Pastaba : Ji vadinama logine struktūra, nes DOM nenurodo jokių objektų santykio.

Turinys

• Kodėl reikalingas DOM?
• DOM struktūra
• DOM savybės
• Dokumentų objektų modelio metodai
• Kas nėra DOM?
• DOM lygiai:

Kas yra DOM?

DOM , arba Dokumento objekto modelis , yra programavimo sąsaja, vaizduojanti tokius struktūrinius dokumentus kaip HTML ir XML kaip daiktų medis. Jame apibrėžiama, kaip pasiekti, manipuliuoti ir modifikuoti dokumento elementus naudojant scenarijų kalbas, pvz., JavaScript.

Taigi iš esmės dokumento objekto modelis yra API kuri atstovauja ir sąveikauja su HTML arba XML dokumentais.

DOM yra a W3C (World Wide Web Consortium) standartinis ir apibrėžia prieigos prie dokumentų standartą.

mama kulkarni

W3C Dom standartas yra padalintas į tris skirtingas dalis:

• Pagrindinis DOM – standartinis visų tipų dokumentų modelis
• XML DOM – standartinis XML dokumentų modelis
• HTML DOM – standartinis HTML dokumentų modelis

HTML DOM

HTML DOM yra standartas objekto modelis ir programavimo sąsaja HTML dokumentai. HTML DOM yra būdas pavaizduoti tinklalapį a struktūrizuotas hierarchinis būdas kad programuotojams ir vartotojams būtų lengviau naršyti dokumentą.

Naudodami HTML DOM galime lengvai pasiekti ir manipuliuoti žymomis, ID, klasėmis, atributais ar HTML elementais naudodami komandas ar metodus, pateiktas dokumento objekto.

Naudodami DOM JavaScript gauname prieigą prie HTML ir tinklalapio CSS, taip pat galime keisti HTML elementų elgesį.

skaičiuojant kadenciją „Excel“.

Kodėl reikalingas DOM?

HTML naudojamas struktūra tinklalapius ir Javascript naudojamas pridėti elgesį į mūsų tinklalapius. Kai HTML failas įkeliamas į naršyklę, JavaScript negali suprasti HTML dokumento tiesiogiai. Taigi jis interpretuoja ir sąveikauja su dokumento objekto modeliu (DOM), kurį naršyklė sukuria pagal HTML dokumentą.

DOM iš esmės yra to paties HTML dokumento, bet į medį panašios struktūros, sudarytos iš objektų, vaizdas. „JavaScript“ negali suprasti žymų () HTML dokumente, bet gali suprasti objektą h1 DOM.

„JavaScript“ lengvai interpretuoja DOM, naudodamas jį kaip tiltą elementams pasiekti ir jais valdyti. DOM Javascript leidžia pasiekti kiekvieną objektą (h1, p ir tt) naudojant skirtingas funkcijas.

Dokumento objekto modelis (DOM) yra būtinas kuriant internetą dėl kelių priežasčių:

• Dinaminiai tinklalapiai: Tai leidžia kurti dinamiškus tinklalapius. Tai leidžia „JavaScript“ dinamiškai pasiekti ir manipuliuoti puslapio turiniu, struktūra ir stiliumi, o tai suteikia interaktyvią ir reaguojančią žiniatinklio patirtį, pvz., atnaujinant turinį iš naujo neįkeliant viso puslapio arba akimirksniu reaguojant į vartotojo veiksmus.
• Interaktyvumas: Naudodami DOM galite reaguoti į vartotojo veiksmus (pvz., paspaudimus, įvestis ar slinkimus) ir atitinkamai keisti tinklalapį.
• Turinio atnaujinimai: Kai norite atnaujinti turinį neatnaujindami viso puslapio, DOM įgalina tikslinius pakeitimus, todėl žiniatinklio programos tampa veiksmingesnės ir patogesnės.
• Suderinamumas su keliomis naršyklėmis: Skirtingos naršyklės HTML ir CSS gali pateikti skirtingais būdais. DOM suteikia standartizuotą sąveikos su puslapio elementais būdą.
• Vieno puslapio programos (SPA): Programos, sukurtos naudojant tokias sistemas kaip „React“ arba „Angular“, labai priklauso nuo DOM, kad efektyviai atvaizduotų ir atnaujintų turinį viename HTML puslapyje, neįkeliant viso puslapio iš naujo.

DOM struktūra

DOM gali būti laikomas medžiu arba mišku (daugiau nei vienas medis). Terminas struktūros modelis kartais naudojamas apibūdinti į medį panašus dokumento vaizdas.

Kiekviena medžio šaka baigiasi mazgu, o kiekviename mazge yra objektai. Įvykių klausytojus galima pridėti prie mazgų ir suaktyvinti įvykus tam tikram įvykiui. Viena svarbi DOM struktūros modelių savybė yra struktūrinis izomorfizmas : jei kuriant to paties dokumento atvaizdą naudojami bet kokie du DOM diegimai, jie sukurs tą patį struktūros modelį su tiksliai tais pačiais objektais ir ryšiais.

Kodėl DOM vadinamas objekto modeliu?

Dokumentai modeliuojami naudojant objektus, o modelis apima ne tik dokumento struktūrą, bet ir dokumento bei objektų, iš kurių jis sudarytas, elgseną kaip žymų elementus su atributais HTML.

javafx ant užtemimo

DOM savybės

Pažiūrėkime dokumento objekto ypatybes, kurias gali pasiekti ir keisti dokumento objektas.

DOM atstovavimas

• Lango objektas : Lango objektas yra naršyklės objektas, kuris visada yra hierarchijos viršuje. Tai tarsi API, kuri naudojama visoms naršyklės ypatybėms ir metodams nustatyti ir pasiekti. Jį automatiškai sukuria naršyklė.
• Dokumento objektas: Kai HTML dokumentas įkeliamas į langą, jis tampa dokumento objektu. „Dokumento“ objektas turi įvairių savybių, nurodančių kitus objektus, leidžiančius pasiekti ir keisti tinklalapio turinį. Jei reikia pasiekti bet kurį HTML puslapio elementą, mes visada pradedame nuo „dokumento“ objekto prieigos. Dokumento objektas yra lango objekto nuosavybė.
• Formos objektas: Jį atstovauja forma žymės.
• Nuorodos objektas : Jį atstovauja nuoroda žymės.
• Inkaro objektas : Jį atstovauja a href žymės.
• Formos valdymo elementai: Formoje gali būti daug valdymo elementų, tokių kaip teksto laukai, mygtukai, radijo mygtukai, žymimieji langeliai ir kt.

Dokumento objekto metodai

DOM pateikia įvairius metodus, leidžiančius vartotojams bendrauti su dokumentu ir juo manipuliuoti. Kai kurie dažniausiai naudojami DOM metodai yra šie:

Pavyzdys: Šiame pavyzdyje mes naudojame HTML elemento ID norėdami rasti DOM HTML elementą.