HTML DOM
Este artículo discutirá HTML DOM, su importancia y su estructura. También hablaremos sobre las propiedades y métodos del modelo de objeto de documento y los niveles de DOM.
HTML DOM
El modelo de objeto de documento HTML o HTML DOM es una interfaz de programación XML y HTML. El modelo de objeto de documento crea una estructura de documento lógico y define el método para acceder y modificarlos. Debido a que HTML DOM no identifica ninguna relación de objeto, se denomina estructura lógica.
HTML DOM también es conocido por representar páginas web de manera jerárquica y organizada para que los usuarios y los programadores de JavaScript puedan navegar fácilmente a través del documento. HTML DOM le permite acceder y manipular elementos HTML, clases, etiquetas, atributos e ID utilizando los métodos y comandos ofrecidos.
¿Por qué necesitas HTML DOM?
JavaScript se utiliza para agregar funcionalidad relacionada si está utilizando HTML para estructurar sus páginas web. Cuando se carga un documento HTML en el navegador, JavaScript no puede entenderlo directamente. Por lo tanto, se crea un modelo de objeto de documento correspondiente. El DOM generado representa el mismo documento HTML de manera diferente con la ayuda de los objetos. Después de eso, JavaScript puede interpretar fácilmente el HTML DOM.
Por ejemplo, en un documento HTML, JavaScript no puede comprender directamente las etiquetas (
párrafo
); Sin embargo, puede entender el objeto "pag"En el modelo de objeto de documento. Con esta capacidad, JavaScript puede usar varios métodos para acceder a los objetos adicionales de los documentos HTML.
Estructura de HTML DOM
HTML DOM o modelo de objeto de documento tiene una estructura similar a un árbol, donde el árbol define el modelo de estructura del documento. En el modelo de estructura DOM HTML, "isomorfismo estructural"Es una propiedad esencial que establece que si ha utilizado dos implementaciones DOM para construir una representación o modelo del mismo documento HTML, producirán los mismos modelos estructurales se basan en los mismos objetos y sus relaciones.
¿Por qué llamamos a HTML DOM un modelo de documento?
Los objetos HTML se utilizan para modelar documentos. Este modelo comprende la estructura del documento, los objetos y su comportamiento, como los elementos de etiqueta HTML que tienen sus atributos.
Propiedades HTML DOM
Ahora, verifiquemos las propiedades del objeto del documento que pueden recuperar y cambiar el objeto del documento:
- Objeto de la ventana: Siempre verá el "objeto de la ventana" en la parte superior de la jerarquía de DOM.
- Objeto de documento: Cuando carga un documento HTML en un navegador, se convierte en un objeto de documento.
- Objeto de anclaje: Se utilizan etiquetas href para representar los objetos de anclaje.
- Objeto de forma: Se utilizan etiquetas de formulario para representar los objetos de formulario.
- Objeto de enlace: Se utilizan etiquetas de enlace para representar los objetos de enlace.
- Elementos de control de formulario: Los formularios también pueden tener otros elementos de control, como botones, reinicio, botones de radio, textarea, casillas de verificación.
Métodos de objeto de documento HTML
Aquí hay algunos métodos útiles de objetos de documento HTML que puede usar de acuerdo con sus requisitos:
- getElementByClassName (): El método getElementByClassName () se utiliza para recuperar elementos que tienen el nombre de clase especificado.
- getElementBytagName (): El método getElementBytagName () se utiliza para recuperar elementos con el nombre de la etiqueta agregado.
- getElementByName (): El método getElementByName () se utiliza para recuperar elementos que tienen el valor de nombre especificado.
- getElementById (): El método getElementById () se utiliza para recuperar elementos que tienen el valor de identificación especificado.
- escribir(): El método Write () se utiliza para escribir la cadena especificada en el documento.
Ejemplo 1: Busque y obtenga el elemento HTML por ID en JavaScript
En el ejemplo dado a continuación, hemos utilizado el método getElementById () para encontrar el HTML DOM que tiene la identificación "P1":
Esto es linuxhint.comunicarse
Encuentre y obtenga elementos HTML DOM por ID
Este es un programa JavaScript que utiliza el método "getElementsByID"
Ejecute el programa anterior en su editor de código favorito o en cualquier Sandbox de codificación en línea; Sin embargo, utilizaremos el JSBIN para este propósito:
La ejecución del programa JavaScript anterior mostrará el siguiente resultado:
Ejemplo 2: representación de elementos HTML DOM
El siguiente ejemplo ilustra la representación de elementos HTML en DOM (modelo de objeto de documento):
| Bicicleta | Avión |
| Camión | Autobús |
Aquí está la representación de los elementos dados anteriormente en una estructura similar a un árbol:
Nivel DOM HTML
HTML DOM consta de cuatro niveles: Nivel 0, Nivel 1, Nivel 2 y Nivel 3.
DOM Nivel 0
Este nivel ofrece un conjunto de interfaz de bajo nivel.
DOM Nivel 1
DOM Nivel 1 comprende Html y CENTRO partes. HTML suministra interfaces de alto nivel que se pueden utilizar para representar documentos HTML y la parte central se usa para representar el documento estructurado.
DOM Nivel 2
DOM Nivel 2 se basa en seis especificaciones: rango, transversal, estilo, eventos y core2.
- RANGO: Permite programas HTML para asignar dinámicamente un rango de contenido en el documento.
- EL RECORRIDO: Permite que los programas HTML atraviesen el documento dinámicamente.
- ESTILO: Permite que los programas recuperen y establezcan el contenido de las hojas de estilo.
- EVENTOS: Cuando un usuario interactúa con una página web, los eventos son los scripts ejecutados como resultado de la misma.
- PUNTOS DE VISTA: Permite que los programas HTML recuperen y establezcan el contenido del documento.
DOM Nivel 3
DOM Nivel 3 se basa en cinco especificaciones: XPATH, Eventos, Validación, Save, Load y Core3.
- XPATH: Es un lenguaje de ruta utilizado para acceder a la estructura de los árboles de DOM.
- EVENTOS: Mejora la funcionalidad de los eventos de nivel 2 de DOM.
- VALIDACIÓN: Permite que el programa HTML modifique la estructura y el contenido del documento mientras se asegura que el documento proporcionado sea válido.
- AHORRAR y CARGA: El programa HTML permite cargar y guardar dinámicamente el contenido del documento XML en un documento DOM.
- Core3: Mejora la funcionalidad del núcleo de nivel 2 de DOM.
Conclusión
HTML DOM o el modelo de objeto de documento es crucial para desarrollar sitios web interactivos. Es una interfaz de usuario que permite que un lenguaje de programación cambie el estilo, la estructura y el contenido del sitio web. HTML DOM también actúa como una interfaz entre HTML y JavaScript. Este artículo discutió HTML DOM, su importancia y su estructura. También hemos hablado sobre las propiedades y métodos del modelo de objetos de documento y los niveles de DOM.