Como encontrar e obter elementos HTML em JavaScript
Este artigo discutirá os procedimentos de encontrar e obter elementos HTML em JavaScript. Além disso, os exemplos relacionados a métodos getElementById (), getElementsByTagName (), getElementsByClassName () e QuerySelectorAll () serão demonstrados neste artigo. Então vamos começar!
Como encontrar e obter elementos html por id em javascript
A maioria dos desenvolvedores de JavaScript utilizou o getElementById () Método para encontrar e obter elementos HTML com IDs exclusivos. Se você passou um ID que não pertence a nenhum elemento HTML, o método getElementById () exibirá o valor nulo.
Sintaxe do método getElementById ()
documento.getElementById (ElementId)Aqui o "ElementId”Representa o ID exclusivo do elemento HTML que você deseja encontrar e obter em seu código JavaScript.
Exemplo: Encontre e obtenha elementos HTML por ID em JavaScript
Vamos adicionar elementos HTML, como um título com o
tag e três elementos de parágrafo com o
tag no exemplo a seguir. Observe que também adicionamos “ids”Com os elementos do parágrafo:
Isso é Linuxhint.com
Encontre e obtenha elementos html por id em javascript
Este é um programa JavaScript que utiliza o método "getElementsbyid"
Na próxima etapa, encontraremos e faremos com que o elemento tenha o ID “P1”Usando o“documento.getElementById ()”Método. Após o ding, mudaremos o conteúdo do elemento HTML recuperado:
Execute o programa acima do seu editor de código favorito ou qualquer caixa de areia de codificação on-line; No entanto, utilizaremos o JSBIN para esse fim:
A execução do programa JavaScript acima mencionado mostrará a seguinte saída:
Como encontrar e obter elementos html por tagname em javascript
Você pode utilizar o “getElementsByTagName ()”Javascript Método para encontrar e obter um elemento HTML específico pelo nome da tag.
Sintaxe do método getElementsByTagName ()
documento.getElementsByTagName (Tagname)Aqui, o nome da tag representa o nome da tag do elemento html que você deseja recuperar.
Exemplo: encontre e obtenha elementos html por tagname em javascript
O exemplo abaixo do ritmo encontrará e obterá todos os elementos html tendo o nome da tag "p”Usando o método getElementsByTagName (). Depois disso, ele exibirá o conteúdo do HTML presente no primeiro índice da coleção de objetos:
Isso é Linuxhint.com
Encontre e obtenha elementos html por nome de tag em javascript
Este é um programa JavaScript que utiliza o método "GetElementsByTagName"
Como você pode ver, o texto do primeiro parágrafo do nosso programa JavaScript é exibido com sucesso:
Como encontrar e obter elementos HTML por ClassName em JavaScript
O "getElementsbyclassName ()”O método é usado para encontrar e obter elementos HTML com a mesma classe. Ao utilizar o nome da classe, quando você tenta obter um elemento HTML, o intérprete JavaScript retornará todos os objetos pertencentes à mesma classe. Depois disso, você pode executar operações específicas nesses elementos HTML.
Sintaxe do método getElementsByClassName ()
documento.getElementsbyclassName (ClassName)Aqui o "nome da classe”Representa o nome da classe dos elementos HTML que você deve encontrar e entrar em seu programa.
Exemplo: Encontre e obtenha elementos HTML por ClassName em JavaScript
No exemplo seguinte, adicionamos um título e alguns elementos de parágrafo com o nome da classe “C1”:
Isso é Linuxhint.com
Encontre e obtenha elementos html por nome de classe em javascript
texto em primeiro paragrapa
texto em segundo parágrafo
Em seguida, procuraremos os elementos HTML que "têm“C1”Como classe deles, usando o método getElementsbyclassName () e armazenará as coleções dos objetos em“a”:
Aqui está a saída que obtivemos ao executar o programa JavaScript acima:
Como encontrar e obter elementos HTML pelo seletor CSS em JavaScript
Em html, o QuerySelectorAll () O método retorna um objeto nodelista estático que compreende uma coleção de elementos filhos de um elemento combinado com os seletores CSS especificados. Os números de índice são usados para encontrar e obter os nós, começando em 0.
Sintaxe do método querySelectorall ()
elemento.QuerySelectorAll (seletores)O método querySelectorAll () leva “Seletores”Como argumento, uma string dom compreende um ou mais seletores CSS válidos.
Exemplo: Encontre e obtenha elementos HTML por seletor CSS em JavaScript
No programa JavaScript abaixo, usamos o método QuerySelectorAll () para encontrar e obter os elementos HTML do parágrafo tendo “C1”Como nome de classe:
Isso é Linuxhint.com
Encontre e obtenha elementos html por nome de classe em javascript
texto em primeiro paragrapa
texto em segundo parágrafo
Confira a saída do método JavaScript querySelectorall ():
Conclusão
getElementById (), getElementsByTagName (), getElementsByClassName () e QuerySelectorAll () são os métodos JavaScript mais comuns que são usados para encontrar e obter elementos em um programa JavaScript. Você pode usar qualquer método mencionado para procurar um elemento HTML específico no código. Este artigo discutiu os procedimentos de encontrar e obter elementos HTML em JavaScript. Além disso, os exemplos relacionados a métodos getElementById (), getElementsByTagName (), getElementsByClassName () e QuerySelectorAll () também são demonstrados neste artigo.