HTML DOM (modelo de objetos de documento) es una representación jerárquica de documentos HTML. Define la estructura y las propiedades de los elementos de una página web, lo que permite que JavaScript acceda, manipule y actualice dinámicamente el contenido, mejorando la interactividad y la funcionalidad.
Nota : Se llama estructura lógica porque DOM no especifica ninguna relación entre objetos.
Tabla de contenidos
- ¿Por qué se requiere DOM?
- Estructura del DOM
- Propiedades del DOM
- Métodos del modelo de objetos de documento
- ¿Qué DOM no es?
- Niveles de DOM:
¿Qué es DOM?
DOMINGO , o Modelo de objetos de documento , es una interfaz de programación que representa documentos estructurados como HTML y XML como un árbol de objetos. Define cómo acceder, manipular y modificar elementos del documento utilizando lenguajes de programación como JavaScript.
Básicamente, el modelo de objetos de documento es un API que representa e interactúa con documentos HTML o XML.
El DOM es un W3C (Consorcio Mundial de la red) estándar y define un estándar para acceder a los documentos.
El estándar W3C Dom se divide en tres partes diferenciadas:
- DOM central – modelo estándar para todo tipo de documentos
- XMLDOM – modelo estándar para documentos XML
- dominio HTML – modelo estándar para documentos HTML
dominio HTML
HTML DOM es un estándar modelo de objeto e interfaz de programación para Documentos HTML. dominio HTML es una forma de representar la página web en un forma jerárquica estructurada para que sea más fácil para los programadores y usuarios deslizarse por el documento.
tipo burbuja java
Con HTML DOM, podemos acceder y manipular fácilmente etiquetas, ID, clases, atributos o elementos de HTML utilizando comandos o métodos proporcionados por el objeto del documento.
Al utilizar DOM JavaScript, obtenemos acceso a HTML y CSS de la página web y también podemos modificar el comportamiento de los elementos HTML.
¿Por qué se requiere DOM?
HTML se utiliza para estructura las páginas web y JavaScript se utiliza para agregar comportamiento a nuestras páginas web. Cuando se carga un archivo HTML en el navegador, JavaScript no puede entender el documento HTML directamente. Por lo tanto, interpreta e interactúa con el modelo de objetos de documento (DOM), que crea el navegador en función del documento HTML.
DOM es básicamente la representación del mismo documento HTML pero en una estructura tipo árbol compuesta de objetos. JavaScript no puede entender las etiquetas() en el documento HTML pero puede entender el objeto h1 en DOM.
JavaScript interpreta DOM fácilmente, usándolo como puente para acceder y manipular los elementos. DOM Javascript permite el acceso a cada uno de los objetos (h1, p, etc) mediante el uso de diferentes funciones.
El Modelo de Objetos de Documento (DOM) es esencial en el desarrollo web por varias razones:
- Páginas web dinámicas: Te permite crear páginas web dinámicas. Permite que JavaScript acceda y manipule el contenido, la estructura y el estilo de la página de forma dinámica, lo que brinda experiencias web interactivas y responsivas, como actualizar el contenido sin recargar toda la página o responder instantáneamente a las acciones del usuario.
- Interactividad: Con el DOM, puede responder a las acciones del usuario (como clics, entradas o desplazamientos) y modificar la página web en consecuencia.
- Actualizaciones de contenido: Cuando desea actualizar el contenido sin actualizar toda la página, el DOM permite cambios específicos que hacen que las aplicaciones web sean más eficientes y fáciles de usar.
- Compatibilidad entre navegadores: Diferentes navegadores pueden representar HTML y CSS de diferentes maneras. El DOM proporciona una forma estandarizada de interactuar con los elementos de la página.
- Solicitudes de una sola página (SPA): Las aplicaciones creadas con marcos como React o Angular dependen en gran medida del DOM para la representación y actualización eficiente del contenido dentro de una sola página HTML sin recargar la página completa.
Estructura del DOM
Se puede considerar DOM como un árbol o un bosque (más de un árbol). El término modelo de estructura A veces se utiliza para describir la representación en forma de árbol de un documento.
Cada rama del árbol termina en un nodo, y cada nodo contiene objetos. Los detectores de eventos se pueden agregar a los nodos y activarse cuando ocurre un evento determinado. Una propiedad importante de los modelos de estructura DOM es isomorfismo estructural : si se utilizan dos implementaciones DOM cualesquiera para crear una representación del mismo documento, crearán el mismo modelo de estructura, con precisamente los mismos objetos y relaciones.
¿Por qué DOM se llama modelo de objetos?
lanzar int a cadena
Los documentos se modelan utilizando objetos, y el modelo incluye no sólo la estructura de un documento sino también el comportamiento de un documento y los objetos que lo componen, como elementos de etiqueta con atributos en HTML.
Propiedades del DOM
Veamos las propiedades del objeto de documento a las que el objeto de documento puede acceder y modificar.
Representación del DOM
- Objeto de ventana : El objeto de ventana es un objeto del navegador que siempre está en la parte superior de la jerarquía. Es como una API que se utiliza para configurar y acceder a todas las propiedades y métodos del navegador. Lo crea automáticamente el navegador.
- Objeto del documento: Cuando un documento HTML se carga en una ventana, se convierte en un objeto de documento. El objeto 'documento' tiene diversas propiedades que hacen referencia a otros objetos que permiten el acceso y modificación del contenido de la página web. Si es necesario acceder a cualquier elemento de una página HTML, siempre comenzamos accediendo al objeto 'documento'. El objeto de documento es propiedad del objeto de ventana.
- Objeto de formulario: Esta representado por forma etiquetas.
- Objeto de enlace : Esta representado por enlace etiquetas.
- Objeto de anclaje : Esta representado por a href etiquetas.
- Elementos de control de formulario: El formulario puede tener muchos elementos de control, como campos de texto, botones, botones de opción, casillas de verificación, etc.
Métodos de objeto de documento
DOMINGO proporciona varios métodos que permiten a los usuarios interactuar y manipular el documento. Algunos métodos DOM comúnmente utilizados son:
| Método | Descripción |
|---|---|
| escribir (cadena) | Escribe la cadena dada en el documento. |
| obtenerElementoById() | Devuelve el elemento que tiene el valor de identificación dado. |
| obtenerElementosPorNombre() | Devuelve todos los elementos que tienen el valor de nombre dado. |
| getElementsByTagName() | Devuelve todos los elementos que tienen el nombre de etiqueta dado. |
| getElementsByClassName() | Devuelve todos los elementos que tienen el nombre de clase dado. |
Ejemplo: En este ejemplo, utilizamos la identificación del elemento HTML para encontrar el elemento HTML DOM.
HTML techcodeview.comh2>
Un portal de informática para geeks. p>
Este ejemplo ilustra la método getElementByIdb>. p>
p>