HTML DOM (Model d'objectes de document) és una representació jeràrquica de documents HTML. Defineix l'estructura i les propietats dels elements d'una pàgina web, permetent a JavaScript accedir, manipular i actualitzar el contingut de manera dinàmica, millorant la interactivitat i la funcionalitat.

Nota : S'anomena estructura lògica perquè DOM no especifica cap relació entre objectes.

Taula de contingut

• Per què es requereix DOM?
• Estructura del DOM
• Propietats de DOM
• Mètodes del model d'objectes de documents
• Què no és DOM?
• Nivells de DOM:

Què és DOM?

DOM , o Model d'objectes de document , és una interfície de programació que representa documents estructurats com HTML i XML com un arbre d'objectes. Defineix com accedir, manipular i modificar elements del document mitjançant llenguatges de script com JavaScript.

Així, bàsicament, el model d'objectes de document és un API que representa i interactua amb documents HTML o XML.

El DOM és un W3C (Consorci World Wide Web) estàndard i defineix un estàndard per accedir als documents.

L'estàndard W3C Dom es divideix en tres parts diferents:

• Nucli DOM – Model estàndard per a tots els tipus de documents
• XML DOM – Model estàndard per a documents XML
• HTML DOM – Model estàndard per a documents HTML

HTML DOM

HTML DOM és un estàndard model d'objectes i interfície de programació per Documents HTML. HTML DOM és una manera de representar la pàgina web en a manera jeràrquica estructurada de manera que serà més fàcil per als programadors i usuaris desplaçar-se pel document.

Amb HTML DOM, podem accedir i manipular fàcilment etiquetes, identificadors, classes, atributs o elements d'HTML mitjançant ordres o mètodes proporcionats per l'objecte del document.

Mitjançant DOM JavaScript tenim accés a HTML i CSS de la pàgina web i també podem modificar el comportament dels elements HTML.

Per què es requereix DOM?

HTML s'acostuma a fer estructura les pàgines web i Javascript s'utilitza per afegir comportament a les nostres pàgines web. Quan es carrega un fitxer HTML al navegador, JavaScript no pot entendre el document HTML directament. Per tant, interpreta i interactua amb el Document Object Model (DOM), que és creat pel navegador basat en el document HTML.

data d'utilitat java

DOM és bàsicament la representació del mateix document HTML però en una estructura en forma d'arbre composta per objectes. JavaScript no pot entendre les etiquetes () al document HTML, però pot entendre l'objecte h1 al DOM.

JavaScript interpreta DOM fàcilment, utilitzant-lo com a pont per accedir i manipular els elements. DOM Javascript permet l'accés a cadascun dels objectes (h1, p, etc.) mitjançant diferents funcions.

El Document Object Model (DOM) és essencial en el desenvolupament web per diverses raons:

• Pàgines web dinàmiques: Permet crear pàgines web dinàmiques. Permet que JavaScript accedeixi i manipuli el contingut, l'estructura i l'estil de la pàgina de manera dinàmica, cosa que ofereix experiències web interactives i sensibles, com ara actualitzar el contingut sense tornar a carregar tota la pàgina o respondre a les accions de l'usuari a l'instant.
• Interactivitat: Amb el DOM, podeu respondre a les accions de l'usuari (com ara clics, entrades o desplaçaments) i modificar la pàgina web en conseqüència.
• Actualitzacions de contingut: Quan voleu actualitzar el contingut sense actualitzar tota la pàgina, el DOM permet canvis específics que fan que les aplicacions web siguin més eficients i fàcils d'utilitzar.
• Compatibilitat entre navegadors: Diferents navegadors poden representar HTML i CSS de diferents maneres. El DOM proporciona una manera estandarditzada d'interactuar amb els elements de la pàgina.
• Aplicacions d'una sola pàgina (SPA): Les aplicacions creades amb marcs com React o Angular depenen en gran mesura del DOM per a la representació i l'actualització eficients del contingut dins d'una única pàgina HTML sense tornar a carregar la pàgina completa.

Estructura del DOM

DOM es pot pensar com un arbre o bosc (més d'un arbre). El terme model d'estructura De vegades s'utilitza per descriure la representació en forma d'arbre d'un document.

Cada branca de l'arbre acaba en un node, i cada node conté objectes. Es poden afegir oients d'esdeveniments als nodes i activar-se quan es produeixi un esdeveniment determinat. Una propietat important dels models d'estructura DOM és isomorfisme estructural : si s'utilitzen dues implementacions DOM per crear una representació del mateix document, crearan el mateix model d'estructura, amb precisament els mateixos objectes i relacions.

Per què DOM s'anomena model d'objectes?

Els documents es modelen mitjançant objectes, i el model inclou no només l'estructura d'un document sinó també el comportament d'un document i els objectes dels quals està compost com a elements d'etiquetes amb atributs en HTML.

Propietats de DOM

Vegem les propietats de l'objecte document a les quals es pot accedir i modificar-lo.

Representació del DOM

fitxers linux

• Objecte finestra : L'objecte finestra és l'objecte del navegador que sempre es troba a la part superior de la jerarquia. És com una API que s'utilitza per configurar i accedir a totes les propietats i mètodes del navegador. El navegador la crea automàticament.
• Objecte del document: Quan un document HTML es carrega a una finestra, es converteix en un objecte de document. L'objecte 'document' té diverses propietats que fan referència a altres objectes que permeten l'accés i la modificació del contingut de la pàgina web. Si cal accedir a qualsevol element d'una pàgina HTML, sempre comencem per accedir a l'objecte 'document'. L'objecte document és propietat de l'objecte finestra.
• Objecte del formulari: Està representat per forma etiquetes.
• Objecte d'enllaç : Està representat per enllaç etiquetes.
• Objecte d'àncora : Està representat per a href etiquetes.
• Elements de control del formulari: El formulari pot tenir molts elements de control com camps de text, botons, botons d'opció, caselles de verificació, etc.

Mètodes d'objecte de document

DOM proporciona diversos mètodes que permeten als usuaris interactuar i manipular el document. Alguns mètodes DOM utilitzats habitualment són:

Exemple: En aquest exemple, utilitzem l'identificador de l'element HTML per trobar l'element HTML DOM.

    
techcodeview.comh2>
Un portal d'informàtica per a frikis. p>
Aquest exemple il·lustra el getElementByIdb> mètode. p>
p>