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
- 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!