El DOM

El DOM, ese gran desconocido, o no, en este artículo veremos la respuesta a la pregunta de ¿Qué es el DOM?


Definición


El Document Object Model, por sus siglas DOM, es una API multiplataforma que trata los documentos HTML y XML como una estructura de árbol que consta de nodos.


Todos estos nodos se pueden manipular mediante código y cualquier cambio que se realice sobre ellos, se verá reflejado en el documento.


En el navegador, que es donde comúnmente lo usamos, esta API está disponible para Javascript, donde podemos a través del DOM editar o manipular cualquier etiqueta HTML, o interactuar con ellos a través de eventos.


A tener en cuenta


- El DOM fue diseñado para ser independiente de cualquier tipo de lenguaje de programación, representando únicamente la estructura del documento.


- El DOM se construye progresivamente a medida que una página web carga, por lo que los scripts se suelen colocar en la parte inferior o en el <head> con el atributo defer. Los scripts que manipulan los nodos DOM deben ejecutarse después de que se haya construido el DOM, para evitar errores.


- Al establecer la propiedad innerHTML en un nuevo valor, la string se ejecuta a través del HTML parser, lo que ofrece una manera fácil de agregar contenido HTML dinámico a un nodo.


- Las funciones comunes para seleccionar nodos del DOM, son: document.getElementById() y document.querySelector()


Ejemplos de manipulación del DOM


Estos ejemplos están hechos en Javascript.


Supongamos que tenemos este HTML:

<p>
  <a id="contacto" href="contactos.html">Contáctenos</a>
</p>

Si queremos obtener el elemento "<a>" lo haremos así:

var node = document.getElementById("contacto");

-------------------------


Si tenemos este HTML:

<ul>
 <li><a href="editorial.html">Editorial</a></li>
 <li><a href="semblanza.html">Autores</a></li>
 <li><a href="noticias.html">Noticias</a></li>
 <li><a href="contactos.html">Contátenos</a></li>
</ul>

Y queremos obtener TODOS los elementos "<a>" lo haremos así:


var nodes = document.getElementsByTagName("a"); 

La variable "nodes" contendrá un array en el orden en el que se muestran los elementos en el HTMl.

----------------------------


Si queremos crear un nuevo elemento desde un script lo haremos así:

var newNode = document.createElement("a"); 

-----------------------------


Supongamos que queremos añadir una tabla a un div con id = "datos", construimos el HTML, lo almacenamos en una variable y mediante innerHTML, podemos asignárselo al div.

var tabla = '<table border="0">'; 
tabla += '<tr><td>Celda 1</td><td>Celda 2</td><td> Celda 3</td></tr>'; 
tabla += '</table>'; 
document.getElementById("datos").innerHTML = tabla; 


Estos son algunos de los ejemplos de como manipular el DOM y de para que sirve, ahora te toca a ti investigar más para aprender, hasta la próxima :)

37 vistas0 comentarios

Entradas Recientes

Ver todo

©2020 por Juanma Perez.