Hola, ¿increíbles desarrolladores de JavaScript?

Los navegadores proporcionan una interfaz de programación llamada Modelo de objetos de documento (DOM) que permite que los scripts (JavaScript en particular) interactúen con el diseño de una página web. El navegador crea el modelo de objetos de documento (DOM) de una página web, una estructura jerárquica en forma de árbol que organiza los componentes de la página en objetos, a medida que se carga. Se puede acceder y modificar dinámicamente el estilo, la organización y el contenido de un documento con la ayuda de este paradigma.

Usando el DOM para interactuar

Se pueden realizar muchas operaciones en el Modelo de objetos de documento (DOM) mediante JavaScript, entre ellas:

• Modificando el contenido de elementos HTML
• Agregar o eliminar elementos y atributos
• Responder a eventos del usuario como clics o pulsaciones de teclas
• Creando nuevos eventos dentro de la página

Ejemplo

Puedes usar JavaScript para alterar el contenido de un elemento apuntándolo con la función document.getElementById() y luego cambiando la propiedad internalHTML del elemento:

// Modify an element's content, access it using its ID
document.getElementById("myElement").innerHTML = "New content";

Estructura DOM

El objeto documento está en la base del DOM, que está organizado como un árbol de objetos. Cada elemento HTML se representa como un nodo en el árbol, y estos nodos son capaces de tener eventos, métodos y propiedades relacionados. Al ofrecer formas de navegar y trabajar con estos nodos, el DOM permite que los scripts modifiquen la página en tiempo real.

Aquí hay un ejemplo básico de cómo podría verse el árbol DOM de un documento HTML típico:

document
├── html
│ ├── head
│ │ └── title
│ └── body
│ ├── h1
│ └── p

La función de DOM en el desarrollo web

El DOM es esencial para el desarrollo web por varias razones.

• Permite crear páginas web dinámicas e interactivas permitiendo que los scripts cambien el estilo y el contenido de una página en respuesta a la entrada del usuario.
• Garantiza uniformidad entre plataformas al ofrecer una interfaz estandarizada para que varios navegadores interactúen y manipulen páginas en línea.
• Aplicaciones de una sola página (SPA) dependen del DOM para actualizar la página sin necesidad de recargarla, por lo que es fundamental para su funcionamiento.

Niveles y estándares DOM

El World Wide Web Consortium (W3C) mantiene el estándar DOM, que garantiza su confiabilidad y coherencia en varios navegadores y sistemas web. El estándar se divide en varias secciones y niveles, que incluyen:

• El paradigma fundamental para todos los tipos de documentos es * Core DOM:.
• El modelo de documento XML se llama XML DOM.
• HTML DOM: El modelo fue creado especialmente para archivos HTML.

Se agregan más capacidades y funcionalidades con cada versión estándar de DOM, lo que permite manipulaciones e interacciones de documentos en línea más complejas.

Ilustración del mundo real de la manipulación DOM

Aquí hay una ilustración del mundo real de cómo puedes comunicarte con un documento HTML usando DOM:

Hello, World!
Change Header

En este ejemplo, al hacer clic en el botón se llama a la función changeHeader(), que utiliza el DOM para acceder al elemento

por su ID. Luego cambia el contenido del texto y el color del encabezado.

Técnicas DOM esenciales

1. Selección de consultas

Utilice document.querySelector() para capturar elementos con precisión milimétrica.

Explicación: querySelector() te permite seleccionar elementos usando selectores CSS, lo que lo convierte en una forma potente y flexible de acceder a elementos DOM.

Ejemplo

// Select the first element with class 'myClass'

const element = document.querySelector('.myClass');

// Select a specific element by ID
const header = document.querySelector('#header' );

// Select the first 
 inside a 

const paragraph = document.querySelector('div p');





  
  
  2. Contenido dinámico


Modifique el HTML interno o el contenido de texto para actualizar el contenido de la página sobre la marcha. 

Explicación: internalHTML o textContent le permite cambiar dinámicamente el contenido de los elementos, permitiendo páginas web interactivas y responsivas.


  
  
  Ejemplo




// Using innerHTML (can include HTML tags)

document.querySelector('#myDiv').innerHTML = 'New content!';

// Using textContent (plain text only, safer for user inputs)

document.querySelector('#myParagraph').textContent = 'Updated text content';





  
  
  3. Escucha de eventos


 Adjunte addEventListener() a elementos para experiencias de usuario interactivas. 

Explicación: addEventListener() te permite responder a acciones del usuario como clics, pulsaciones de teclas o movimientos del mouse, creando aplicaciones web interactivas.


  
  
  Ejemplo




const button = document.querySelector('#myButton' );

button. addEventListener( 'click', function( ) {
     alert( 'Button clicked!')
});

// Using arrow function
document.addEventListener('keydown', (event) => {
     console. log( 'Key pressed:', event.key);
});





  
  
  4. Recorrido DOM


Navega por el árbol DOM con las propiedades parentNode, Children y Siblings. 

Explicación: DOM Traversal le permite moverse a través de la estructura del documento, accediendo a elementos relacionados según su posición en el árbol DOM.


  
  
  Ejemplo




const child = document.querySelector('#childElement');

// Access parent
const parent = child.parentNode;

// Access siblings
const nextSibling = child.nextElementSibling;
const prevSibling = child.previousElementSibling;

// Access children
const firstChild = parent.firstElementChild;
const allChildren = parent.children;





  
  
  Conclusión


El DOM es una poderosa herramienta en JavaScript que permite a los desarrolladores crear experiencias web ricas e interactivas. Al comprender y utilizar el DOM, los desarrolladores pueden controlar el comportamiento y la apariencia de las páginas web, haciéndolas más atractivas y receptivas a las interacciones del usuario.