- El DOM es una API (interfaz de programación de aplicaciones) definida por el Consorcio World Wide Web (W3C) para acceder y modificar documentos XML.
- El DOM es una utilidad disponible para la mayoría de lenguajes de programación (JavaScript, Java, PHP, Python) y cuyas únicas diferencias se encuentran en la forma de implementarlo.
- El DOM permite a los desarrolladores frontend:
- acceder y manipular elementos HTML
- acceder y manipular atributos HTML
- acceder y manipular estilos CSS
- agregar nuevos elementos y atributos HTML
- eliminar elementos y atributos HTML
- reaccionar a eventos HTML existentes en la página
- y mas...
Un simple ejemplo de código HTML y su representación gráfica como DOM
<!DOCTYPE html>
<html>
<head>
<title>My Title</title>
</head>
<body>
<a href="">My link</a>
<h1>My header</h1>
</body>
</html>
Otro ejemplo:
<table>
<tbody>
<tr>
<td>Shady Grove</td>
<td>Aeolian</td>
</tr>
<tr>
<td>Over the river, Charlie</td>
<td>Dorian</td>
</tr>
</tbody>
</table>
// Seleccionando por ID
let element = document.querySelector("#myID");
// Seleccionando por clase
let element = document.querySelector(".my-class")
// Seleccionando por tag (etiquetas html)
let element = document.querySelector("h1")// Opción 1:
// Creando con: createElement y appendChild
let element = document.createElement("h1");
element.innerHTML = "Hello World";
document.body.appendChild(element);
// Opción 2:
// Creando con: innerHTML
document.body.innerHTML = "<h1>Hello World</h1>"; // Eliminando con: removeChild()
let element = document.querySelector("#elementID");
element.parentNode.removeChild(element);let element = document.querySelector("#elementID");
element.addEventListener("click", function() {
//your code here
alert("evento click agregado");
});const element = document.querySelector('.any-class');
// agregando una clase
element.classList.add('new-class');
// eliminando una clase
element.classList.remove('class-name');const element = document.querySelector('.any-class');
// cambiando propiedades CSS
element.style.backgroundColor = 'black';
element.style.fontFamily = 'Impact,Charcoal,sans-serif';