Un objecte Document representa el fitxer document que es mostra en aquesta finestra. L'objecte Document té diverses propietats que fan referència a altres objectes que permeten l'accés i la modificació del contingut del document. En aquest article, entendrem DOM HTML.
- Concepte HTML DOM
- Què és el DOM HTML
- Què NO és el DOM HTML?
- D’on va venir el DOM
- Propietats de HTML DOM
- Cercar elements HTML
Concepte HTML DOM
La forma d’accedir i modificar un contingut documentat s’anomena Model d'objectes de documents o DOM. Els objectes s’organitzen en una jerarquia. Aquesta estructura jeràrquica s'aplica a l'organització d'objectes en un document web.
- Objecte de finestra i menys Part superior de la jerarquia. És l'element màxim de la jerarquia d'objectes.
- Objecte de document i menys Cada document HTML que es carrega a una finestra es converteix en un objecte de document. El document conté el contingut de la pàgina.
- Objecte de formulari i menys Tot el que inclou les etiquetes ... estableix l'objecte de formulari.
- Elements de control del formulari i menys L'objecte del formulari conté tots els elements definits per a aquest objecte, com ara camps de text, botons, botons d'opció i caselles de selecció.
Què és el DOM HTML
El model d’objectes de documents és una API de programació de documents. El model objecte en si s’assembla molt a l’estructura dels documents que modela. Per exemple, tingueu en compte aquesta taula, extreta d’un document HTML:
| Shady Grove | Eòlica |
| Sobre el riu, Charlie | Dorian |
Què NO és el DOM HTML?
Aquesta secció està dissenyada per donar una comprensió més precisa del model d’objectes de document, distingint-lo d’altres sistemes que poden semblar-ho.
Tot i que el model d’objectes de documents va estar fortament influït per HTML dinàmic, al nivell 1, no implementa tot l’HTML dinàmic. En particular, els esdeveniments encara no s’han definit. El nivell 1 està dissenyat per establir una base ferma per a aquest tipus de funcionalitat proporcionant un model flexible i robust del document.
El model d’objectes de document no és una especificació binària. Els programes Document Object Model escrits en el mateix llenguatge seran compatibles amb el codi font de totes les plataformes, però el Document Object Model no defineix cap forma d’interoperabilitat binària.
El model d’objectes de documents no és una manera de mantenir objectes a XML o HTML. En lloc d’especificar com es poden representar els objectes en XML, el Model d’objectes de document especifica com es representen els documents XML i HTML com a objectes, de manera que es puguin utilitzar en programes orientats a objectes.
El model d’objectes de documents no és un conjunt d’estructures de dades, és un model d’objectes que especifica interfícies. Tot i que aquest document conté diagrames que mostren relacions pares / fills, es tracta de relacions lògiques definides per les interfícies de programació, no representacions de cap estructura interna de dades.
El model d'objectes de document no defineix 'la veritable semàntica interna' de XML o HTML. La semàntica d’aquestes llengües està definida per les pròpies llengües.
El model d’objectes de documents és un model de programació dissenyat per respectar aquesta semàntica. El model d’objectes de document no té cap ramificació per a la forma d’escriure documents XML i HTML, qualsevol document que es pugui escriure en aquests idiomes es pot representar al model d’objectes de document.
El model d’objectes de documents, malgrat el seu nom, no és un competidor del model d’objectes de components (COM). COM, com CORBA, és una forma independent del llenguatge per especificar interfícies i objectes. El model d’objectes de document és un conjunt d’interfícies i objectes dissenyats per gestionar documents HTML i XML. El DOM pot serimplementat mitjançant sistemes independents del llenguatge com COM o CORBA, també es pot implementar utilitzant enllaços específics del llenguatge com els enllaços Java o ECMAScript especificats en aquest document.
D’on va sorgir el model d’objectes de documents
El model d’objectes de documents es va originar com una especificació per permetre que els scripts JavaScript i els programes Java fossin portables entre els navegadors web. L’HTML dinàmic era l’avantpassat immediat del Model d’Objectes de Document i originalment es pensava en gran part en termes de navegadors.
No obstant això, quan es va formar el grup de treball sobre el model d'objectes de documents, també es van unir proveïdors d'altres dominis, inclosos editors HTML o XML i dipòsits de documents. Diversos d'aquests proveïdors havien treballat amb SGML abans que XML es desenvolupés com a resultat, el Model d'objectes del document ha estat influït per SGML Groves i l'estàndard HyTime. Alguns d'aquests proveïdors també havien desenvolupat els seus propis models d'objectes per a documents amb l'objectiu de proporcionar-losAPI de programació per a editors o repositoris de documents SGML / XML, i aquests models d'objectes també han influït en el Model d'objectes de documents.
Propietats de HTML DOM
Vegem les propietats dels objectes del document als quals l’objecte document pot accedir i modificar-los.
- Objecte de la finestra: L’objecte Window sempre es troba a la part superior de la jerarquia.
- Objecte del document: Quan un document HTML es carrega a una finestra, es converteix en un objecte de document.
- Objecte del formulari: Està representat per forma etiquetes.
- Enllaç d'objectes: Està representat per enllaç etiquetes.
- Objectes d’ancoratge: Està representat per una href etiquetes.
- Elements de control de formulari: El formulari pot tenir molts elements de control com ara camps de text, botons, botons d’opció i caselles de selecció, etc.
Mètodes de l'objecte del document :
- escriure ('cadena'): escriu la cadena donada al document.
- getElementById (): retorna l'element que té el valor d'identificació donat.
- getElementsByName (): retorna tots els elements amb el valor del nom donat.
- getElementsByTagName (): retorna tots els elements amb el nom de l'etiqueta indicat.
- getElementsByClassName (): retorna tots els elements amb el nom de classe donat.
Cercar elements HTML
Quan vulgueu accedir a elements HTML amb JavaScript, primer heu de trobar-los.
Hi ha un parell de maneres de fer-ho:
- Cercar elements HTML per identificador
- Cerca d’elements HTML per nom d’etiqueta
- Cercar elements HTML per nom de classe
Cercar element HTML per identificador
La manera més senzilla de trobar un element HTML al DOM és mitjançant l’identificador de l’element.
com utilitzar un iterador a Java
Exemple
Cercar elements HTML per nom d’etiqueta
Aquest exemple troba l'element amb id = 'principal' i, a continuació, troba tot
elements dins de 'main':
Amb això, arribem al final d’aquest article HTML DOM. Espero que tingueu una comprensió dels diversos aspectes del DOM HTML, el model d’objectes de document.
Consulteu el nostre que inclou formació en viu dirigida per un instructor i experiència en projectes reals. Aquesta formació us permet dominar les habilitats necessàries per treballar amb tecnologies web front-end i front-end. Inclou formació sobre desenvolupament web, jQuery, Angular, NodeJS, ExpressJS i MongoDB.
Tens alguna pregunta? Esmenteu-lo a la secció de comentaris del bloc 'Imatges HTML' i us respondrem.