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
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); // DIVEntã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
Leia também
Formações
Formação SAAS com IA
Tire usas ideias do papel criando softwares com IA, integre pagamentos e lance seu projeto!
- 291 aulas
- 18 projetos
- 24h 17min
Blog | Mais populares
As diferenças de var, let e const
Como fazer redirecionamento com PHP
Neste artigo você vai aprender a como fazer redirecionamento com PHP, utilizaremos abordagens fáceis de entender e de aplicar Fala programador(a), beleza? Bora aprender mais […]
ChatGPT: o que é, como usar, dicas e como acessar login
ChatGPT é uma ferramenta de processamento de linguagem natural (NLP) baseada na arquitetura GPT-3.5, desenvolvida pela OpenAI. Sua criação representa um marco significativo no campo […]
