Logo Desarrollo


El dom y los selectores

¿Qué es el DOM?
Las siglas DOM significan Document Object Model, o lo que es lo mismo, la estructura del documento HTML. Una página HTML está formada por múltiples etiquetas HTML anidadas una dentro de otra, formando un árbol de etiquetas relacionadas entre sí denominado árbol DOM (o simplemente DOM). En Javascript, cuando nos referimos al DOM hacemos referencia a esta estructura que podemos modificar de forma dinámica añadiendo nuevas etiquetas, modificando o eliminando otras, cambiando sus atributos HTML, añadiendo clases, cambiando el contenido de texto, y mucho más.
Al ser un lenguaje de programación todas estas tareas se pueden automatizar indicando que se realicen cuando el usuario haga acciones determinadas como pulsar un botón, mover el ratón, hacer click en una parte del documento, escribir un texto, etcétera.
En Javascript, la forma de acceder al DOM es a través de un objeto llamado document, que representa el árbol DOM de la página o pestaña del navegador donde nos encontramos. En su interior pueden existir varios tipos de elementos, pero principalmente serán element o node.
Element: no es más que la representación genérica de una etiqueta HTMLElement.
Node: es una unidad más básica, la cuál puede ser element o un nodo de texto.


Selectores

Si queremos hacer modificaciones en un elemento de la página HTML, lo primero que debemos hacer es buscar dicho elemento. Para ello, se suele intentar identificar el elemento a través de alguno de sus atributos más utilizados, generalmente el ID o la clase. Estos son los 4 métodos tradicionales de Javascript para manipular el DOM. Se denominan tradicionales porque son los que existen en Javascript desde versiones más antiguas. Dichos métodos te permiten buscar elementos en la página dependiendo de los atributos id, class, name o de la propia etiqueta, respectivamente.

Métodos de búsqueda Descripción Búsqueda sin resultados
document.getElementById(id) Busca el elemento HTML a través del id Devuelve null
document.getElementsByClassName(class) Busca elementos a través de la clase Devuelve []
document.getElementsByName(name) Busca elementos a través del atributo name Devuelve []
element.getElementsByTagName(tag) Busca elementos a través del nombre de la etiqueta Devuelve []

getElementById

Busca un elemento HTML con el id especificado en id por parámetro. En principio, un documento HTML bien construído no debería tener más de un elemento con el mismo id. Por lo tanto, este método devolverá siempre un solo resultado, y en el caso de no encontrar el elemento indicado devolverá NULL.

getElementsByClassName

Permite buscar los elementos con la clase especificada en class. Es importante darse cuenta del matiz de que el metodo tiene getElements en plural, y esto es porque al devolver clases (al contrario que los id) se pueden repetir, y por lo tanto, devolvernos varios elementos. Estos métodos devuelven siempre un ARRAY con todos los elementos encontrados que encajen con el criterio. En el caso de no encontrar ninguno, devolverán un ARRAY vacío: []. Exactamente igual funcionan los métodos getElementsByName(name) y getElementsByTagName(tag), salvo que se encargan de buscar elementos HTML por su atributo name o por su propia etiqueta de elemento HTML.
Importante. Aunque en esta documentación se hace referencia a ARRAY, realmente los métodos de búsqueda generalmente devuelven un tipo de dato HTMLCollection o NodeList. Estos, aunque actúan de forma muy similar a un ARRAY, no son exactamente lo mismo y pueden carecer de algunos métodos como por ejemplo forEach.


Aunque podemos utilizar los métodos tradicionales que acabamos de ver, actualmente tenemos a nuestra disposición dos nuevos métodos de búsqueda de elementos que son mucho más cómodos y prácticos si conocemos y dominamos los selectores CSS.

Método de búsqueda Descripción
document.querySelector(selector) Busca el primer elemento que coincide con el selector CSS
document.querySelectorAll(selector) Busca todos los elementos que coinciden con el selector CSS

Con estos dos métodos podemos realizar todo lo que hacíamos con los métodos tradicionales mencionados anteriormente e incluso muchas más cosas (en menos código), ya que son muy flexibles y potentes gracias a los selectores CSS. Lo más básicos son:

Los selectores css son mucho más potentes que estos pocos ejemplos, para quien quiera profundizar en ellos comparto el siguiente link


querySelector

Devuelve el primer elemento que coincide con el selector CSS suministrado. Al igual que su equivalente (getElementById) devuelve un solo elemento y en caso de no coincidir con ninguno, devuelve null.

querySelectorAll

Realiza una búsqueda de elementos como lo hace el anterior, sólo que como podremos intuir por ese All(), se devuelve un ARRAY con todos los elementos que coinciden con el selector csss.


Ejemplos

En estos ejemplos vamos a incluir el código JavaScript dentro del propio html para facilitar la copia y ejecución, sin embargo recuerden que en los proyectos es recomendable separar el código en archivos diferentes.

Cambiar el título de forma dinámica

En este ejemplo utilizamos los selectores para guardar los elementos en sus respectivas variables, añadiendo a través del atributo textContent una cadena determinada. En el caso del título lo hacemos a través del ID del elemento, en cambio con el párrafo solo utilizamos el nombre de la etiqueta en el querySelector. Ambos podrían haber sido seleccionados con cualquiera de los 2 métodos.


<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Cambio de título</title>
</head>
<body>

<h1 id='title'></h1>
<p></p>

<script>
var title = document.getElementById('title');
title.textContent = 'Este título fué añadido luego de cargarse la página';
var paragraph = document.querySelector('p');
paragraph.textContent = 'Párrafo añadido luego de cargar el documento y añadir el título';
</script>

</body>
</html>


Cambiar el título luego de una espera

En el siguiente ejemplo vamos a utilizar la función setTimeout, la cual nos permite ejecutar instrucciones después de los milisegundos especificados. No voy a entrar en detalles ya que dentro de ella se ejecuta una función anónima y no es algo que pueda explicar en pocas palabras, lo veremos en detalle un poco más adelante. Basta decir que luego de 5 segundos (5000 ms) se selecciona el título, y se modifica el texto con la cadena especificada.


<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Modificación con espera</title>
</head>
<body>

<h1>Este es el título original, que solo permanecerá unos segundos</h1>

<script>
setTimeout(function() {
    var title = document.querySelector('h1');
    title.textContent = 'Segundo título, modificado luego de la espera asignada';
}, 5000);
</script>

</body>
</html>


Modificación del título a través de un evento

Los eventos de JavaScript permiten la interacción entre las aplicaciones JavaScript y los usuarios. Cada vez que se pulsa un botón, se produce un evento. Cada vez que se pulsa una tecla, también se produce un evento. En este caso llamaremos al evento click, para que ejecute una instrucción al ser pulsado ese botón. Más adelante trabajaremos un poco más en profundidad los diferentes eventos y las distintas formas de capturarlos.
En este caso el evento llama a la función titleModify, en la cual se incrementa el contenido de la variable x, se selecciona el elemento h1 con el selector, y se le añade la cadena título concatenada con el contenido de la variable x. Cada vez que se pulse el botón, se incrementa el número en el título.


<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título con evento</title>
</head>
<body>

<h1>Título 0</h1>
<button onClick='titleModify();'>Cambiar el título</button>

<script>
var x = 0;

function titleModify() {
    x++
    var title = document.querySelector('h1');
    title.textContent = 'Título ' + x;
}

</script>

</body>
</html>