entender lógica do código: childNodes[0]

[Alan Walking 5]

Olá pessoal,

 

Estou estudando javascript, fiquei com uma dúvida.

Segue o exemplo abaixo:

<div id="animais">
    <p>Cachorro</p>
    <p>Gato</p>
    <p>Cavalo</p>
</div>

Vou capturar os nodes no JS abaixo:

var d = document.getElementById("animais");
var nodes = d.childNodes.length; // nodes = 7
// 7 Nodes, mas index começa em 0, então 0 - 6 de index

O conteúdo entre os index 1 e 6, tudo ok!

Entendi perfeitamente.

Por exemplo, d.childNodes[1] primeiro <p> </p>

Então d.childNodes[2] Texto dentro dele

E então, próximo <p> </p> é o d.childNodes[3] e seu texto d.childNodes[4]

Etc...

 

O que não entendi é o que d.childNodes[0] aponta.

Sei que ele aponta um tipo Text e que seu valor é undefined.

Gostaria por gentileza que alguém me ajudasse a entender melhor o que esse node aponta.

Qual a explicação para isso.

 

Desde já obrigado,

Alan,

[William Bruno 1501]

Nesse teu caso, é a quebra de linha, ou seja o caracter \n

 

console.log(d.childNodes[0]);

resultado:

<TextNode textContent="\n ">

Note que se o teu html fosse assim:

<div id="animais"><p>Cachorro</p><p>Gato</p><p>Cavalo</p></div>

então, nodes seria 3.

 

E por isso, eu te indico a não usar .childNodes (pois depende de quebra de linha, texto e tudo mais). Use as funções padrões .getElements?By...

[Alan Walking 5]

Po cara, muito obrigado mesmo!

 

Explicação simples e direta.

E ainda com um exemplo pra reforçar a idéia.

 

Dúvida sanada!