HTML DOM: kā izmantot dokumenta objekta modeli



Šis raksts sniegs jums detalizētas un visaptverošas zināšanas par HTML DOM, dokumenta objekta modeli ar piemēriem.

Dokumenta objekts attēlo dokumentu, kas tiek parādīts šajā logā. Dokumenta objektam ir dažādas īpašības, kas attiecas uz citiem objektiem, kas ļauj piekļūt dokumenta saturam un modificēt to. Šajā rakstā mēs sapratīsim HTML DOM.

HTML DOM koncepcija

Veidu, kā piekļūt dokumentētajam saturam un modificēt, sauc par Dokumenta objekta modelis vai DOM. Objekti ir sakārtoti hierarhijā. Šī hierarhiskā struktūra attiecas uz objektu organizēšanu tīmekļa dokumentā.





  • Loga objekts un mīnus hierarhijas augšdaļa. Tas ir visaugstākais objektu hierarhijas elements.
  • Dokumenta objekts un mīnus Katrs HTML dokuments, kas tiek ielādēts logā, kļūst par dokumenta objektu. Dokuments satur lapas saturu.
  • Veidlapas objekts un mīnus Viss, kas ietverts tagos…, nosaka formas objektu.
  • Veidlapas vadības elementi un mīnus Veidlapas objektā ir visi šim objektam noteiktie elementi, piemēram, teksta lauki, pogas, radiopogas un izvēles rūtiņas.

Kas ir HTML DOM

Dokumenta objekta modelis ir programmēšanas API dokumentiem. Pats objekta modelis ļoti līdzinās tā modelēto dokumentu struktūrai. Piemēram, ņemiet vērā šo tabulu, kas ņemta no HTML dokumenta:

 
Ēnu birzs Eolijs
Pār upi, Čārlijs Dorians

Kas HTML DOM NAV

Šī sadaļa ir paredzēta, lai precīzāk izprastu dokumenta objekta modeli, atšķirot to no citām sistēmām, kas varētu šķist līdzīgas.



Lai gan dokumenta objekta modeli spēcīgi ietekmēja dinamiskā HTML, 1. līmenī tas neievieš visu dinamisko HTML. Jo īpaši notikumi vēl nav definēti. 1. līmenis ir paredzēts, lai liktu stingru pamatu šāda veida funkcionalitātei, nodrošinot stabilu, elastīgu paša dokumenta modeli.

Dokumenta objekta modelis nav binārā specifikācija. Dokumenta objekta modeļa programmas, kas rakstītas tajā pašā valodā, būs pirmkodu saderīgas visās platformās, taču dokumenta objekta modelis nenosaka nekādu binārā savietojamības veidu.

Dokumenta objekta modelis nav veids, kā saglabāt objektus XML vai HTML formātā. Tā vietā, lai norādītu, kā objektus var attēlot XML, dokumenta objekta modelis norāda, kā XML un HTML dokumenti tiek attēloti kā objekti, lai tos varētu izmantot objektorientētās programmās.



HTML DOM NAV

Dokumenta objekta modelis nav datu struktūru kopums, tas ir objektu modelis, kas norāda saskarnes. Lai gan šajā dokumentā ir diagrammas, kas parāda vecāku / bērnu attiecības, tās ir loģiskas attiecības, kuras nosaka programmēšanas saskarnes, nevis konkrētu iekšējo datu struktūru attēlojums.

Dokumenta objekta modelis nenosaka XML vai HTML “patieso iekšējo semantiku”. Šo valodu semantiku nosaka pašas valodas.

Dokumenta objekta modelis ir programmēšanas modelis, kas izstrādāts, lai ievērotu šo semantiku. Dokumenta objekta modelim nav nekādu seku attiecībā uz veidu, kā rakstāt XML un HTML dokumentus, jebkuru dokumentu, ko var rakstīt šajās valodās, var attēlot dokumenta objekta modelī.

kā noteikt java ceļu

