Manejo del DOM #1: Nodos, selectores y elementos.

¿Que son los nodos?

Cada etiqueta del documento y cada texto del documento es un nodo, lo que nos da como resultado tener nodos de tipo elementos y nodos de tipo texto. Por ejemplo, un nodo de tipo elemento seria un <p></p> y un nodo de tipo texto seria lo que contenga dentro de la etiqueta <p></p>.

Con JavaScript podemos acceder a estos elementos del documento, a cada etiqueta HTML, podemos acceder a clases y a identificadores por medio del DOM.

Buscar elementos por su etiqueta

Para acceder a cada elemento del documento por su etiqueta podemos hacerlo con un método llamado .getElementsByTagName("p") y se usa de la siguiente forma:

// Buscar elementos por su etiqueta
let listItem = document.getElementsByTagName("li")

Este nos devuelve un HTMLCollection, este representa una colección genérica de elementos (objeto tipo array) y ofrece métodos y propiedades para seleccionarlos de la lista.

Buscar elementos por su nombre de clase

Para acceder a elementos por su nombre de clase podemos hacerlo con el método .getElementsByClassName("card") y se usa de la siguiente manera:

// Buscar elementos por su nombre de clase
let clases = document.getElementsByClassName("card")

Este método también nos devuelve un HTMLCollection con una lista con todas los elementos que tengan como nombre de clase el parámetro que le indicamos.

Buscar elementos por su nombre de formulario

Con estos dos métodos mencionados anteriormente, podemos acceder una lista de elementos buscándolos por nombre de etiqueta o por su nombre de clase, pero, en el caso que tengamos un formulario en nuestra página podemos acceder a elementos con su nombre de formulario y para eso se utiliza el método llamado .getElementsByName("buscar") y se usa de la siguiente manera:

// Buscar elementos por su nombre de formulario "name"
let nameForm = document.getElementsByName("buscar")

Este nos devuelve un NodeList es una coleccion de nodos, este no es un array, pero, es posible interactuar con .foreach() y tambien se puede convertir en array con Array.from.

Buscar elementos por su nombre de ID

Tambien podemos buscar elementos por su nombre de "id" con el método .getElementById("header") y se usa de la siguiente manera:

// Buscar elementos por su nombre de id
let id = document.getElementById("header")

Este nos devuelve la sintaxis HTML de la primer coincidencia que encuentre.

Con las nuevas actualizaciones del lenguaje han aparecido nuevos métodos que nos simplifican el uso de acceder a elementos del documento HTML, los 3 métodos vistos anteriormente han sido reemplazados por los métodos:

• .querySelector()
• .querySelectorAll()

En ambos métodos se debe especificar con un punto (.) cuando queramos buscar elementos por nombre de clase, y con un (hashtag, gatito, etc.) (#) cuando queramos buscar elementos por nombre de ID. .querySelector() nos devuelve la primer coincidencia encontrada, y, .querySelectorAll() nos devuelve todas las coincidencias encontradas.

Ambos métodos se usan de las siguiente manera:

let enlaces = document.querySelectorAll("a")
let card = document.querySelector(".card")

// nos devuelve todos los enlaces que existan
console.log(enlaces)
// nos devuelve el primer .card que exista
console.log(card)

En el caso de .querySelectorAll() puede compartir método como .foreach(), siguiendo el ejemplo anterior, recorriendo todos los enlaces:

// puede compartir metodos como en este ejemplo:
enlaces.forEach(el => {
  console.log(el)
})

Hasta acá hemos visto como podemos acceder a elementos del documento HTML y poder interactuar con ellos por medio del DOM. Hemos aprendido métodos que nos pueden ayudar a acceder a elementos HTML, poro, a día de hoy se utiliza mas el método .querySelector(), esto a medida que el programador lo requiera, ya que hay diferentes implementaciones que un método nos pueda ayudar mas que otro en el rendimiento de nuestra pagina según vaya creciendo el código.