Os elementos HTML podem ser acessados ​​usando os métodos JavaScript. Os métodos JavaScript acessam os elementos html da DOM (estrutura lógica de árvore dos documentos da web). O JavaScript fornece suporte de cinco métodos que usam nome, ID, ClassName, Tagname ou seletor CSS para acessar os objetos. Ao acessar elementos HTML usando JavaScript, você pode manipular elementos HTML. Este artigo fornece uma demonstração de maneiras possíveis de acessar elementos HTML usando métodos JavaScript.

Como acessar elementos HTML usando métodos JavaScript

Os cinco métodos JavaScript ajudam a acessar os elementos HTML e esses métodos são descritos abaixo.

Como acessar elementos HTML por id

O atributo de identificação identifica exclusivamente o elemento HTML, e o seguinte método JavaScript ajudaria a obter os elementos html por id.

O ID refere -se ao elemento HTML e é usado pelo JavaScript para acessar esse elemento HTML. O objeto (no dom) que corresponde ao ID seria devolvido.

Exemplo:

O código fornecido abaixo exerce o getElementById () Método de JavaScript.

O código acima acessa o elemento que possui id = un1 e, em seguida, o valor desse elemento é manipulado para “Hello World!”.

Saída

Da saída, observa -se que o conteúdo original de

foi alterado para “Hello World!”.

Como acessar elementos HTML por nome

O atributo de nome dos elementos também pode ser usado pelo JavaScript para acessar elementos HTML. No entanto, um único nome pode ser associado a vários elementos HTML. O código fornecido utiliza o getElementsByName () método.

Dois parágrafos têm os mesmos nomes; Assim, temos que definir o número de índice de cada parágrafo (no momento do uso do método). O número de índice do primeiro parágrafo é referido como [0] e o segundo parágrafo como [1].

Saída

Observa -se a partir da saída que o conteúdo do parágrafo (no índice [1]) foi alterado.

Como acessar elementos HTML por tagname

O método JavaScript getElementsByTagName () é usado aqui para acessar os elementos por seus nomes de tags.

O código acima acessa o parágrafo (no índice [0]) e altera seu valor para “o parágrafo é acessado”.

Observação: Um documento HTML compreende várias tags e se você vai acessá -las usando o JavaScript's getElementsByTagName () Método, você deve mencionar o número de índice do elemento.

Saída

A saída mostra que o conteúdo do parágrafo no índice 0 foi alterado.

Como acessar elementos HTML por ClassName

O getElementsbyclassName () O método de JavaScript é usado aqui para acessar os elementos HTML.

O código acima acessa a classe chamada “dois”E muda seu conteúdo. Um documento pode conter várias classes dos mesmos nomes; Assim, um número de índice também é obrigatório neste caso.

Saída

A saída mostra que o conteúdo do nome da classe (nomeado dois) foi mudado.

Como acessar elementos HTML por QuerySelector

Um elemento HTML pode ter classes e IDs, que podem ser usados ​​para alterar os estilos dos elementos. O QuerySelector () O método de JavaScript permite que você obtenha os elementos que correspondem ao seletor CSS específico. O QuerySelector é ainda dividido em dois métodos;

• O QuerySelector () O método retorna o primeiro elemento (que corresponde à expressão)
• O QuerySelectorAll () Método retorna todos os elementos correspondentes

Observação: Para acessar a aula, você deve colocar o ponto (.) Antes do nome da classe e para o ID, você deve usar o sinal (#) antes do nome do ID.

Exemplo 1: Usando o método QuerySelector ()

O código escrito abaixo usa o QuerySelector () Método para obter o primeiro elemento que corresponde à condição.

No código acima, o QuerySelector () o método é aplicado aos elementos tendo class = "lh".

Saída

A saída mostra que o primeiro parágrafo (que corresponde ao nome e ID da classe) foi acessado e seu conteúdo é atualizado.

Exemplo 2: Usando o método QuerySelectorAll ()

Como discutido anteriormente o QuerySelector () Método apenas acessa a primeira partida. Você pode usar o QuerySelectorAll () Método para acessar o elemento de sua escolha, como fizemos no exemplo a seguir.

O código acima pratica o QuerySelectorAll () Método para acessar os elementos que têm id = “un““. O número do índice é obrigatório para colocar e usamos [1] aqui.

Saída

Conclui -se a partir da saída que os seletores CSS, como classe e ID, foram usados ​​pelo QuerySelectorAll () Método para acessar/alterar o conteúdo do parágrafo no índice 1.

Conclusão

O JavaScript pode acessar elementos HTML usando o Nome, ID, ClassName, Tagname e QuerySelector dos elementos html. Esses métodos também podem ser usados ​​para manipular o conteúdo de um elemento HTML. Este artigo demonstra os cinco métodos JavaScript que acessam os elementos HTML por vários meios. O ID, ClassName e Tagname Os métodos tendem a acessar os elementos HTML diretamente. No entanto, o QuerySelector ()/QuerySelectorAll () O método utiliza os seletores de CSS para acessar e alterar os elementos HTML.