Dokumenta objekta modelis, neskatoties uz tā nosaukumu, nav Component Object Model (COM) konkurents. COM, tāpat kā CORBA, ir no valodas neatkarīgs veids, kā norādīt saskarnes un objektus. Dokumenta objekta modelis ir saskarņu un objektu kopums, kas paredzēts HTML un XML dokumentu pārvaldībai. DOM var būttiek ieviesta, izmantojot no valodas neatkarīgas sistēmas, piemēram, COM vai CORBA, to var arī ieviest, izmantojot valodai specifiskas saites, piemēram, Java vai ECMAScript sasaistes, kas norādītas šajā dokumentā.

No kurienes nāca dokumenta objekta modelis

Dokumenta objekta modelis radās kā specifikācija, kas ļāva JavaScript skriptus un Java programmas pārnēsāt tīmekļa pārlūkprogrammās. Dinamiskais HTML bija dokumenta objekta modeļa tiešais priekštecis, un sākotnēji par to domāja galvenokārt pārlūkprogrammu ziņā.

Tomēr, kad tika izveidota dokumentu objekta modeļa darba grupa, tai pievienojās arī citu domēnu piegādātāji, tostarp HTML vai XML redaktori un dokumentu krātuves. Vairāki no šiem piegādātājiem bija strādājuši ar SGML, pirms tika izveidota XML. Dokumenta objekta modeli ietekmēja SGML Groves un HyTime standarts. Daži no šiem pārdevējiem arī bija izstrādājuši savus dokumentu objektu modeļus, lai tos nodrošinātuprogrammēšanas API SGML / XML redaktoriem vai dokumentu krātuvēm, un šie objektu modeļi ir ietekmējuši arī dokumenta objekta modeli.

HTML DOM īpašības

Apskatīsim to dokumentu objektu īpašības, kuriem dokumenta objekts var piekļūt un tos var mainīt.

DOM-Graph
  1. Loga objekts: Logu objekts vienmēr atrodas hierarhijas augšdaļā.
  2. Dokumenta objekts: Kad HTML dokuments tiek ielādēts logā, tas kļūst par dokumenta objektu.
  3. Veidlapas objekts: To pārstāv formā tagus.
  4. Saites objekti: To pārstāv saite tagus.
  5. Enkura objekti: To pārstāv href tagus.
  6. Veidlapas vadības elementi: Veidlapā var būt daudz vadības elementu, piemēram, teksta lauki, pogas, radiopogas un izvēles rūtiņas utt.

Metodes dokumenta objekta :

  1. rakstīt (“virkne”): raksta doto virkni dokumentā.
  2. getElementById (): atgriež elementu ar norādīto id vērtību.
  3. getElementsByName (): atgriež visus elementus ar norādīto nosaukuma vērtību.
  4. getElementsByTagName (): atgriež visus elementus, kuriem ir dots taga nosaukums.
  5. getElementsByClassName (): atgriež visus elementus, kuriem ir dots klases nosaukums.

HTML elementu atrašana

Ja vēlaties piekļūt HTML elementiem ar JavaScript, vispirms tie jāatrod.

skaidra tipa liešana java

Ir vairāki veidi, kā to izdarīt:

  • HTML elementu atrašana pēc ID
  • HTML elementu atrašana pēc taga nosaukuma
  • HTML elementu atrašana pēc klases nosaukuma

HTML elementa atrašana pēc ID

Vieglākais veids, kā atrast DOM HTML elementu, ir elementa ID izmantošana.

Piemērs

HTML elementu atrašana pēc taga nosaukuma

Šis piemērs atrod elementu ar id = ”main” un pēc tam atrod visu

elementi “main” iekšpusē:

Ar to mēs esam nonākuši pie šī HTML DOM raksta beigām. Es ceru, ka jūs uzzinājāt dažādus HTML DOM aspektus, dokumentu objekta modeli.

Pārbaudiet mūsu kas nāk ar instruktoru vadītu tiešraides apmācību un reālās dzīves projektu pieredzi. Šīs apmācības ļauj jums prasmīgi strādāt ar aizmugurējām un priekšējām tīmekļa tehnoloģijām. Tas ietver apmācību par Web izstrādi, jQuery, Angular, NodeJS, ExpressJS un MongoDB.

Vai mums ir jautājums? Lūdzu, pieminējiet to emuāra “HTML attēli” komentāru sadaļā, un mēs ar jums sazināsimies.