Como verificar se um objeto é objeto de DOM

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.

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

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!

Cuidado: o teste do nodeType tem dois furos

O código acima resolve o caso simples, beleza?

Só que ele confia demais na existência da propriedade

Se alguém te passar um objeto comum com um nodeType inventado, a função aprova sem pestanejar

E se te passarem null, ela nem chega a retornar false: ela quebra na sua cara

console.log(ehObjetoDoDom({ nodeType: 1 })) // true, e isso está errado

console.log(ehObjetoDoDom(null)) // TypeError: Cannot read properties of null

É o tipo de furo que só aparece em produção, quando a função recebe algo que você não previu

Bora blindar isso?

A forma mais segura: instanceof Node

Todo nó do DOM nasce de Node, que é a interface base de tudo que vive na árvore do documento

Elemento, texto, comentário, o próprio document: todos são Node

Então, em vez de perguntar "você tem nodeType?", a gente pergunta "você É um Node?"

function ehObjetoDoDom(objeto) {
return objeto instanceof Node
}

console.log(ehObjetoDoDom(document.querySelector("div"))) // true
console.log(ehObjetoDoDom({ nodeType: 1 })) // false
console.log(ehObjetoDoDom(null)) // false

Repara que ele não quebra com null e não cai na pegadinha do objeto falsificado

Se você já usa o typeof, pensa no instanceof como o irmão mais esperto: ele olha a linhagem do objeto, não só a etiqueta

Node ou HTMLElement? Depende do que tu quer aceitar

Node é o guarda-chuva: passa nó de texto, comentário, fragmento e até o document

HTMLElement é o filtro fino: só passa tag HTML de verdade, tipo div, p e a

const texto = document.createTextNode("oi")
const div = document.querySelector("div")

texto instanceof Node        // true
texto instanceof HTMLElement // false

div instanceof Node          // true
div instanceof HTMLElement   // true

Regra prática que uso pra decidir:

Se a função vai mexer em classList, style ou innerHTML, exija HTMLElement

Se ela só vai andar pela árvore (parentNode, childNodes), Node já basta

E se o elemento vier de um iframe?

Aqui mora a pegadinha que derruba o instanceof

Cada janela do navegador tem o SEU próprio Node

Um elemento criado dentro de um iframe pertence à janela de lá, não à sua

const iframe = document.querySelector("iframe")
const divDeLa = iframe.contentDocument.querySelector("div")

divDeLa instanceof Node // false, mesmo sendo um elemento de verdade

A saída é perguntar pra janela DONA do elemento:

function ehObjetoDoDom(objeto) {
if (!objeto || typeof objeto !== "object") return false

const janela = objeto.ownerDocument && objeto.ownerDocument.defaultView

return objeto instanceof Node || (!!janela && objeto instanceof janela.Node)
}

Se você nunca vai lidar com iframe, fica na versão simples do instanceof

Mas no dia que aparecer um widget embedado na página, lembra deste bloco 🙂

Nem tudo que vive no navegador é um nó do DOM:

Essa parte confunde bastante gente

window e location são objetos do navegador, e você mexe neles o tempo todo

Só que eles não são nós da árvore do documento, então não passam no teste do Node

document instanceof Node // true, o document é um nó
window instanceof Node   // false
location instanceof Node // false

Ou seja: "objeto do navegador" e "nó do DOM" são círculos que se encostam, mas não são o mesmo círculo

Quando a tua função precisa manipular a página (mudar texto, classe, atributo), o que interessa é o nó

Descobrindo QUAL nó você tem em mãos:

Às vezes saber que é DOM não basta, tu precisa saber o QUE é

O próprio Node traz constantes com nome pra isso, bem mais legíveis que decorar número solto

const no = document.querySelector("div").firstChild

no.nodeType === Node.ELEMENT_NODE  // é uma tag
no.nodeType === Node.TEXT_NODE     // é texto puro
no.nodeType === Node.COMMENT_NODE  // é comentário HTML
no.nodeType === Node.DOCUMENT_NODE // é o document

Dica de manutenção: compare sempre com a constante, nunca com o número cru

Quem for ler o teu código daqui seis meses agradece

Onde isso salva a tua pele no dia a dia:

Ninguém acorda querendo checar tipo de objeto por esporte

Isso aparece quando você escreve uma função que aceita mais de uma coisa

O caso clássico: uma função que aceita um seletor em texto OU o elemento já pronto

function pegarElemento(alvo) {
if (typeof alvo === "string") return document.querySelector(alvo)
if (alvo instanceof Node) return alvo

return null
}

pegarElemento(".menu")
pegarElemento(document.querySelector(".menu"))

Componente reaproveitável, helper de biblioteca, script que roda em página de terceiro: todos caem nesse mesmo padrão

Faça o teste com os dois formatos e vê como a API da tua função fica mais gostosa de usar