O JavaScript é usado para adicionar interatividade a uma página estática HTML; Mas para adicionar interatividade, precisa acessar os elementos HTML presentes no DOM. O JavaScript oferece vários métodos para acessar os elementos HTML presentes no DOM. Aqui discutiremos a maioria deles em grande detalhe:

Como acessar um elemento DOM por seu ID usando JavaScript

Um dos métodos mais comuns para acessar um elemento em html dom é getElementById () que acessa um elemento baseado no valor de seu atributo de identificação. O valor dos atributos de identificação deve ser único e não há dois elementos em uma única página HTML deve ter IDs semelhantes. Mesmo se houver vários elementos que tenham o mesmo ID, o getElementById () O método retorna apenas um elemento (o primeiro elemento com esse ID no arquivo HTML).

Agora vamos dar uma olhada em um exemplo para entender melhor como o getElementById () Método funciona.

Observação: O console do navegador é usado para a demonstração de exemplos neste artigo.

O seguinte arquivo HTML será usado para este exemplo; O JavaScript será adicionado dentro do Tags que são usadas especificamente para incorporar código JavaScript diretamente dentro de um arquivo HTML.

Como obter elementos em JavaScript do DOM?

Como acessar um elemento DOM por seu id?

getElementById ()

No arquivo html acima, temos um parágrafo com um ID único i.e. exemplo-id. Se quisermos acessar este elemento de parágrafo, podemos usar o getElementById () método:

Agora podemos usar a variável de parágrafo recém -criada para manipular o exemplo-id elemento diretamente do JavaScript E.G Se quisermos alterar o plano de fundo e a cor de texto do parágrafo, então:

Como acessar os elementos DOM por sua classe

O getElementsbyclassName () O método pode ser usado para obter vários elementos que têm o mesmo valor de atributo de classe. Para mostrar como o getElementsbyclassName () O método funciona, modificaremos nosso arquivo HTML da seguinte maneira:

Como obter elementos em JavaScript do DOM?

Como acessar os elementos DOM por sua classe?

getElementsbyclassName ()

O getElementsbyclassName () o método retorna todos os elementos que têm uma classe específica na forma de uma matriz. Portanto, se quisermos modificar apenas um dos elementos presentes dentro da matriz retornada, precisaremos acessá -lo com seu número de índice:

Podemos usar um loop for se quisermos aplicar as mesmas alterações em todos os elementos da matriz:

Como acessar os elementos DOM por sua tag

JavaScript também fornece o getElementsByTagName () Método que pode ser usado para acessar todos os elementos que possuem a mesma tag HTML:

Como obter elementos em JavaScript do DOM?

• getElementById () método


• getElementsbyclassName Método


• getElementsByName () método


• getElementsByTagName () Método


• Método querySelector ()


• método querySelectorAll ()

Podemos novamente usar um loop para aplicar as mesmas alterações a todos os elementos presentes na nova matriz:

Como acessar os elementos DOM usando os métodos de seletores de consulta

JavaScript também tem o QuerySelector () e a QuerySelectorAll () Métodos que podem ser usados ​​para acessar elementos html dom. Para acessar um único elemento, podemos usar o QuerySelector () método; Se houver vários elementos com o mesmo id ou classe, o QuerySelector () Método retorna o primeiro elemento:

Como obter elementos em JavaScript do DOM?

getElementById () método

getElementsbyclassName Método

getElementsByName () método

getElementsByTagName () Método

Método querySelector ()

método querySelectorAll ()

O # sinal é o seletor para o atributo de identificação, enquanto o . O sinal é o seletor para o atributo de classe.

O QuerySelectorAll () O método retorna uma matriz contendo todos os elementos DOM com um nome de classe específico ou um ID:

Como obter elementos em JavaScript do DOM?

getElementById () método

getElementsbyclassName Método

getElementsByName () método

getElementsByTagName () Método

Método querySelector ()

método querySelectorAll ()

Podemos realizar métodos diferentes, como .para cada() método nas matrizes retornadas pelo QuerySelectorAll (). Esses métodos não funcionam com as matrizes devolvidas por getElement métodos.

Conclusão

Acessar elementos HTML DOM e torná-los interativos através do JavaScript é a parte mais básica, mas essencial de qualquer trabalho de Develoepr front-end. Aqui listamos os cinco métodos mais comuns usados ​​no JavaScript para acessar elementos DOM.