Qual a diferença de children e childNodes em JavaScript

Neste artigo você vai aprender a diferença de children e childNodes, e também quando utilizar cada um deles

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

Primeiramente temos que entender que estes dois recursos vem de objetos pais diferentes

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

• children vem de Element;
• childNodes vem de Node;

Podemos entender Node como tudo que faz parte de um elemento, inclusive um texto

Ou seja, quando utilizamos childNodes temos que lidar com todas as caracterísiticas de um elemento

Já em children temos apenas os elementos que estão dentro do elemento que selecionamos

Ou seja, se temos um simples parágrafo selecionado a diferença é:

const myTag = document.querySelector("#my-paragraph")

console.log(myTag.children.length) // 0

console.log(myTag.childNodes.length) // 1

Note que como há apenas texto no parágrafo, temos o resultado de 0 elementos para children

Pois não há uma outra tag dentro do parágrafo

Já em childNodes temos um nó, que é o nó de texto

Esta é a grande diferença entre eles, e normalmente vamos optar por children

Pois queremos lidar apenas com os elementos do HTML

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

No artigo de hoje você aprendeu qual a diferença de children e childNodes

Podemos entender que children nos dá os elementos filhos de um elemento pai

E childNodes nos dá todos os nós presentes no elemento selecionado

Deseja programar de forma profissional? 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!