003. DOM: Nodos, Elementos y Selectores

En este capítulo comenzamos a ver como manejar e interactuar con los nodos, y particularmente los elementos, que son las etiquetas HTML.

Nodo no es elemento

No hay que confundir un nodo con una etiqueta HTML (elemento). hay diferentes tipos de nodos, por ejm los comentarios HTML son un tipo de nodo, las etiquetas HTML son otro tipo de nodo, los textos para las etiquetas textuales como párrafos, encabezados… son otro tipo de nodo.

Para interactuar con el HTML como desarrollador web, no nos van a interesar todos los tipos de nodos. Si vamos a MDN y buscamos Node.nodeType, existe una tabla que indica los diferentes tipos de nodos, una breve descripción y el valor de los mismos. Encontraremos 12 tipos de nodos distintos, algunos son nodos que se encuentran en documentos XML.

Nota: Cada nodo tiene una razón de ser.

Básicamente, para la interacción de HTML, los que nos va a interesar son los nodos de tipo elemento y los nodos de tipo texto.

Node.ELEMENT_NODE
Node.TEXT_NODE

Esto es algo muy importante a considerar, sobre todo cuando lleguemos a la parte del DOM traversing (como recorrer el DOM). Un nodo de texto es el texto que se encuentra dentro de las etiquetas de tipo texto, y un nodo de tipo elemento es una etiqueta HTML en particular.

Ejemplo

Vamos a dejar un código HTML sobre el que estaremos trabajando. El código es el siguiente.

Ejm archivo dom.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Manejo de DOM</title>
  <script src="dom.js"></script>
</head>
<body>
  <h2>Manejo de DOM</h2>
  <p id="que-es">
   Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
   Vitae facilis, adipisci necessitatibus veritatis maiores, 
   magni amet nisi dolor excepturi obcaecati laudantium animi 
   eos accusamus. Eaque at voluptate quidem ipsa mollitia!
  </p>

<nav id="menu">
  <ul>
   <li><a href="">Sección S</a></li>
   <li><a href="">Sección S</a></li>
   <li><a href="">Sección S</a></li>
   <li><a href="">Sección S</a></li>
   <li><a href="">Sección S</a></li>
  </ul>
</nav>

<input type="text" name="nombre" placeholder="Nombre">

<a class="link-dom" href="dom.html">DOM</a>

<section class="cards">
  <figure class="card">
   <img src="https://placeimg.com/200/200/tech" alt="Tech">
   <figcaption>Tech</figcaption>
  </figure>
  <figure class="card">
   <img src="https://placeimg.com/200/200/animals" alt="Animals">
   <figcaption>Animals</figcaption>
  </figure>
  <figure class="card">
   <img src="https://placeimg.com/200/200/people" alt="People">
   <figcaption>People</figcaption>
  </figure>
  <figure class="card">
   <img src="https://placeimg.com/200/200/arch" alt="Arch">
   <figcaption>Arch</figcaption>
  </figure>
  <figure class="card">
   <img src="https://placeimg.com/200/200/nature" alt="Nature">
   <figcaption>Nature</figcaption>
  </figure>
</section>
</body>
</html>

Métodos del DOM

Vamos a comenzar a ver cuales son los métodos que tiene el DOM para poder capturar elementos del documento HTML en variables Javascript.

Métodos en desuso

Existen algunos métodos en desuso, que han sido reemplazados por otros, y son:

  • getElementsByTagName(): imprime todos los elementos de cierta etiqueta.
  • getElementsByClassName(): imprime los elementos con cierta clase.
  • getElementsByName(): accede a través del atributo name. Se utiliza sobretodo en los elementos de formulario, donde es importante poner el atributo name porque cuando procesamos un formulario y enviamos esa información, gracias a dicho atributo name, el lenguaje de lado de servidor lo detecta como una variable de tipo POST o de tipo GET.
  • getElementById(): accede a los elementos con el id pasado como parámetro.

Ejm con getElementsByTagName()

console.log(document.getElementsByTagName("li"));
// Imprime en la consola todas las etiquetas.

Nota: recordar que lo que imprime la consola no es un array, es una colección HTML (HTMLCollection), parecido a los arrays, pero no igual, no soporta las mismas características que ellos, aunque sí comparte algunas.

Ejm con getElementsByClassName()

console.log(document.getElementsByClassName("card"));
// Imprime en consola todos los elementos con la clase card

Ejm con getElementsByName()

console.log(document.getElementsByName("nombre"));
// Imprime en consola los elementos con el atributo name = "nombre"

En el caso del método getElementsByName() nos va a devolver un NodeList() que es otro tipo de objeto parecido a un array, pero que tiene que ver con el DOM.

Nota: todas las propiedades que empiezan por on- son los eventos que tenemos.

Ejm con getElementById()

console.log(getElementById("menu"));
// Imprime todos los elementos con el id = "menu"

Los 3 primeros métodos: getElementsByTagName(), getElementsByClassName() y getElementsByName() han sido reemplazados por dos nuevos métodos:

  • querySelector(): si lo traducimos, significa «consulta de selector», el cual recibe como parámetro un selector válido de CSS (un id, un class, una etiqueta HTML que esté dentro de cierta clase, cualquier selector válido que no sea pseudo-clase o pseudo-elemento). Para este método, SÍ que hay que especificar el punto (.) en el caso de las clases, y la almohadilla (#) si se trata de un id. querySelector() hace referencia a que va a recibir un selector válido de CSS. Muy importante, sólo imprime el primer selector del tipo que hayamos especificado que haya encontrado en el documento HTML.
  • querySelectorAll(): el uso es el mismo que querySelector(), pero trae todos los selectores, no sólo uno.

Ejm con querySelector()

console.log(document.querySelector("#menu"));
// Imprime en consola el primer elemento con id = "menu"
// Si hay mas elementos no los imprime

Nota: aunque se pueden utilizar tanto querySelector() como getElementById() para mostrar elementos con un id específico, a nivel de rendimiento, getElementById() funciona mejor que querySelector(), ya que éste último tiene que hacer el filtro para detectar que se le pasa como parámetro (si es un class, un id…).

Ejm con querySelectorAll()

console.log(document.querySelectorAll("a"));
// Imprime una nodeList con todos los elementos
console.log(document.querySelectorAll("a")[1]);
// Imprime (como los arrays) el segundo elemento
// de la nodeList
console.log(document.querySelectorAll("#menu li"));
// Imprime las listas que se encuentran dentro
// del id = "menu"

Resumen

En la actualidad, los métodos que se están utilizando son:

  • getElementById()
  • querySelector()
  • querySelectorAll()

Tanto el método querySelector() como querySelectorAll() devolverán una nodeList(), que no es lo mismo que un array, aunque se parezcan.

Junto con los arrays, comparten la propiedad length, también comparten, no todo los métodos, pero sí algunos de ellos, como es por ejm el bucle forEach.

document.querySelectorAll("a").forEach(el => console.log(el));

A partir de este capítulo vamos a estar utilizando querySelector(), querySelectorAll() y getElementById().

getElementsByTagName(), getElementsByClassName() y getElementsByName() los vamos a dejar a un lado porque se considera mala práctica utilizarlos a día de hoy. Para ids vamos a utilizar getElementById(), para traernos el primer selector válido vamos a utilizar querySelector(), y para traernos todos, vamos a utilizar querySelectorAll().

Scroll al inicio