Simplificando a seleção de elementos no DOM usando JavaScript
- #JavaScript
Existem muitas maneiras de selecionar um elemento através da manipulação do DOM (Document Object Model). Os mais comuns entre os programadores são os métodos querySelector, querySelectorAll, GetElementById e GetElementByTagName.
Exemplos de utilização:
// seleciona por ID
const element = document.GetElementById("#id-elemento");
// Seleciona por classe
const elements = document.querySelectorAll(".class-elementos");
// seleciona por ID
const element = document.querySelector("#id-elemento");
// Seleciona por tag
const elements = document.getElementsByTagName(".tag-elementos");
Tão importante quanto saber utilizar estes métodos, é buscar alternativas que simplifique nossos códigos.
const q = (seletor) => document.querySelector(seletor);
const qa = (seletor) => document.querySelectorAll(seletor);
Este código JavaScript define duas funções de utilidade para selecionar elementos do DOM (Document Object Model):
q:
- Esta função recebe um seletor como argumento.
- Utiliza o método
document.querySelector()para selecionar o primeiro elemento no DOM que corresponde ao seletor especificado. - Retorna o elemento selecionado.
qa:
- Esta função também recebe um seletor como argumento.
- Utiliza o método
document.querySelectorAll()para selecionar todos os elementos no DOM que correspondem ao seletor especificado. - Retorna uma NodeList contendo todos os elementos selecionados.
Essas funções são formas abreviadas e convenientes de lidar com a seleção de elementos no DOM usando JavaScript, permitindo que você selecione elementos de forma rápida e concisa. Por exemplo:
// Seleciona o primeiro elemento com a classe "botao"
const botao = q('.botao');
// Seleciona todos os elementos com a classe "item"
const itens = qa('.item');
