Manipular elementos HTML com JavaScript é uma das tarefas mais comuns no desenvolvimento web moderno, especialmente em aplicações que exigem interatividade em tempo real. Para isso, é fundamental saber como buscar, filtrar e modificar elementos do DOM de forma eficiente. Neste artigo vamos explorar diversas técnicas para selecionar e filtrar elementos HTML com base em atributos, classes e outros critérios, utilizando métodos como “getElementById” e “querySelector”.
Por que utilizar filtros?
Filtros de elementos HTML são indispensáveis para aplicações interativas, permitindo manipular apenas os elementos necessários de uma página. Isso melhora a eficiência do código, otimiza o desempenho e enriquece a experiência do usuário. A seguir, veremos como aplicar esses filtros de maneira prática e eficiente com JavaScript.
getElementById
O método “getElementById” é usado para selecionar um único elemento com base no atributo id. É uma das maneiras mais rápidas e eficientes para buscar um elemento e ideal para casos em que o identificador do elemento é único dentro da página.
No exemplo abaixo vemos como capturar o valor de um campo de entrada (input) e exibi-lo dinamicamente enquanto o usuário digita.
<body>
<h1>Exemplo de Uso do getElementById</h1>
<input id="userInput" type="text" placeholder="Digite algo" />
<p id="displayText">O texto aparecerá aqui.</p>
<script type="text/javascript" id="perfmatters-delayed-styles-js">!function(){const e=["keydown","mousemove","wheel","touchmove","touchstart","touchend"];function t(){document.querySelectorAll("link[data-pmdelayedstyle]").forEach(function(e){e.setAttribute("href",e.getAttribute("data-pmdelayedstyle"))}),e.forEach(function(e){window.removeEventListener(e,t,{passive:!0})})}e.forEach(function(e){window.addEventListener(e,t,{passive:!0})})}();</script><script type="text/javascript" id="perfmatters-delayed-scripts-js">const perfmattersUserInteractions=["keydown","mousemove","wheel","touchmove","touchstart","touchend"];perfmattersUserInteractions.forEach(function(event){window.addEventListener(event,pmTriggerDelayedScripts,{passive:!0})});function pmTriggerDelayedScripts(){pmLoadDelayedScripts();perfmattersUserInteractions.forEach(function(event){window.removeEventListener(event, pmTriggerDelayedScripts,{passive:!0});});}function pmLoadDelayedScripts(){document.querySelectorAll("script[data-pmdelayedscript]").forEach(function(elem){elem.setAttribute("src",elem.getAttribute("data-pmdelayedscript"));});}</script></body>
<script>
const inputField = document.getElementById('userInput');
const displayText = document.getElementById('displayText');
inputField.addEventListener('input', () => {
displayText.textContent = inputField.value;
});
</script>
No código acima, o “getElementById” seleciona o campo de entrada (input) e o parágrafo (p) pelo atributo id. O “addEventListener” escuta o evento input, disparado sempre que o usuário digita algo. Por fim, o “textContent” atualiza o conteúdo do parágrafo com o valor atual do campo de entrada.
getElementsByClassName
Já o método “getElementsByClassName” permite selecionar todos os elementos de uma página que compartilham uma mesma classe. Ele retorna uma HTMLCollection, que é uma lista de elementos que pode ser acessada por índice ou iterada para manipulações em massa.
Esse método é útil para aplicar alterações em grupos de elementos que possuem o mesmo estilo ou funcionalidade, como mudar a cor de várias caixas com a mesma classe.
<body>
<h1>Exemplo de Uso do getElementsByClassName</h1>
<div class="box">Caixa 1</div>
<div class="box">Caixa 2</div>
<div class="box">Caixa 3</div>
<button id="changeColor">Mudar Cor</button>
<script type="text/javascript" id="perfmatters-delayed-styles-js">!function(){const e=["keydown","mousemove","wheel","touchmove","touchstart","touchend"];function t(){document.querySelectorAll("link[data-pmdelayedstyle]").forEach(function(e){e.setAttribute("href",e.getAttribute("data-pmdelayedstyle"))}),e.forEach(function(e){window.removeEventListener(e,t,{passive:!0})})}e.forEach(function(e){window.addEventListener(e,t,{passive:!0})})}();</script><script type="text/javascript" id="perfmatters-delayed-scripts-js">const perfmattersUserInteractions=["keydown","mousemove","wheel","touchmove","touchstart","touchend"];perfmattersUserInteractions.forEach(function(event){window.addEventListener(event,pmTriggerDelayedScripts,{passive:!0})});function pmTriggerDelayedScripts(){pmLoadDelayedScripts();perfmattersUserInteractions.forEach(function(event){window.removeEventListener(event, pmTriggerDelayedScripts,{passive:!0});});}function pmLoadDelayedScripts(){document.querySelectorAll("script[data-pmdelayedscript]").forEach(function(elem){elem.setAttribute("src",elem.getAttribute("data-pmdelayedscript"));});}</script></body>
<script>
const boxes = document.getElementsByClassName('box');
const button = document.getElementById('changeColor');
button.addEventListener('click', () => {
for (let box of boxes) {
box.style.backgroundColor = 'lightblue';
}
});
</script>
Aqui, o “getElementsByClassName” é utilizado para selecionar todas as caixas com a classe “box”. Quando o botão é clicado, o JavaScript percorre a coleção e altera o fundo de todas as caixas para “lightblue”.
querySelector
Se você precisa de maior flexibilidade para selecionar elementos, o “querySelector” é uma boa opção. Esse método utiliza um seletor CSS e retorna o primeiro elemento que corresponde ao seletor. Ele é bastante versátil, permitindo a combinação de classes, ids, e pseudo-classes CSS em uma única busca.
Por exemplo, é possível selecionar apenas o primeiro botão dentro de uma seção específica e aplicar um estilo.
<body>
<h1>Exemplo de Uso do querySelector</h1>
<section>
<button class="btn">Botão 1</button>
<button class="btn">Botão 2</button>
</section>
<script type="text/javascript" id="perfmatters-delayed-styles-js">!function(){const e=["keydown","mousemove","wheel","touchmove","touchstart","touchend"];function t(){document.querySelectorAll("link[data-pmdelayedstyle]").forEach(function(e){e.setAttribute("href",e.getAttribute("data-pmdelayedstyle"))}),e.forEach(function(e){window.removeEventListener(e,t,{passive:!0})})}e.forEach(function(e){window.addEventListener(e,t,{passive:!0})})}();</script><script type="text/javascript" id="perfmatters-delayed-scripts-js">const perfmattersUserInteractions=["keydown","mousemove","wheel","touchmove","touchstart","touchend"];perfmattersUserInteractions.forEach(function(event){window.addEventListener(event,pmTriggerDelayedScripts,{passive:!0})});function pmTriggerDelayedScripts(){pmLoadDelayedScripts();perfmattersUserInteractions.forEach(function(event){window.removeEventListener(event, pmTriggerDelayedScripts,{passive:!0});});}function pmLoadDelayedScripts(){document.querySelectorAll("script[data-pmdelayedscript]").forEach(function(elem){elem.setAttribute("src",elem.getAttribute("data-pmdelayedscript"));});}</script></body>
<script>
const firstButton = document.querySelector('section .btn');
firstButton.addEventListener('click', () => {
firstButton.textContent = 'Clicado!';
});
</script>
querySelectorAll
Se o objetivo for selecionar todos os elementos que correspondem a um seletor, você pode utilizar o “querySelectorAll”. Esse método é indicado quando precisamos realizar ações em vários elementos ao mesmo tempo, como alterar o estilo de todos os links de uma lista ou adicionar um evento de clique em todos os botões de uma página.
<body>
<h1>Exemplo de Uso do querySelectorAll</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
<script type="text/javascript" id="perfmatters-delayed-styles-js">!function(){const e=["keydown","mousemove","wheel","touchmove","touchstart","touchend"];function t(){document.querySelectorAll("link[data-pmdelayedstyle]").forEach(function(e){e.setAttribute("href",e.getAttribute("data-pmdelayedstyle"))}),e.forEach(function(e){window.removeEventListener(e,t,{passive:!0})})}e.forEach(function(e){window.addEventListener(e,t,{passive:!0})})}();</script><script type="text/javascript" id="perfmatters-delayed-scripts-js">const perfmattersUserInteractions=["keydown","mousemove","wheel","touchmove","touchstart","touchend"];perfmattersUserInteractions.forEach(function(event){window.addEventListener(event,pmTriggerDelayedScripts,{passive:!0})});function pmTriggerDelayedScripts(){pmLoadDelayedScripts();perfmattersUserInteractions.forEach(function(event){window.removeEventListener(event, pmTriggerDelayedScripts,{passive:!0});});}function pmLoadDelayedScripts(){document.querySelectorAll("script[data-pmdelayedscript]").forEach(function(elem){elem.setAttribute("src",elem.getAttribute("data-pmdelayedscript"));});}</script></body>
<script>
const links = document.querySelectorAll('ul li a');
links.forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
alert(`Você clicou no ${link.textContent}`);
});
});
</script>
No exemplo acima, o “querySelectorAll” é utilizado para selecionar todos os links dentro de uma lista não ordenada. Em seguida, um evento de clique é adicionado a cada link, e um alerta é mostrado com o texto do link clicado.
Conclusão
Filtrar e manipular elementos HTML com JavaScript é uma habilidade essencial para criar páginas interativas e dinâmicas. Através dos métodos discutidos neste artigo, você pode selecionar elementos de maneira eficiente e aplicar ações ou mudanças em um ou mais deles. Conhecer a fundo as diferenças entre esses métodos e entender quando usá-los vai otimizar seu trabalho e garantir um código mais limpo e eficiente.