HTML DOM: Paano gamitin ang Modelong Bagay ng Dokumento

Ang isang object ng Dokumento ay kumakatawan sa dokumento na ipinapakita sa window na iyon. Ang object ng Dokumento ay may iba't ibang mga katangian na tumutukoy sa iba pang mga bagay na nagpapahintulot sa pag-access sa at pagbabago ng nilalaman ng dokumento. Sa artikulong ito, mauunawaan namin ang HTML DOM.

• Konsepto ng HTML DOM
• Ano ang HTML DOM
• Ano ang HINDI ang HTML DOM
• Saan nagmula ang DOM
• Mga Katangian ng HTML DOM
• Paghanap ng Mga Elemento ng HTML

Konsepto ng HTML DOM

Ang paraan ng pag-access sa isang dokumentadong nilalaman at binago ay tinatawag na Modelong Bagay ng Dokumento , o DOM. Ang Mga Bagay ay nakaayos sa isang hierarchy. Nalalapat ang hierarchical na istrakturang ito sa samahan ng mga bagay sa isang dokumento sa Web.

• Window object at minus Nangunguna sa hierarchy. Ito ang pinakamataas na elemento ng hierarchy ng bagay.
• Dokumentong object at minus Ang bawat dokumento ng HTML na na-load sa isang window ay nagiging isang object ng dokumento. Naglalaman ang dokumento ng mga nilalaman ng pahina.
• Bumuo ng object at minus Lahat ng nakapaloob sa ... mga tag ay nagtatakda ng form object.
• Mga elemento ng control form at minus Ang form object ay naglalaman ng lahat ng mga elementong tinukoy para sa object na iyon tulad ng mga field ng teksto, mga pindutan, mga radio button, at mga checkbox.

Ano ang HTML DOM

Ang Modelong Bagay ng Dokumento ay isang programa ng API para sa mga dokumento. Ang modelo ng bagay mismo ay malapit na kahawig ng istraktura ng mga dokumentong inilalagay nito. Halimbawa, isaalang-alang ang talahanayan na ito, na kinuha mula sa isang dokumentong HTML:

 
 
 
Shady Grove
 
Aeolian
 
 
 
Sa Ilog, Charlie
 
Si Dorian
 
    

Ano ang HINDI ang HTML DOM

Ang seksyon na ito ay dinisenyo upang magbigay ng isang mas tumpak na pag-unawa sa Modelong Bagay ng Dokumento sa pamamagitan ng pagkilala sa ito mula sa iba pang mga system na maaaring mukhang katulad nito.

Bagaman ang Modelong Bagay ng Dokumento ay malakas na naiimpluwensyahan ng Dynamic HTML, sa Antas 1, hindi nito ipinapatupad ang lahat ng Dynamic HTML. Sa partikular, ang mga kaganapan ay hindi pa natukoy. Ang Antas 1 ay idinisenyo upang maglatag ng isang matatag na pundasyon para sa ganitong uri ng pag-andar sa pamamagitan ng pagbibigay ng isang matatag, nababaluktot na modelo ng dokumento mismo.

Ang Modelong Bagay ng Dokumento ay hindi isang pagtutukoy ng binary. Ang mga programa ng Modelong Bagay ng Dokumento na nakasulat sa parehong wika ay magiging source code na katugma sa mga platform, ngunit ang Modelong Bagay ng Dokumento ay hindi tumutukoy sa anumang anyo ng binary interoperability.

Ang Modelong Bagay ng Dokumento ay hindi isang paraan ng pagpapatuloy ng mga bagay sa XML o HTML. Sa halip na tukuyin kung paano maaaring kinatawan ang mga bagay sa XML, tinutukoy ng Modelong Bagay ng Dokumento kung paano kinakatawan ang mga dokumento ng XML at HTML bilang mga bagay, upang maaari silang magamit sa mga program na nakatuon sa object.

Ang Modelong Bagay ng Dokumento ay hindi isang hanay ng mga istruktura ng data, ito ay isang modelo ng bagay na tumutukoy sa mga interface. Bagaman naglalaman ang dokumentong ito ng mga diagram na nagpapakita ng mga ugnayan ng magulang / anak, ang mga ito ay lohikal na ugnayan na tinukoy ng mga interface ng programa, hindi mga representasyon ng anumang partikular na panloob na istruktura ng data.

Ang Modelong Bagay ng Dokumento ay hindi tumutukoy sa 'totoong panloob na semantika' ng XML o HTML. Ang mga semantiko ng mga wikang iyon ay tinukoy ng mga wika mismo.

Ang Modelong Bagay ng Dokumento ay isang modelo ng programa na idinisenyo upang igalang ang mga semantiko na ito. Ang Modelong Bagay ng Dokumento ay walang anumang mga ramification para sa paraan ng iyong pagsusulat ng mga dokumento ng XML at HTML ng anumang dokumento na maaaring nakasulat sa mga wikang ito na maaaring kinatawan sa Modelong Bagay ng Dokumento.

ano ang mga halimbawa ng variable sa java

Ang Modelong Bagay ng Dokumento, sa kabila ng pangalan nito, ay hindi kakumpitensya sa Modelong Bagay ng Bagay (COM). Ang COM, tulad ng CORBA, ay isang independiyenteng paraan ng wika upang tukuyin ang mga interface at bagay na ang Modelong Bagay ng Dokumento ay isang hanay ng mga interface at bagay na idinisenyo para sa pamamahala ng mga dokumento ng HTML at XML. Ang DOM ay maaaringipinatupad gamit ang mga system na independyente sa wika tulad ng COM o CORBA maaari rin itong ipatupad gamit ang mga bindings na tukoy sa wika tulad ng Java o ECMAScript bindings na tinukoy sa dokumentong ito.

Saan nagmula ang Modelong Bagay ng Dokumento

Ang Modelo ng Bagay ng Dokumento ay nagmula bilang isang pagtutukoy upang payagan ang mga script ng JavaScript at mga programa ng Java na maging portable sa mga web browser. Ang Dynamic HTML ay ang agarang ninuno ng Modelong Bagay ng Dokumento, at orihinal na naisip ng higit sa lahat sa mga tuntunin ng mga browser.

Gayunpaman, nang nabuo ang Grupo ng Paggawa ng Modelong Bagay ng Dokumento, sumali din ito sa mga vendor sa iba pang mga domain, kabilang ang mga editor ng HTML o XML at mga repository ng dokumento. Marami sa mga vendor na ito ay nagtrabaho kasama ang SGML bago ang XML ay binuo bilang isang resulta, ang Modelong Bagay ng Dokumento ay naiimpluwensyahan ng SGML Groves at ang pamantayan ng HyTime. Ang ilan sa mga vendor ay nakabuo din ng kanilang sariling mga modelo ng object para sa mga dokumento upang maibigaymga programa ng API para sa mga editor ng SGML / XML o mga repository ng dokumento, at ang mga modelo ng bagay na ito ay naka-impluwensya rin sa Modelong Bagay ng Dokumento.

kung paano ipatupad ang naka-link na listahan sa c

Mga Katangian ng HTML DOM

Tingnan natin ang mga katangian ng mga object ng dokumento na maaaring ma-access at mabago ng object ng dokumento.

1. Bagay sa Window: Ang Window Object ay palaging nasa tuktok ng hierarchy.
2. Bagay sa dokumento: Kapag ang isang dokumento ng HTML ay na-load sa isang window, ito ay magiging isang object ng dokumento.
3. Form Object: Kinakatawan ito ng form mga tag
4. Mga Link ng Link: Kinakatawan ito ng link mga tag
5. Mga Anchor na Bagay: Kinakatawan ito ng isang href mga tag
6. Mga Elemento ng Pagkontrol sa Form: Ang form ay maaaring magkaroon ng maraming mga elemento ng pagkontrol tulad ng mga patlang ng teksto, mga pindutan, mga pindutan ng radyo, at mga checkbox, atbp.

Paraan ng Bagay ng Dokumento :

1. isulat ('string'): nagsusulat ng ibinigay na string sa dokumento.
2. getElementById (): ibabalik ang elemento ng pagkakaroon ng ibinigay na halagang id.
3. getE ElementByName (): ibabalik ang lahat ng mga elemento na mayroong ibinigay na halaga ng pangalan.
4. getE ElementByTagName (): ibabalik ang lahat ng mga elemento na mayroong ibinigay na pangalan ng tag.
5. getE ElementByClassName (): ibabalik ang lahat ng mga elemento na mayroong ibinigay na pangalan ng klase.

Paghanap ng Mga Elemento ng HTML

Kung nais mong i-access ang mga elemento ng HTML sa JavaScript, kailangan mo munang makita ang mga elemento.

Mayroong ilang mga paraan upang magawa ito:

• Paghanap ng mga elemento ng HTML ayon sa id
• Paghanap ng mga elemento ng HTML ayon sa pangalan ng tag
• Paghanap ng mga elemento ng HTML ayon sa pangalan ng klase

Paghanap ng Elementong HTML ng Id

Ang pinakamadaling paraan upang makahanap ng isang elemento ng HTML sa DOM, ay sa pamamagitan ng paggamit ng element id.

Halimbawa

Paghanap ng Mga Elemento ng HTML ayon sa Pangalan ng Tag

Ang halimbawang ito ay nahahanap ang elemento na may id = 'pangunahing', at pagkatapos ay nahahanap ang lahat

mga elemento sa loob ng 'pangunahing':

Sa pamamagitan nito, natapos namin ang artikulong ito ng HTML DOM. Inaasahan kong nakakuha ka ng pag-unawa sa iba't ibang mga aspeto ng HTML DOM, ang Modelong Bagay ng Dokumento.

Suriin ang aming na kasama ng live na pagsasanay na pinamunuan ng magtuturo at karanasan sa proyekto sa totoong buhay. Ang pagsasanay na ito ay gumagawa sa iyo ng kasanayan sa mga kasanayan upang gumana sa back-end at front-end na mga teknolohiya sa web. Kabilang dito ang pagsasanay sa Pag-unlad sa Web, jQuery, Angular, NodeJS, ExpressJS, at MongoDB.

May tanong ba sa amin? Mangyaring banggitin ito sa seksyon ng mga komento ng blog na 'Mga Larawan ng HTML' at babalikan ka namin.