DOM (Modelo de objeto de documento)

En este artículo, discutiremos el modelo de objeto de documento (DOM ) junto con sus propiedades y métodos utilizados para manipular documentos, y comprenderemos su implementación a través de los ejemplos.

El modelo de objeto de documento (DOM) es una interfaz de programación para documentos HTML (lenguaje de marcado de hipertexto) y XML (lenguaje de marcado extensible). Define la estructura lógica de los documentos y la forma en que se accede y manipula un documento.

Nota : se llama estructura lógica porque DOM no especifica ninguna relación entre objetos. 

DOM es una forma de representar la página web de una manera jerárquica estructurada para que sea más fácil para los programadores y usuarios navegar por el documento. Con 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. Usando DOM, JavaScript obtiene acceso a HTML y CSS de la página web y también puede agregar comportamiento a los elementos HTML. así que, básicamente, Document Object Model es una API que representa e interactúa con documentos HTML o XML.

¿Por qué se requiere DOM?

HTML se usa para estructurar las páginas web y Javascript se usa 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. Entonces, se crea un documento correspondiente (DOM). DOM es básicamente la representación del mismo documento HTML pero en un formato diferente con el uso de objetos . Javascript interpreta DOM fácilmente, es decir, javascript no puede entender las etiquetas (<h1>H</h1>) en un documento HTML pero puede entender el objeto h1 en DOM. Ahora, Javascript puede acceder a cada uno de los objetos (h1, p, etc) usando diferentes funciones.

Estructura de DOM : DOM se puede considerar como un árbol o un bosque (más de un árbol). El término modelo de estructura se utiliza a veces para describir la representación en forma de árbol de un documento. Cada rama del árbol termina en un Node, y cada Node contiene objetos Los detectores de eventos se pueden agregar a los Nodes y activarse cuando ocurre un evento determinado. Una propiedad importante de los modelos de estructura DOM es el isomorfismo estructural : si se utilizan dos implementaciones DOM cualesquiera para crear una representación del mismo documento, crearán el mismo modelo de estructura, precisamente con los mismos objetos y relaciones.

¿Por qué se llama modelo de objetos?
Los documentos se modelan usando objetos, y el modelo incluye no solo 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 de 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. Es creado automáticamente por el navegador.
• Objeto de documento: cuando se carga un documento HTML en una ventana, se convierte en un objeto de documento. El objeto ‘documento’ tiene varias propiedades que hacen referencia a otros objetos que permiten acceder y modificar el contenido de la página web. Si es necesario acceder a cualquier elemento en una página HTML, siempre comenzamos accediendo al objeto ‘documento’. El objeto del documento es propiedad del objeto de la ventana.
• Objeto de formulario: está representado por etiquetas de formulario .
• Objeto de enlace : está representado poretiquetas de enlace .
• Objeto de anclaje : está representado poretiquetas href .
• Elementos de control de formulario : el formulario puede tener muchos elementos de control, como campos de texto, botones, botones de radio, casillas de verificación, etc.

Métodos de objeto de documento :

• write (“string”): Escribe la string dada en el documento.
• getElementById() : devuelve el elemento que tiene el valor de identificación dado.
• getElementsByName() : devuelve todos los elementos que tienen el valor del 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, usamos la identificación del elemento HTML para encontrar el elemento DOM HTML.

<!DOCTYPE html>
<html>
 
<body>
    <h2>GeeksforGeeks</h2>
   
    <!-- Finding the HTML Elements by their Id in DOM -->
    <p id="intro">A Computer Science portal for geeks.</p>
 
 
 
     
 
 
<p>This example illustrates the <b>getElementById</b> method.</p>
 
 
 
    <p id="demo"></p>
 
 
 
    <script>
    const element = document.getElementById("intro");
    document.getElementById("demo").innerHTML =
      "GeeksforGeeks introduction is: " + element.innerHTML;
    </script>
</body>
 
</html>

Producción:

Obtener el elemento HTML mediante el método getElementById()

Ejemplo : Este ejemplo describe la representación de los elementos HTML en la estructura de árbol.

