Qual a diferença entre parentNode e parentElement em JavaScript

Neste artigo você vai aprender qual a diferença entre parentNode e parentElement em JavaScript, que são recursos do DOM

diferença entre parentNode e parentElement capa

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

Basicamente temos que o parentElement é um recurso mais novo no DOM, e corresponde as mesmas funções de parentNode

A grande diferença é que em parentNode temos document como seu parent (elemento pai)

E o parentElement não é filho de document, podemos replicar isto neste exemplo:

console.log(document.documentElement.parentNode === document);  // true

console.log(document.documentElement.parentElement === document);  // false

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

474 aulas
20 projetos
39h 27min

Neste caso as propriedades se diferem, porém para efeitos de elemento pai temos o mesmo resultado

Se temos um HTML deste jeito:

<div>
  <p id="my-element">Meu elemento</p>
</div>

Temos o mesmo resultado no código abaixo:

const el = document.querySelector("#my-element")

console.log(el.parentNode.nodeName);  // DIV
console.log(el.parentElement.nodeName);  // DIV

Então fica a sua escolha qual deles utilizar, você vai conseguir chegar no mesmo resultado com as duas propriedades

Conclusão

Neste artigo você aprendeu a diferença entre parentNode e parentElement em JavaScript

Basicamente não temos diferenças xD

Somente quando comparamos o parentNode e o parentElement sobre o document, aí as respostas divergem

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!
Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias
O link acima contém um cupom de desconto para os cursos!

O que é o parentNode?

O parentNode devolve o pai de QUALQUER nó dentro da árvore do DOM

E aqui mora um detalhe: pai pode ser qualquer tipo de nó, não só uma tag

Isso inclui o próprio document, que fica lá no topo de tudo

O que é o parentElement?

Já o parentElement também devolve o pai, mas só quando ele é um elemento de verdade (uma tag HTML)

Se o pai não for um elemento, ele te entrega null

No dia a dia, subindo um nível a partir de uma tag normal, os dois te levam pro mesmo lugar 🙂

Repara que ali o parentElement não bateu com o document

O motivo é simples: o pai do elemento <html> é o document, e o document não é um elemento

Então o parentElement devolve null nesse caso, enquanto o parentNode devolve o document

console.log(document.documentElement.parentElement); // null

parentNode ou parentElement: qual escolher?

Se você só quer subir um nível a partir de um elemento comum, tanto faz, os dois funcionam igual

Use parentElement quando quiser a garantia de receber um elemento ou null, e nada além disso

Use parentNode quando estiver navegando pela árvore e o pai pode ser outro tipo de nó, não só uma tag

Perguntas frequentes

parentNode e parentElement são a mesma coisa? Na maioria dos casos o resultado é idêntico, os dois te dão o elemento pai A diferença só aparece quando o pai não é um elemento, tipo o document

Quando o parentElement retorna null? Quando o nó pai não é um elemento HTML O caso clássico é o <html>, cujo pai é o document

Qual dos dois é mais novo? O parentElement é o mais recente dos dois no DOM, como o próprio artigo mostra, mas na prática você chega no mesmo elemento pai com qualquer um deles