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

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

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!