¿Cómo seleccionar elementos?

Uno de los conceptos básicos de JavaScript para web es la manipulación de elementos HTML.

Para comenzar a manipular un elemento primero debemos conseguirlo mediante alguno de los siguientes métodos:

getElementById()

Nos ayuda a conseguir un elemento por medio de su identificador (id).

const element = document.getElementById("mi-id");

getElementByClassName()

Nos ayuda a conseguir el primer elemento encontrado en el documento con dicha clase (class).

const element = document.getElementsByClassName("mi-clase");

getElementsByTagName()

Nos ayuda a conseguir todos los elementos que sean de dicho tipo de etiqueta.

const elements = document.getElementsByTagName("div");

querySelector()

Nos ayuda a conseguir el primer elemento en el documento con dicho selector (como el que usaríamos en CSS).

Para conseguir elemento por class

const element = document.querySelector(".mi-clase");

Para conseguir elemento por id

const element = document.querySelector("#mi-id");

Para conseguir elemento por etiqueta (tagName)

const element = document.querySelector("div");

Y cualquier otro tipo de selector tan simple o tan elaborado como sea

const element = document.querySelector(`[data-theme="dark"]`);

querySelectorAll()

Nos ayuda a conseguir todos los elementos que cumplan con el selector proporcionado

const elements = document.querySelectorAll("div");

Comentarios

Rutas relacionadas

Web Dev (Frontend)