Simplificando a seleção de elementos no DOM usando 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):

1. 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.

1. 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');