DOM (Document Object Model) o Modelo de Objetos de Documento es una API (Interfaz de Programación de Aplicaciones) que representa un documento HTML como una estructura en forma de árbol para que los programas puedan acceder y modificar el estilo y la estructura del documento HTML. El objeto DOM es creado automáticamente por el propio navegador web cuando se abre una página web HTML.

HTML DOM consta de tres partes:

  • Documento: Es el documento HTML que creamos.
  • Objetos: Todos los elementos y atributos presentes en el documento HTML se consideran objetos (por ejemplo: <h1> <p> <img>, etc.).
  • Modelo: La estructura en forma de árbol de los elementos se llama modelo.

Representación Estructural de HTML DOM

Código HTML: Considera un código HTML simple como el siguiente:

HTML
<!DOCTYPE html>
<html>
<head>
    <title>Título de la página</title>
</head>
<body>
    <h2>Bienvenido a HDC</h2>
    <p>El código predeterminado ha sido cargado en el editor.</p>
</body>
</html>

El DOM HTML creado cuando un navegador web abre esta página web se verá así:

Imagen de representación DOM HTML
Imagen de representación DOM HTML

El DOM HTML nos permite interactuar con los elementos de una página web y modificarlos dinámicamente utilizando lenguajes de scripting como JavaScript. Algunas de las funciones clave de HTML DOM incluyen:

  • Acceder y modificar el contenido del elemento
  • Agregar, eliminar y reemplazar elementos
  • Aplicar estilos y manipular atributos
  • Responder a eventos del usuario
  • Navegar por la estructura del documento
  • Crear nuevos elementos y documentos

Funciones Principales de HTML DOM

Lo que hace DOM Document Object Model
Lo que hace DOM Document Object Model

Las funciones de HTML DOM son las siguientes:

  • La API DOM se puede utilizar para acceder y modificar los datos representados en un documento HTML utilizando el lenguaje JavaScript. Con la API DOM, podemos manipular los siguientes elementos: elementos HTML, atributos y datos presentes entre etiquetas y estilos CSS.
  • DOM permite a los programadores crear páginas web que utilizan HTML dinámico, es decir, sitios web que se actualizan sin recargar la página web.
  • También permite a los programadores desarrollar páginas web o sitios web que son personalizables por el usuario, es decir, el usuario puede editar elementos HTML sobre la marcha (por ejemplo, cambiando el color de la página web o de un botón).
  • Funciona como un puente que hace que una página web sea dinámica mediante el uso del lenguaje JavaScript.
  • Por lo tanto, para hacer que un sitio web sea más interactivo y dinámico, DOM proporciona varios métodos para acceder a elementos y atributos utilizando JavaScript. Algunos de los métodos disponibles son los siguientes:
    • getElementById(): este método se utiliza para acceder a un elemento presente en el documento HTML utilizando su identificador único.
    • innerHTML: se utiliza para cambiar el contenido entre elementos.
    • addEventListener(): este método se utiliza para obtener un objeto de evento si se ha producido un evento (por ejemplo, un clic del ratón).
    • appendChild(): este método se utiliza para añadir un elemento al documento.

Veamos un Ejemplo de HTML DOM

En el siguiente código HTML, obtenemos los datos especificados en el elemento de entrada de texto utilizando document.getElementById().value y cambiamos el texto utilizando document.write(). Por lo tanto, estas son las funciones principales de HTML DOM que ayudan a acceder y modificar los datos representados en HTML.

HTML
<!DOCTYPE html>
<html lang="es">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
</head>
 
<body>
 
    <h1 style="color: green; text-align: center;">
        HTMLdesdeCero
    </h1>
 
    <form>
        <div class="wrapper" style="text-align: center;">
            Ingresa tu nombre:
            <input type="text" id="t1" />
            <br><br>
            <input type="submit"
                style="position: absolute;"
                onclick="func()" />
        </div>
    </form>
     
    <script>
        function func() {
            var name = document.getElementById("t1").value;
            document.write("Hola" + name +
                ", este texto se imprime usando HTML DOM ");
        } 
    </script>
</body>
 
</html>

El código HTML anterior crea una página web que contiene un formulario con un campo de entrada de texto donde se puede ingresar un nombre. Cuando se envía el formulario haciendo clic en el botón “Enviar“, se ejecuta la función func() de JavaScript. Esta función obtiene el valor ingresado en el campo de texto y utiliza document.write() para escribir un mensaje en la página web que saluda al usuario por su nombre.

5/5 - (1 voto)