<aside> 📢 Página dedicada para estudos da linguagem JavaScript
</aside>
DOM, Document Object Model, é a representação dos objetos que compreendem a estrutura de um documento web, ele representa a página web, com isso ele pode modificar e manipular a estrutura, estilo e conteúdo do documento, possibilitando a interface do sistema se tornar mais dinâmica.
O DOM é um mapa da página web. Ele organiza todos os elementos da sua página, como se fossem árvores com galhos e folhas. Cada elemento, como um botão, uma imagem ou um parágrafo, é um nó nesse mapa.
O DOM não é o HTML em si, mas sim uma representação dele. Ele permite que o JavaScript interaja com a página web, modificando, adicionando ou removendo elementos.
Por exemplo, se você quiser mudar a cor de um botão, o JavaScript usa o DOM para encontrar o botão, acessar sua propriedade de cor e altera-la.
É como se você tivesse um mapa da sua cidade e pudesse usar ele para encontrar um restaurante, mudar o nome de uma rua ou até mesmo adicionar um novo prédio. O DOM é como esse mapa, te dando o poder de manipular a sua página web!
Para pegar todos os botões de uma vez, o Enzo pode usar o método querySelectorAll(). Esse método retorna uma lista de todos os elementos que correspondem ao seletor que você passa como parâmetro.
Por exemplo, document.querySelectorAll('button') retornará todos os botões da página.
Lembre-se que o querySelectorAll() retorna uma NodeList, que é um arraylike object. Isso significa que você pode usar métodos de array para iterar sobre os elementos da lista.
Além do querySelectorAll(), existem outros métodos que podem ser muito úteis para manipular elementos na página:
querySelector(): Retorna o primeiro elemento que corresponde ao seletor passado como parâmetro. Se nenhum elemento for encontrado, ele retorna null.getElementById(): Retorna o elemento que possui o ID especificado. É muito útil para acessar elementos específicos que você deseja manipular.getElementsByClassName(): Retorna uma coleção de todos os elementos que possuem a classe especificada.getElementsByTagName(): Retorna uma coleção de todos os elementos que possuem a tag especificada.Lembre-se que cada método tem suas particularidades e é importante escolher o método mais adequado para a sua necessidade.