HTML DOM (dokumenta objektu modelis) ir HTML dokumentu hierarhisks attēlojums. Tas nosaka tīmekļa lapas elementu struktūru un īpašības, ļaujot JavaScript dinamiski piekļūt saturam, manipulēt ar to un atjaunināt to, uzlabojot interaktivitāti un funkcionalitāti.

Piezīme : To sauc par loģisko struktūru, jo DOM nenorāda nekādas attiecības starp objektiem.

Satura rādītājs

• Kāpēc ir nepieciešams DOM?
• DOM struktūra
• DOM īpašības
• Dokumentu objektu modeļa metodes
• Kas nav DOM?
• DOM līmeņi:

Kas ir DOM?

DOM , vai Dokumenta objekta modelis , ir programmēšanas saskarne, kas attēlo strukturētus dokumentus, piemēram HTML un XML kā priekšmetu koks. Tas nosaka, kā piekļūt, manipulēt un modificēt dokumenta elementus, izmantojot skriptu valodas, piemēram, JavaScript.

Tātad būtībā dokumenta objektu modelis ir API kas attēlo HTML vai XML dokumentus un mijiedarbojas ar tiem.

DOM ir a W3C (Pasaules tīmekļa konsorcijs) standarta un tas nosaka standartu piekļuvei dokumentiem.

W3C Dom standarts ir sadalīts trīs dažādās daļās:

• Galvenais DOM – standarta modelis visiem dokumentu veidiem
• XML DOM – XML dokumentu standarta modelis
• HTML DOM – standarta modelis HTML dokumentiem

HTML DOM

HTML DOM ir standarts objekta modelis un programmēšanas interfeiss HTML dokumenti. HTML DOM ir veids, kā attēlot tīmekļa lapu a strukturēts hierarhisks veids lai programmētājiem un lietotājiem būtu vieglāk slīdēt pa dokumentu.

java virkne int konvertēšanai

Izmantojot HTML DOM, mēs varam viegli piekļūt tagiem, ID, klasēm, atribūtiem vai HTML elementiem un ar tiem manipulēt, izmantojot komandas vai metodes, ko nodrošina dokumenta objekts.

Izmantojot DOM JavaScript, mēs iegūstam piekļuvi tīmekļa lapas HTML, kā arī CSS, kā arī varam mainīt HTML elementu uzvedību.

Kāpēc ir nepieciešams DOM?

HTML ir pieradis struktūra tīmekļa lapas un Javascript tiek izmantots, lai pievienotu uzvedība uz mūsu tīmekļa lapām. Kad pārlūkprogrammā tiek ielādēts HTML fails, JavaScript nevar tieši saprast HTML dokumentu. Tādējādi tas interpretē un mijiedarbojas ar dokumenta objektu modeli (DOM), ko pārlūkprogramma izveido, pamatojoties uz HTML dokumentu.

DOM būtībā ir viena un tā paša HTML dokumenta attēlojums, bet kokam līdzīgā struktūrā, kas sastāv no objektiem. JavaScript nevar saprast tagus () HTML dokumentā, bet var saprast objektu h1 DOM.

JavaScript viegli interpretē DOM, izmantojot to kā tiltu, lai piekļūtu elementiem un manipulētu ar tiem. DOM Javascript ļauj piekļūt katram no objektiem (h1, p utt.), izmantojot dažādas funkcijas.

Dokumenta objekta modelis (DOM) ir būtisks tīmekļa izstrādē vairāku iemeslu dēļ:

• Dinamiskās tīmekļa lapas: Tas ļauj jums izveidot dinamiskas tīmekļa lapas. Tas ļauj JavaScript dinamiski piekļūt un manipulēt ar lapas saturu, struktūru un stilu, kas nodrošina interaktīvu un atsaucīgu tīmekļa pieredzi, piemēram, satura atjaunināšanu, nepārlādējot visu lapu vai nekavējoties reaģējot uz lietotāja darbībām.
• Interaktivitāte: Izmantojot DOM, varat reaģēt uz lietotāja darbībām (piemēram, klikšķiem, ievadi vai ritināšanu) un attiecīgi modificēt tīmekļa lapu.
• Satura atjauninājumi: Ja vēlaties atjaunināt saturu, neatsvaidzinot visu lapu, DOM nodrošina mērķtiecīgas izmaiņas, padarot tīmekļa lietojumprogrammas efektīvākas un lietotājam draudzīgākas.
• Saderība starp pārlūkprogrammām: Dažādas pārlūkprogrammas var atveidot HTML un CSS dažādos veidos. DOM nodrošina standartizētu veidu, kā mijiedarboties ar lapas elementiem.
• Vienas lapas lietojumprogrammas (SP): Lietojumprogrammas, kas izveidotas ar tādiem ietvariem kā React vai Angular, lielā mērā paļaujas uz DOM, lai efektīvi atveidotu un atjauninātu saturu vienā HTML lapā, nepārlādējot visu lapu.

DOM struktūra

DOM var uzskatīt par koku vai mežu (vairāk nekā viens koks). Termiņš struktūras modelis dažreiz tiek izmantots, lai aprakstītu kokam līdzīgu dokumenta attēlojumu.

Katrs koka zars beidzas ar mezglu, un katrā mezglā ir objekti. Notikumu uztvērējus var pievienot mezgliem un aktivizēt konkrēta notikuma gadījumā. Viena svarīga DOM struktūras modeļu īpašība ir strukturālais izomorfisms : ja viena dokumenta attēlojuma izveidošanai tiek izmantotas divas DOM implementācijas, tās izveidos vienu un to pašu struktūras modeli ar tieši tādiem pašiem objektiem un attiecībām.

Kāpēc DOM sauc par objektu modeli?

gimp taisnstūra zīmējums

Dokumenti tiek modelēti, izmantojot objektus, un modelis ietver ne tikai dokumenta struktūru, bet arī dokumenta un objektu, no kuriem tas sastāv, uzvedību, piemēram, tagu elementus ar atribūtiem HTML.

DOM īpašības

Apskatīsim dokumenta objekta rekvizītus, kuriem dokumenta objekts var piekļūt un ko var mainīt.

DOM pārstāvība

• Logu objekts : Logu objekts ir pārlūkprogrammas objekts, kas vienmēr atrodas hierarhijas augšgalā. Tas ir kā API, ko izmanto, lai iestatītu un piekļūtu visiem pārlūkprogrammas rekvizītiem un metodēm. To automātiski izveido pārlūkprogramma.
• Dokumenta objekts: Kad HTML dokuments tiek ielādēts logā, tas kļūst par dokumenta objektu. Objektam “dokuments” ir dažādi rekvizīti, kas attiecas uz citiem objektiem, kas ļauj piekļūt tīmekļa lapas saturam un mainīt to. Ja ir nepieciešams piekļūt kādam HTML lapas elementam, mēs vienmēr sākam ar piekļuvi “dokumenta” objektam. Dokumenta objekts ir loga objekta īpašums.
• Veidlapas objekts: To pārstāv formā tagus.
• Saites objekts : To pārstāv saite tagus.
• Enkura objekts : To pārstāv a href tagus.
• Veidlapas vadības elementi: Veidlapā var būt daudz vadības elementu, piemēram, teksta lauki, pogas, radio pogas, izvēles rūtiņas utt.

Dokumentu objekta metodes

DOM nodrošina dažādas metodes, kas ļauj lietotājiem mijiedarboties ar dokumentu un manipulēt ar to. Dažas biežāk izmantotās DOM metodes ir:

Piemērs: Šajā piemērā mēs izmantojam HTML elementa ID, lai atrastu DOM HTML elementu.