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