Quais são as diferentes maneiras de selecionar elementos DOM em JavaScript

Enquanto trabalha com o JavaScript, os desenvolvedores podem precisar selecionar elementos DOM para diferentes fins. Por exemplo, modificando o conteúdo ou estilo da página da web, respondendo a eventos de usuário, acessando dados em páginas da web e assim por diante. Em resumo, selecionar e manipular elementos DOM com JavaScript é essencial para criar páginas da web dinâmicas e interativas.

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 no JavaScript:

• getElementById () método
• getElementsbyclassName Método
• getElementsByTagName () Método
• Método querySelector ()
• método querySelectorAll ()

Método 1: Selecione os elementos DOM usando o método “getElementById ()”

Para selecionar elementos DOM, use o “getElementById ()”Método 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 dada para o método getElementById ():

documento.getElementById ("idname")

Aqui o "idname”É o nome de um atributo de identificação atribuído a um elemento.

Exemplo

Em um arquivo html, crie dois títulos em um elemento div usando o “H4" marcação. Atribuir IDs ao elemento div e títulos “H4” elementos chamados “div" e "cabeçalho”, Respectivamente. Adicione o atributo de estilo ao elemento div para alinhá -lo no centro. Além disso, atribua uma classe “seção”Para o segundo título que muda sua cor:

Acesse elementos DOM usando métodos diferentes

Selecione os elementos DOM em JavaScript usando o método 'getElementById ()'

Agora, vamos conseguir o “div”Elemento usando seu ID atribuído com a ajuda do“getElementById ()”Método:

var getByid = documento.getElementById ("div");

Imprima o elemento contra o ID “div”No console:

console.log (getById);

Pode -se observar que o elemento HTML necessário foi recuperado com sucesso:

Método 2: Selecione os 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 pelo nome da classe. Ele gera um objeto HTMLCollection ao vivo, um objeto semelhante a uma matriz que contém todos os elementos com o nome da classe especificado.

Sintaxe

A sintaxe a seguir é utilizada para o método “getElementsByclassName ()”:

documento.getElementsbyclassName ("ClassName")

Exemplo

Aqui, obteremos o elemento que contém a classe “seção”E imprima no console:

var getByClass = documento.getElementsByClassName ("Seção");
console.log (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: Selecione os elementos DOM usando o método “getElementsByTagName ()”

Caso não haja identificação ou classe atribuída a um elemento, use o “getElementsByTagName ()”Método para obter o elemento pelo nome da tag. Ele também retorna um objeto HTMLCollection ao vivo, que é um objeto semelhante a uma matriz que contém todos os elementos que têm o nome da tag especificado.

Sintaxe

Siga a sintaxe dada 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 de tag especificado no console:

var getBytag = documento.getElementsByTagName ("H4");
console.log (getBytag);

Saída

Método 4: Selecione os elementos DOM usando o método “querySelector ()”

Use o "QuerySelector ()”Método 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 comparado, ele dá “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

Ligue para o método “QuerySelector ()” e passe o id “#cabeçalho”Para obter os elementos que contêm o mesmo ID:

var getByQuery = documento.QuerySelector ("#cabeçalho");
console.log (getByQuery);

Dá o primeiro elemento correspondente como uma saída:

Método 5: Selecione os 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 “QuerySelectorAll ()”Método. Ele seleciona uma lista de elementos que correspondem a um seletor CSS definido específico. Dá a um objeto Nodelist que contém todos os elementos no documento que correspondiam 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 ()”Método e impressão em elementos no console:

var getByQueryall = documento.QuerySelectorAll ("#cabeçalho");
console.log (getByQueryall);

Saída

Isso se trata de selecionar elementos DOM em JavaScript.

Conclusão

Para selecionar os elementos DOM em JavaScript, use o “getElementById ()","getElementsbyclassName ()","getElementsByTagName ()","QuerySelector ()", ou o "QuerySelectorAll ()”Método. Esses métodos fornecem diferentes maneiras de selecionar elementos do DOM com base em seus identificadores exclusivos, nomes de classes, nomes de tags ou seletores CSS. Este tutorial demonstrou os diferentes métodos para selecionar elementos DOM em JavaScript.