¿Qué es el HTML DOM?
El HTML DOM es un modelo de objetos para HTML . Se define:
- Elementos HTML como objetos
- Propiedades para todos los elementos HTML
- Métodos para todos los elementos HTML
- Eventos para todos los elementos HTML
El HTML DOM es una API (interfaz de programación) para JavaScript :
- JavaScript puede agregar/cambiar/eliminar elementos HTML
- JavaScript puede agregar/cambiar/eliminar atributos HTML
- JavaScript puede agregar/cambiar/eliminar estilos CSS
- JavaScript puede reaccionar a eventos HTML
- JavaScript puede agregar/cambiar/eliminar eventos HTML
El HTML DOM (Modelo de objeto de documento)
Cuando se carga una página web, el navegador crea un modelo de objeto de documento de la página.
El modelo HTML DOM se construye como un árbol de objetos :
El árbol de objetos HTML DOM
Encontrar elementos HTML
Cuando desee acceder a elementos HTML con JavaScript, primero debe encontrar los elementos.
Hay un par de maneras de hacer esto:
- Encontrar elementos HTML por ID
- Encontrar elementos HTML por nombre de etiqueta
- Encontrar elementos HTML por nombre de clase
- Encontrar elementos HTML mediante selectores CSS
- Encontrar elementos HTML por colecciones de objetos HTML
Encontrar elemento HTML por ID
La forma más fácil de encontrar un elemento HTML en el DOM es utilizando la identificación del elemento.
Este ejemplo encuentra el elemento con id="intro":
Ejemplo
var myElement = document.getElementById("intro");
Si se encuentra el elemento, el método devolverá el elemento como un objeto (en myElement).
Si no se encuentra el elemento, myElement contendrá un valor nulo.
Búsqueda de elementos HTML por nombre de etiqueta
Este ejemplo encuentra todos los elementos <p>:
Ejemplo
var x = document.getElementsByTagName("p");
Este ejemplo encuentra el elemento con id="main", y luego encuentra todos los elementos <p> dentro de "main":
Ejemplo
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Encontrar elementos HTML por nombre de clase
Si desea encontrar todos los elementos HTML con el mismo nombre de clase, use getElementsByClassName().
Este ejemplo devuelve una lista de todos los elementos con class="intro".
Ejemplo
var x = document.getElementsByClassName("intro");
Buscar elementos por nombre de clase no funciona en Internet Explorer 8 y versiones anteriores.
Búsqueda de elementos HTML mediante selectores de CSS
Si desea encontrar todos los elementos HTML que coincidan con un selector CSS específico (id, nombres de clases, tipos, atributos, valores de atributos, etc.), use el método querySelectorAll().
Este ejemplo devuelve una lista de todos los elementos <p> con class="intro".
Ejemplo
var x = document.querySelectorAll("p.intro");
El método querySelectorAll() no funciona en Internet Explorer 8 y versiones anteriores.
Búsqueda de elementos HTML por colecciones de objetos HTML
También se puede acceder a las colecciones de objetos HTML:
Tutorial HTML DOM
Tutorial completo de HTMLDOM
Esta ha sido una breve introducción a HTMLDOM.
Para obtener un tutorial completo de HTMLDOM, vaya al Tutorial de HTMLDOM de W3Schools .