Neste artigo você vai aprender a verificar se um objeto é objeto de DOM, utilizando a linguagem JavaScript
Fala programador(a), beleza? Bora aprender mais sobre objetos em JavaScript!
Os objetos do DOM (Document Object Model) são elementos da página HTML que podem ser manipulados pelo JavaScript.
Eles incluem elementos HTML como div, p, a, entre outros, assim como outros objetos como window, document e location.
Para verificar se um objeto é um objeto do DOM em JavaScript, podemos utilizar a propriedade nodeType do objeto.
Cada objeto do DOM possui um tipo de nó, que pode ser um elemento HTML, um atributo, um texto, entre outros. A propriedade nodeType retorna o tipo de nó do objeto.
Por exemplo:
function ehObjetoDoDom(objeto) {
return objeto.nodeType !== undefined;
}
console.log(ehObjetoDoDom(document.querySelector("div"))); // true
console.log(ehObjetoDoDom({})); // false
Nesse exemplo, criamos uma função chamada ehObjetoDoDom que recebe um objeto como parâmetro.
Verificamos se o objeto possui a propriedade nodeType e, se possuir, retornamos true. Caso contrário, retornamos false.
Utilizamos a função querySelector para selecionar um elemento div da página e passamos o elemento como parâmetro para a função.
Como o elemento div é um objeto do DOM, a função retorna true. Passamos também um objeto vazio como parâmetro e a função retorna false, pois o objeto não é um objeto do DOM.
Qual a diferença entre objeto e objeto de DOM?
Em JavaScript, todos os elementos da página HTML são considerados objetos.
Isso inclui elementos HTML como div, p, a, entre outros, assim como outros objetos como window, document e location.
Esses objetos são chamados de objetos do DOM (Document Object Model).
Os objetos do DOM possuem propriedades e métodos que permitem manipulá-los.
Por exemplo, podemos utilizar o método getElementById do objeto document para selecionar um elemento pelo seu ID, ou utilizar o método addEventListener para adicionar um listener para um determinado evento em um elemento.
Além dos objetos do DOM, existem outros tipos de objetos em JavaScript, como os objetos nativos (como Object, Array e String) e os objetos criados pelo usuário.
Esses objetos não são elementos da página HTML e não possuem as propriedades e métodos dos objetos do DOM.
Por exemplo:
// Objeto do DOM
const div = document.querySelector("div");
div.innerHTML = "Olá, mundo!";
// Objeto nativo
const obj = {};
obj.nome = "João";
// Objeto criado pelo usuário
function Pessoa(nome) {
this.nome = nome;
}
const joao = new Pessoa("João");Nesse exemplo, criamos três tipos de objetos diferentes: um objeto do DOM (div), um objeto nativo (obj) e um objeto criado pelo usuário (Pessoa).
O objeto do DOM é um elemento div da página HTML e possui a propriedade innerHTML, que permite alterar o conteúdo do elemento.
O objeto nativo é um objeto vazio criado com o construtor Object e possui a propriedade nome.
O objeto criado pelo usuário é uma função construtora que cria objetos com o nome definido pelo usuário.
Deixe um comentário contando o que achou deste artigo 🙂
Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:
Conclusão
Neste artigo você viu como verificar se um objeto é objeto de DOM
E também aprendeu a diferença entre objeto e objeto de DOM
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!