Acessando o DOM
Agora que entendemos o que é o DOM e os fundamentos de HTML e CSS, é hora de aprender como acessar esse modelo de objeto. Vamos dar uma olhada em alguns conceitos fundamentais!
Seleção Simples com getElementById
Para começar, podemos selecionar um elemento específico usando o método getElementById
. Isso é útil quando queremos pegar um elemento com um ID específico. Olhe só:
var meuTitulo = document.getElementById('meuTitulo');
Aqui, assumimos que temos um elemento com o ID “meuTitulo”. Fácil, certo?
Seleção por Tag com getElementsByTagName
Às vezes, queremos selecionar vários elementos com a mesma tag. O método getElementsByTagName
é o herói aqui:
var paragrafos = document.getElementsByTagName('p');
Agora, todos os parágrafos estão nas mãos da nossa variável paragrafos
.
Seleção por Classe com getElementsByClassName
Se quisermos pegar elementos pela classe deles, usamos o getElementsByClassName
:
var elementosAzuis = document.getElementsByClassName('azul');
Aqui, estamos assumindo que todos os elementos azuis têm a classe “azul”.
Seleção Avançada com querySelector e querySelectorAll
Para uma seleção mais precisa, podemos usar querySelector
para selecionar o primeiro elemento que corresponde a um seletor CSS:
var primeiroParagrafo = document.querySelector('p');
E se precisarmos de todos os elementos que correspondem, usamos querySelectorAll
:
var todosOsParagrafos = document.querySelectorAll('p');
Você está pronto para começar a manipular o DOM com esses métodos simples. Vá em frente e experimente, pois a prática leva à maestria! No módulo 2 a seguir, discutiremos como alterar e interagir com esses elementos específicos. Te espero lá.