3

O Erro é bem simples mas não conseguir encontrar.

Eu estou aprendendo a utilizar a DOM CORE API.
Criei uma DIV, e dentro coloquei uma UL.
Estou alertando quem é o primeiro filho da DIV, e o resultado está dando OBJECT TEXT. invés de dar OBJECT UL LIST. segue o código.

<html lang="pt-BR">
    <head>
        <title>Dom Core Api</title>
        <meta charset="utf-8">
        <script src="js/testDom.js"></script>
    </head>
    <body>
      <div>
          <ul><li>Rodrigo</li>
            <li>Robson</li>
          </ul>
      </div>
    </body>
</html>

Código javaScript

window.onload = function() {
    var div = document.getElementsByTagName("div").item(0);
    alert(div.firstChild);
}

Resultado no Navegador

2
  • o post foi Ajustado Commented 3/11/2016 às 16:03
  • Melhorou bastante ajustado.
    – Largato
    Commented 3/11/2016 às 16:05

1 Resposta 1

4

O que procuras é o .firstElementChild que te dá o primeiro filho que é um elemento. Quando usas somente .firstChild ele vai dar-te o text em branco e a quebra de linha que tens no HTML.

Repara neste exemplo:

var div1 = document.getElementsByTagName('div').item(0);
console.log(div1.firstChild, div1.firstElementChild); // #text, ul

var div2 = document.getElementsByTagName('div').item(1);
console.log(div2.firstChild, div2.firstElementChild); // ul, ul
<div>
    <ul>
        <li>A</li>
        <li>B</li>
    </ul>
</div>
<div><ul><li>A</li><li>B</li></ul></div>

No primeiro exemplo dá #text, mas no segundo não pois não há espaço entre o HTML de div e ul.

Podes ainda testar o .nodeType que vai confirmar as diferênças:

console.log(div1.firstChild.nodeType, div1.firstElementChild.nodeType); // 3, 1
console.log(div2.firstChild.nodeType, div2.firstElementChild.nodeType); // 1, 1
7
  • 1
    É verdade agora deu certo, eu estava estudando pelo aulas do canal do XTI, e lá ele fazia .firstChild e retornava o elemento normalmente, mesmo com o espaço. Mas valeu ai, resolveu o problema. Commented 3/11/2016 às 16:00
  • 1
    @RodrigoJacinto se a resposta te atendeu, pode então marcá-la como aceita.
    – durtto
    Commented 3/11/2016 às 16:04
  • 1
    Só pra alertar, até o IE8 ainda precisa usar o método antigo, verificando o tipo de cada node pra ver se é element ou não.
    – bfavaretto
    Commented 3/11/2016 às 16:12
  • 1
    @bfavaretto bem visto. Eu já deixei o IE8 para trás, mas pode haver ainda quem use.
    – Sergio
    Commented 3/11/2016 às 16:12
  • 1
    Eu também já abandonei. Foi quase tão bom quanto o dia em que eu disse adeus ao IE6 :)
    – bfavaretto
    Commented 3/11/2016 às 16:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .