HTML DOM: Cum se folosește modelul de obiect document



Acest articol vă va oferi o cunoaștere detaliată și cuprinzătoare a HTML DOM, Document Object Model cu exemple.

Un obiect Document reprezintă document care este afișat în fereastra respectivă. Obiectul Document are diferite proprietăți care se referă la alte obiecte care permit accesul și modificarea conținutului documentului. În acest articol, vom înțelege HTML DOM.

Conceptul HTML DOM

Modul în care un conținut documentat este accesat și modificat se numește Model de obiect document , sau DOM. Obiectele sunt organizate într-o ierarhie. Această structură ierarhică se aplică organizării obiectelor dintr-un document web.





  • Obiectul ferestrei și minus Partea de sus a ierarhiei. Este cel mai mare element al ierarhiei obiectelor.
  • Obiect document și minus Fiecare document HTML care se încarcă într-o fereastră devine obiect document. Documentul conține conținutul paginii.
  • Obiect formular și minus Tot ceea ce este inclus în etichetele ... setează obiectul formular.
  • Elemente de control formular și minus Obiectul formular conține toate elementele definite pentru acel obiect, cum ar fi câmpuri de text, butoane, butoane radio și casete de selectare.

Ce este DOM HTML

Modelul de obiecte document este un API de programare pentru documente. Modelul obiect în sine seamănă foarte mult cu structura documentelor pe care le modelează. De exemplu, luați în considerare acest tabel, preluat dintr-un document HTML:

 
Shady Grove eolian
Peste râu, Charlie Dorian

Ce nu este DOM-ul HTML

Această secțiune este concepută pentru a oferi o înțelegere mai precisă a modelului de obiect document, distingându-l de alte sisteme care pot părea să fie asemenea acestuia.



Deși Modelul de obiecte de document a fost puternic influențat de HTML dinamic, la nivelul 1, acesta nu implementează întregul HTML dinamic. În special, evenimentele nu au fost încă definite. Nivelul 1 este conceput pentru a pune bazele ferme pentru acest tip de funcționalitate, oferind un model robust și flexibil al documentului în sine.

Modelul de obiect document nu este o specificație binară. Programele Document Object Model scrise în aceeași limbă vor fi compatibile cu codul sursă pe platforme, dar Modelul Document Object Model nu definește nicio formă de interoperabilitate binară.

Modelul de obiecte document nu este o modalitate de a persista obiecte în XML sau HTML. În loc de a specifica modul în care obiectele pot fi reprezentate în XML, Modelul de obiect document specifică modul în care documentele XML și HTML sunt reprezentate ca obiecte, astfel încât să poată fi utilizate în programe orientate obiect.



HTML DOM NU este

Modelul de obiecte document nu este un set de structuri de date, este un model de obiect care specifică interfețe. Deși acest document conține diagrame care arată relațiile părinte / copil, acestea sunt relații logice definite de interfețele de programare, nu reprezentări ale unor structuri de date interne specifice.

Modelul de obiecte document nu definește „adevărata semantică interioară” a XML sau HTML. Semantica acestor limbi este definită de limbile în sine.

Modelul de obiecte document este un model de programare conceput pentru a respecta această semantică. Modelul de obiecte document nu are nicio ramificație pentru modul în care scrieți documente XML și HTML, orice document care poate fi scris în aceste limbi poate fi reprezentat în modelul de obiect document.

Modelul obiectului documentului, în ciuda numelui său, nu este un concurent la Modelul obiectelor componente (COM). COM, la fel ca CORBA, este un mod independent de limbaj pentru a specifica interfețe și obiecte, Document Object Model este un set de interfețe și obiecte concepute pentru gestionarea documentelor HTML și XML. DOM poate fiimplementat utilizând sisteme independente de limbaj, cum ar fi COM sau CORBA, poate fi implementat și utilizând legări specifice limbajului, cum ar fi legările Java sau ECMAScript specificate în acest document.

De unde a venit modelul de obiect document

Modelul de obiecte document a apărut ca o specificație pentru a permite scripturilor JavaScript și programelor Java să fie portabile printre browserele web. HTML-ul dinamic a fost strămoșul imediat al Modelului de obiecte de document și a fost inițial gândit în mare măsură în ceea ce privește browserele.

Cu toate acestea, când s-a format Grupul de lucru pentru modelul de obiecte document, i s-au alăturat și furnizori din alte domenii, inclusiv editori HTML sau XML și depozite de documente. Mulți dintre acești vânzători au lucrat cu SGML înainte ca XML să fie dezvoltat ca urmare, Modelul obiectului documentului a fost influențat de SGML Groves și de standardul HyTime. Unii dintre acești furnizori și-au dezvoltat, de asemenea, propriile modele de obiecte pentru documente, pentru a le furnizaAPI-uri de programare pentru editori SGML / XML sau depozite de documente, iar aceste modele de obiecte au influențat și Modelul de obiecte ale documentelor.

Proprietățile HTML DOM

Să vedem proprietățile obiectelor document care pot fi accesate și modificate de obiectul document.

DOM-Graph
  1. Obiect fereastră: Window Object este întotdeauna în partea de sus a ierarhiei.
  2. Obiectul documentului: Când un document HTML este încărcat într-o fereastră, acesta devine un obiect document.
  3. Obiectul formularului: Este reprezentat de formă Etichete.
  4. Obiecte de legătură: Este reprezentat de legătură Etichete.
  5. Obiecte de ancorare: Este reprezentat de un href Etichete.
  6. Elemente de control al formularului: Formularul poate avea multe elemente de control, cum ar fi câmpuri de text, butoane, butoane radio și casete de selectare etc.

Metode a obiectului document :

  1. scrie („șir”): scrie șirul dat pe document.
  2. getElementById (): returnează elementul având valoarea de identificare dată.
  3. getElementsByName (): returnează toate elementele cu valoarea numelui dat.
  4. getElementsByTagName (): returnează toate elementele cu numele etichetei date.
  5. getElementsByClassName (): returnează toate elementele cu numele clasei date.

Găsirea elementelor HTML

Când doriți să accesați elemente HTML cu JavaScript, trebuie să le găsiți mai întâi.

Există câteva modalități de a face acest lucru:

  • Găsirea elementelor HTML după id
  • Găsirea elementelor HTML după numele etichetei
  • Găsirea elementelor HTML după numele clasei

Găsirea elementului HTML după cod

Cel mai simplu mod de a găsi un element HTML în DOM este prin utilizarea elementului id.

tipuri de date în MySQL cu exemple

Exemplu

Găsirea elementelor HTML după numele etichetei

Acest exemplu găsește elementul cu id = ”principal” și apoi găsește toate

elemente din interiorul „principal”:

Cu aceasta, ajungem la sfârșitul acestui articol HTML DOM. Sper că ați înțeles diferitele aspecte ale DOM-ului HTML, modelul de obiect document.

Verificați-ne care vine cu instruire live condusă de instructor și experiență de proiect din viața reală. Acest training vă face să aveți abilități în a lucra cu tehnologii web back-end și front-end. Acesta include instruire în domeniul dezvoltării web, jQuery, Angular, NodeJS, ExpressJS și MongoDB.

Ai o întrebare pentru noi? Vă rugăm să o menționați în secțiunea de comentarii a blogului „Imagini HTML” și vă vom răspunde.