Métodos para acessar/obter elementos no DOM | explicado com exemplos

JavaScript é a linguagem de script mais usada para alterar os elementos de uma página da web, verdade seja dita, nenhuma linguagem de script pode interagir diretamente com os elementos html. A linguagem de script interage com o Dom (Modelo de objeto de documento) e o DOM interage com os elementos HTML porque o DOM é uma interface de aplicativo neutro em linguagem (API).

Neste post, vamos aprender sobre diferentes métodos que podemos usar no JavaScript que nos ajudarão a alterar os elementos HTML usando a interface DOM.

Access \ Get Methods

O JavaScript nos fornece 5 métodos diferentes pelos quais podemos interagir com o DOM para acessar um elemento na página da web. Esses métodos são a saber:

• getElementById (id)
• getElementsbyclassName (ClassName)
• getElementsByTagName (Tagname)
• QuerySelector (CSS_Selector)
• QuerySelectorAll (CSS_Selector)

Uso do acesso \ Get Methods

Para demonstrar o uso desses métodos GET \ Access, precisamos primeiro configurar um arquivo HTML e vincular um arquivo JavaScript usando a seguinte linha:

Agora, precisamos configurar elementos dentro do nosso arquivo HTML, podemos fazer isso usando as seguintes linhas:

Eu tenho o id "demóide"


Eu tenho a aula "teste"
Eu também tenho a classe "teste"


Eu tenho a tag "Artigo"
Eu também tenho a tag "Artigo"


Eu tenho a consulta como "QuerySelect"


Eu tenho a consulta como "QuerySelectall"

Eu também tenho a consulta como "QuerySelectall"

Como você pode ver, temos alguns com eu ia, alguns com Aulas e nós usamos um tag também. A execução deste arquivo HTML nos fornecerá a seguinte saída:

Acessando um elemento usando seu id

O primeiro método que vamos testar é o getElementById (), Vamos acessar o elemento com o id “Demóide” E vamos mudar seu estilo usando as seguintes linhas de código em nosso arquivo JavaScript:

var deMoid = documento.getElementById ("demóide");
demóide.estilo.AntecedentesColor = "Amarelo";

Depois de executar o arquivo, obtemos a seguinte saída em nosso navegador:

Como você pode ver, fomos capazes de acessar o elemento usando seu EU IA e depois mude o estilo do elemento usando JavaScript.

Acessando elementos usando o nome da classe

O método getElementByClassName () retorna vários elementos com o mesmo nome de classe. Podemos acessar elementos usando o nome da classe com a seguinte linha de código:

var testclass = documento.getElementsByClassName ("teste");

Como temos 2 elementos com o nome da classe "teste", é por isso que nossa variável “TestClass” é da matriz de tipos e se quisermos alterar os atributos dos elementos dentro da matriz, temos que nos referir a eles usando seus índices de matriz como

TestClass [0].estilo.Border = "2px verde sólido";
TestClass [1].estilo.borda = "2px marrom sólido";

Ao executar, obtemos a seguinte saída:

Acessando elementos usando seu nome de tag

Para selecionar elementos usando seu nome de tag, usamos o método getElementByTagName (), Em nosso exemplo, para selecionar os elementos com o nome da tag "artigo" Usamos a seguinte linha:

var tagSelect = documento.getElementsByTagName ("Artigo");

Novamente, temos dois elementos com o mesmo nome de tag "artigo" Portanto, vamos mudar manualmente seus atributos usando seus índices de matriz:

TagSelect [0].inerhtml = 'eu mudei meu texto';
TagSelect [1].INNERHTML = 'Eu também mudei meu texto';

Se executarmos o arquivo agora, obtemos a seguinte saída em nosso navegador:

Como você pode ver, mudamos o texto dos elementos com o Nome da tag "Artigo".

Acessando um elemento usando seletor de consulta

Podemos selecionar elementos usando um seletor de consulta, para fazer isso usamos o método documento.QuerySelector (), e se quisermos selecionar um elemento com um específico eu ia, nós usamos o Símbolo "#" no seletor de consulta como

VAR QuerySelect = documento.QuerySelector ("#QuerySelect");

Depois de acessarmos o elemento, podemos alterar sua fronteira com a seguinte linha:

QuerySelect.estilo.borda = "1px vermelho sólido";

Você receberá o seguinte resultado em seu navegador:

Acessando um elemento usando todos os seletores de consulta

Podemos selecionar todos os elementos com a mesma consulta usando o método QuerySelectorAll (). Anexe a seguinte linha no arquivo JavaScript:

const Demoqueryall = documento.QuerySelectorAll (".QuerySelectall ");

Para alterar os atributos de ambos os elementos acessados ​​por este QuerySelectorAll (), use as seguintes linhas de código:

Demoqueryall.foreach ((consulta) =>
consulta.estilo.borda = "1px verde sólido";
);

Você obterá os seguintes resultados em seu navegador:

Isto é, para acessar elementos usando todos os métodos oferecidos pela JavaScript.

Conclusão

Existem 5 métodos principais fornecidos pelo JavaScript que nos ajudam. Neste post, aprendemos sobre todos os 5 métodos, implementamos todos esses métodos alterando os atributos dos elementos que acessamos. Precisamos da interface DOM para fazer todas essas alterações, porque nenhuma linguagem de script pode acessar diretamente os elementos HTML, em vez do DOM, funciona como uma API para a linguagem de script.