Este tutorial demonstrará os diferentes métodos para selecionar elementos DOM em JavaScript.
Quais são as diferentes maneiras de selecionar elementos DOM em JavaScript?
Use os seguintes métodos para selecionar elementos DOM em JavaScript:
- método getElementById()
- método getElementsByClassName()
- método getElementsByTagName()
- método querySelector()
- método querySelectorAll()
Método 1: Selecionar elementos DOM usando o método “getElementById()”
Para selecionar elementos DOM, use o botão “ getElementById() ” baseado no id atribuído do elemento. Este método seleciona um único elemento por seu único “ eu ia ” atributo. Ele fornece uma referência ao elemento com o id especificado e retorna “ nulo ” se nenhum elemento correspondente for encontrado.
Sintaxe
Use a sintaxe abaixo fornecida para o método getElementById():
documento. getElementById ( 'idNome' )
Aqui o ' idName ” é o nome de um atributo id atribuído a um elemento.
Exemplo
Em um arquivo HTML, crie dois cabeçalhos em um elemento div usando o “ h4 ' marcação. Atribua ids ao elemento div e cabeçalhos “h4” elementos denominados “ div ' e ' cabeçalho ”, respectivamente. Adicione o atributo style ao elemento div para alinhá-lo no centro. Além disso, atribua uma classe “ seção ” ao segundo cabeçalho que muda de cor:
< div eu ia = 'div' estilo = 'alinhamento de texto:centro;' >< h4 eu ia = 'cabeçalho' > Acessar elementos DOM usando métodos diferentes < / h4 >
< h4 aula = 'seção' eu ia = 'cabeçalho' > Selecione elementos DOM em JavaScript usando o método 'getElementById ()'
< / h4 >
< / div >
Agora, vamos obter o “ div ” elemento usando seu id atribuído com a ajuda do “ getElementById() ” método:
era getById = documento. getElementById ( 'div' ) ;Imprima o elemento contra o id “ div ” no console:
console. registro ( getById ) ;Pode-se ver que o elemento HTML necessário foi recuperado com sucesso:
Método 2: Selecionar elementos DOM usando o método “getElementsByClassName ()”
Você também pode selecionar o elemento DOM usando sua classe atribuída com a ajuda de “ getElementsByClassName() ” método. Ele seleciona uma lista de elementos por seu nome de classe. Ele gera um objeto HTMLCollection ativo, um objeto semelhante a uma matriz que contém todos os elementos com o nome de classe especificado.
Sintaxe
A seguinte sintaxe é utilizada para o método “getElementsByClassName()”:
documento. getElementsByClassName ( 'nome da classe' )Exemplo
Aqui, vamos pegar o elemento que contém a classe “ seção ” e imprima no console:
era getByClass = documento. getElementsByClassName ( 'seção' ) ;console. registro ( getByClass ) ;
Como você pode ver na saída, uma matriz de comprimento 1 retornou que contém um elemento “ h4 ” que pertence à classe “ seção ”:
Método 3: Selecionar elementos DOM usando o método “getElementsByTagName ()”
Caso não haja id ou classe atribuído a um elemento, use o “ getElementsByTagName() ” para obter o elemento pelo nome da tag. Ele também retorna um objeto HTMLCollection ativo, que é um objeto semelhante a uma matriz que contém todos os elementos que possuem o nome da tag especificado.
Sintaxe
Siga a sintaxe fornecida para selecionar elementos com base no nome da tag:
getElementsByTagName ( tagName )Exemplo
Invoque o método “getElementsByTagName()” passando o nome da tag “ h4 ”. Em seguida, imprima a lista de elementos que correspondem ao nome da tag especificado no console:
era getByTag = documento. getElementsByTagName ( 'h4' ) ;console. registro ( getByTag ) ;
Saída
Método 4: Selecionar elementos DOM usando o método “querySelector ()”
Use o ' querySelector() ” para obter o elemento DOM. Ele seleciona um único elemento que corresponde a um seletor CSS especificado. Ele retorna o primeiro elemento correspondente encontrado no documento. Se nenhum elemento for correspondido, ele fornecerá “ nulo ”.
Sintaxe
A sintaxe abaixo mencionada é utilizada para o método “querySelector()”:
documento. querySelector ( atributo )Aqui, o atributo é um seletor CSS, como um id ou classe como “ #minha identidade ” “ .minha classe “.
Exemplo
Chame o método “querySelector()” e passe o id “ #cabeçalho ” para obter os elementos que contêm o mesmo id:
era getByquery = documento. querySelector ( '#cabeçalho' ) ;console. registro ( getByquery ) ;
Ele fornece o primeiro elemento correspondente como uma saída:
Método 5: Selecionar elementos DOM usando o método “querySelectorAll ()”
Se você deseja selecionar todos os elementos que contêm o atributo especificado (id ou classe), use o botão “ querySelectorAll() ” método. Ele seleciona uma lista de elementos que correspondem a um determinado seletor de CSS definido. Ele fornece um objeto NodeList que contém todos os elementos no documento que correspondem ao seletor CSS específico.
Sintaxe
Use a seguinte sintaxe para obter a lista de elementos:
documento. querySelectorAll ( atributo )Exemplo
Para obter a lista do elemento correspondente que contém o id “ cabeçalho ' com o ' querySelectorAll() ” e imprimir em elementos no console:
era getByqueryAll = documento. querySelectorAll ( '#cabeçalho' ) ;console. registro ( getByqueryAll ) ;
Saída
Isso é tudo sobre como selecionar elementos DOM em JavaScript.
Conclusão
Para selecionar os elementos DOM em JavaScript, use o botão “ getElementById() ”, “ getElementsByClassName() ”, “ getElementsByTagName() ”, “ querySelector() ', ou o ' querySelectorAll() ” método. Esses métodos fornecem maneiras diferentes de selecionar elementos do DOM com base em seus identificadores exclusivos, nomes de classe, nomes de tags ou seletores de CSS. Este tutorial demonstrou os diferentes métodos para selecionar elementos DOM em JavaScript.