O Document Object Model (DOM) é a representação estrutural de um documento HTML. O DOM é uma árvore de nós que o navegador cria para cada página da web na Internet.

O DOM é orientado a objetos. Cada elemento no DOM tem seu próprio conjunto de atributos e métodos que você pode acessar usando JavaScript.

Neste artigo tutorial, você aprenderá como usar as funções do seletor DOM para acessar os elementos de uma página da web.

Como acessar os elementos DOM

Você pode acessar o elemento DOM de nível superior de uma página da web por meio do objeto de documento global. Por exemplo, se você tiver uma página da web como a seguinte:

Bem vinda


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.




Cerca de


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.







instagram viewer



Artigos



Artigo Título Um


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 consulte Mais informação 





Artigo Título Dois


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 consulte Mais informação 





Artigo Título Três


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 consulte Mais informação 





Artigo Título Quatro


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 consulte Mais informação 

Digitando documento no console do navegador e pressionar Enter produzirá o seguinte resultado:

A saída em seu console é interativa. Você pode clicar no cabeça e corpo elementos para expandi-los. Isso produzirá o seguinte resultado:

Cada elemento de seção no tag também é expansível. Dependendo da estrutura de uma página da web, os elementos continuarão se expandindo para revelar mais elementos. Isso deve dar a você uma compreensão mais clara da estrutura do DOM.

Relacionado: O herói oculto dos sites: Compreendendo o DOM

O objeto do documento tem uma propriedade especial, corpo, representando o elemento do corpo. Portanto, para acessar o elemento do corpo, você pode digitar o seguinte no console:

document.body

Isso produzirá a seguinte saída:

Mas isso é o mais longe que você pode ir usando as propriedades do objeto. Cada página tem um cabeçalho e um corpo, mas, de outra forma, é única. Então digitando document.body.section ou qualquer coisa semelhante simplesmente não funcionará como você gostaria. Em vez disso, existem métodos que você pode chamar no objeto de documento para acessar elementos específicos.

O que são seletores de elemento DOM?

Os seletores de elemento DOM são um grupo de métodos JavaScript que você pode usar no objeto de documento para acessar elementos em uma página da web. Os seletores de elemento DOM têm duas categorias - seletores únicos e múltiplos.

Essas funções atuam de maneira semelhante aos seletores CSS. Eles permitem que você recupere elementos com base em seu nome de tag ou em seus atributos de id e classe. Você pode até mesmo buscar elementos usando qualquer seletor CSS.

Relacionado: Como direcionar parte de uma página da web usando seletores CSS

Os seletores de elemento único são:

• getElementById ()
• querySelector ()

Os seletores de vários elementos são:

• getElementsByTagName ()
• getElementsByClassName ()
• querySelectorAll ()

O seletor de elemento DOM que você usa depende do (s) elemento (s) aos quais você está tentando obter acesso.

Usando seletores de elemento DOM único

Você verá principalmente seletores em aplicativos JavaScript. Então, vamos nos afastar do console. Crie um arquivo JavaScript e vincule-o ao seu arquivo HTML usando a seguinte tag de script:

Onde o valor src é o nome do seu arquivo JavaScript. Coloque esta tag de script antes da tag de fechamento do corpo, .

O getElementById () O método fornece acesso a um único elemento em uma página da web usando o valor de seu ID. No documento HTML acima, existem vários elementos com IDs. Para atingir o div elemento com o ID “article-3”, você pode adicionar o seguinte código ao seu arquivo JavaScript:

value = document.getElementById ('artigo-3')

Agora, o elemento div com o artigo-3 ID e todas as suas propriedades correspondentes são acessíveis a partir do valor variável. Você pode imprimir o valor variável para o console usando a seguinte linha de código:

console.log (valor)

Você verá o nome da classe atribuído ao elemento div, bem como outros atributos importantes, como o HTML interno.

O outro seletor de elemento único é o querySelector (). Esta função é mais versátil, pois você pode passar para ela qualquer string do seletor CSS. No entanto, você ainda pode usá-lo para selecionar um elemento por vez.

Por exemplo, há uma única classe no layout HTML acima - artigos. Quatro elementos div usam esta classe, mas o querySelector () função retornará apenas o primeiro elemento que possui a classe "artigos".

Usando querySelector () com uma classe

Adicione o seguinte código no final do seu script:

value = document.querySelector ('. artigos')
console.log (valor)

Isso só retornará o primeiro div elemento com uma classe “artigos”. Observe que você especifica o seletor no mesmo formato de um seletor CSS. Em CSS, um ponto inicial especifica um nome de classe.

Usando querySelector () com um ID

value = document.querySelector ('# article-3')
console.log (valor)

Este código retornará o único elemento com um ID de “artigo-3”, o terceiro div elemento com uma classe “artigos”. Novamente, a string do seletor usa sintaxe CSS padrão, com um # símbolo especificando um ID.

Usando vários seletores de elemento DOM

As funções de seletor restantes recuperam grupos de elementos. Eles são getElementsByTagName (), getElementsByClassName (), e querySelectorAll ().

Usando getElementsByTagName ()

O getElementsByTagName () seletor busca um grupo de elementos com o mesmo nome de tag. Por exemplo, se você deseja selecionar todos os H2 elementos em uma página da web, você pode usar o seguinte código:

value = document.getElementsByTagName ('h2')
console.log (valor)

Isso armazena todos os elementos h2 em uma coleção HTML chamada valor.

Usando getElementsByClassName ()

O getElementsByClassName () selector retorna uma coleção de elementos com o mesmo nome de classe.

value = document.getElementsByClassName ('artigos')
console.log (valor)

Inserir o código acima em seu arquivo JavaScript retornará os quatro elementos div com o nome da classe “artigos” no console do navegador.

Usando querySelectorAll ()

O querySelectorAll () método retorna uma lista de nós de todos os elementos que correspondem ao seletor fornecido. Para acessar todos os elementos de parágrafo na seção do blog, você pode usar o seguinte código:

value = document.querySelectorAll ('# blog p')
console.log (valor)

Você pode até incluir vários seletores na string, separando cada um com uma vírgula, assim como no CSS:

value = document.querySelectorAll ('h2, .articles')
console.log (valor)

Use seletores DOM para criar páginas da web dinâmicas

Neste ponto, você deve ter um entendimento claro do DOM e de como ele funciona. Você também deve conhecer os diferentes seletores único e múltiplo, bem como como usá-los.

Ainda assim, obter acesso aos elementos HTML é apenas a primeira etapa do que você pode fazer com os seletores DOM. Os seletores DOM irão ajudá-lo a desenvolver os aspectos funcionais do seu site, como lidar com eventos onclick e onscroll.

Como tornar seu site responsivo e interativo com CSS e JavaScript

Você configurou seu site com HTML e CSS, mas agora precisa adicionar lógica. Aqui está o que fazer.

Leia a seguir

Sobre o autor