<table>
  <ROWS>
    <tr>
      <td>Car</td>
      <td>Scooter</td>
    </tr>
    <tr>
      <td>MotorBike</td>
      <td>Bus</td>
    </tr>
  </ROWS>
</table>

Elementos HTML en estructura de árbol

¿Qué DOM no es? 

• El modelo de objeto de documento no es una descripción binaria en la que no define ningún código fuente binario en sus interfaces.
• El modelo de objetos de documento no se utiliza para describir objetos en XML o HTML, mientras que el DOM describe documentos XML y HTML como objetos.
• El modelo de objetos del documento no está representado por un conjunto de estructuras de datos ; es una interfaz que especifica la representación de objetos.
• El modelo de objetos del documento no muestra la criticidad de los objetos en los documentos, es decir, no tiene información sobre qué objeto del documento es apropiado para el contexto y cuál no.

Niveles de DOM : 

• Nivel 0: proporciona un conjunto de interfaces de bajo nivel.
• Nivel 1: el nivel 1 de DOM se puede describir en dos partes: NÚCLEO y HTML .
  • CORE proporciona interfaces de bajo nivel que se pueden utilizar para representar cualquier documento estructurado.
  • HTML proporciona interfaces de alto nivel que se pueden utilizar para representar documentos HTML.
• Nivel 2: consta de seis especificaciones: CORE2 , VIEWS , EVENTS , STYLE , TRAVERSAL y RANGE .
  • CORE2 : amplía la funcionalidad de CORE especificada por DOM nivel 1.
  • VISTAS : las vistas permiten que los programas accedan y manipulen dinámicamente el contenido del documento.
  • EVENTOS : Los eventos son scripts que ejecuta el navegador cuando el usuario reacciona a la página web.
  • ESTILO : permite que los programas accedan y manipulen dinámicamente el contenido de las hojas de estilo.
  • TRAVERSAL : Esto permite que los programas atraviesen dinámicamente el documento.
  • RANGO : Esto permite que los programas identifiquen dinámicamente un rango de contenido en el documento.
• Nivel 3: consta de cinco especificaciones diferentes: CORE3 , LOAD and SAVE , VALIDATION , EVENTS y ​​XPATH .
  • CORE3 : amplía la funcionalidad de CORE especificada por DOM nivel 2.
  • CARGAR y GUARDAR : Esto permite que el programa cargue dinámicamente el contenido del documento XML en el documento DOM y guarde el documento DOM en un documento XML por serialización.
  • VALIDACIÓN : Esto permite que el programa actualice dinámicamente el contenido y la estructura del documento mientras asegura que el documento sigue siendo válido.
  • EVENTOS : amplía la funcionalidad de los eventos especificados por DOM Nivel 2.
  • XPATH : XPATH es un lenguaje de ruta que se puede usar para acceder al árbol DOM.

Ejemplo: Este ejemplo ilustra la manipulación del dominio mediante el método getElementById() .

<!DOCTYPE html>
<html>
 
<head>
    <title>DOM manipulation</title>
</head>
 
<body>
    <label>Enter Value 1: </label>
    <input type="text" id="val1" />
    <br />
    <br />
    <label>Enter Value 2: </label>
    <input type=".text" id="val2" />
    <br />
    <button onclick="getAdd()">Click To Add</button>
    <p id="result"></p>
 
 
 
     
    <script type="text/javascript">
    function getAdd() {
         
        // Fetch the value of input with id val1
        const num1 = Number(document.getElementById("val1").value);
         
        // Fetch the value of input with id val2
        const num2 = Number(document.getElementById("val2").value);
        const add = num1 + num2;
        console.log(add);
         
        // Displays the result in paragraph using dom
        document.getElementById("result").innerHTML = "Addition : " + add;
         
        // Changes the color of paragraph tag with red
        document.getElementById("result").style.color = "red";
    }
    </script>
</body>
 
</html>

Producción:

Manipular los objetos del documento usando el método getElementById()

Referencias: https://www.w3.org/TR/DOM-Level-3-Core/introduction.html

HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .