hchocobar/dom.md

## dom.md

      
    Raw
  

              dom.md
            
          
    DOM - Document Object Model

Qué es el DOM?


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.

Para qué sirve el DOM?


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...


Ejemplos

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>

JavaScript y el DOM

Seleccionando elementos

// 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")
Creando un elemento

// 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 un elemento

// Eliminando con: removeChild()
let element = document.querySelector("#elementID");
element.parentNode.removeChild(element);
Creando un evento

let element = document.querySelector("#elementID");
element.addEventListener("click", function() {
	//your code here
	alert("evento click agregado");
});
Agregando y eliminando clases

const element = document.querySelector('.any-class');

// agregando una clase
element.classList.add('new-class');

// eliminando una clase
element.classList.remove('class-name');
Cambiando propiedades CSS

const element = document.querySelector('.any-class');

// cambiando propiedades CSS
element.style.backgroundColor = 'black';
element.style.fontFamily = 'Impact,Charcoal,sans-serif';