Como pegar o tipo de um elemento HTML com JavaScript

Neste artigo você vai aprender a como pegar o tipo de um elemento HTML com JavaScript, utilizando uma simples abordagem

Fala programador(a), beleza? Bora aprender mais sobre DOM!

Com o JavaScript, é possível pegar o tipo de um elemento HTML de várias maneiras. Uma delas é usando a propriedade “nodeName” do objeto do elemento.

Por exemplo, para pegar o tipo de um elemento com o ID “meuElemento”, você pode usar o seguinte código:

const meuElemento = document.getElementById("meuElemento");
const tipoDoElemento = meuElemento.nodeName;
console.log(tipoDoElemento);

Isso imprimirá o tipo do elemento, que é a tag HTML usada para criá-lo (por exemplo, “DIV” para um elemento div, “P” para um elemento p, etc.).

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Outra maneira de pegar o tipo de um elemento é usando a propriedade “tagName”.

Ela funciona de maneira semelhante à propriedade “nodeName”, mas é específica para elementos HTML. Por exemplo:

const meuElemento = document.getElementById("meuElemento");
const tipoDoElemento = meuElemento.tagName;
console.log(tipoDoElemento);

Além disso, em algumas versões mais recentes do JavaScript é possível usar o método .constructor.name para pegar o tipo de um elemento:

const meuElemento = document.getElementById("meuElemento");
const tipoDoElemento = meuElemento.constructor.name;
console.log(tipoDoElemento);

É importante notar que todas as três opções acima retornam o tipo do elemento como uma string e as propriedades “nodeName” e “tagName” são maiúsculas.

Em resumo, existem várias maneiras de pegar o tipo de um elemento HTML com JavaScript, incluindo usando as propriedades “nodeName” ou “tagName” do objeto do elemento ou o método .constructor.name.

Cada uma delas tem suas próprias vantagens e desvantagens, então é importante escolher a opção que melhor se adapta às suas necessidades.

Quer saber mais sobre o DOM também?

O DOM (Document Object Model) é uma tecnologia amplamente usada na criação de aplicativos web e é fundamental para o funcionamento de muitas páginas da internet.

Ele foi criado pela W3C (World Wide Web Consortium) como uma maneira de tornar o conteúdo de um documento HTML ou XML acessível a scripts e programas.

O DOM é uma representação estruturada de um documento, onde cada elemento é considerado um nó na estrutura do documento.

Ele permite que os desenvolvedores acessem e alterem elementos, atributos e conteúdo de um documento usando JavaScript, permitindo a criação de aplicativos web interativos e aumentando a usabilidade.

Uma curiosidade interessante sobre o DOM é que ele é baseado em árvores, onde cada elemento é um nó e os elementos-filho são nós-filhos.

Isso permite uma navegação fácil entre elementos e acesso ao conteúdo.

Além disso, o DOM permite que os desenvolvedores criem e alterem elementos dinamicamente, sem precisar recarregar a página, o que é útil para criar aplicativos web interativos.

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

E chegamos ao fim do artigo sobre como pegar o tipo de um elemento HTML com JavaScript!

Que é uma tarefa comum na criação de aplicativos web e existem várias maneiras de fazê-lo.

A propriedade “nodeName” e “tagName” do objeto do elemento são opções comuns, assim como o uso do método .constructor.name.

Cada uma delas tem suas próprias vantagens e desvantagens, mas todas são eficazes na tarefa de pegar o tipo de um elemento.

É importante notar que essas opções retornam o tipo do elemento como uma string e as propriedades “nodeName” e “tagName” são maiúsculas.

Além disso, é importante que o elemento esteja selecionado corretamente antes de tentar pegar o tipo dele, usando métodos como document.getElementById(), document.querySelector() e etc.

Em resumo, pegar o tipo de um elemento HTML com JavaScript é uma tarefa importante e fácil de realizar, usando as propriedades “nodeName” ou “tagName” do objeto do elemento ou o método .constructor.name .

Isso permite aos desenvolvedores criar aplicativos web interativos e melhorar a usabilidade das páginas.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!