0

He tratado de acceder al body usando:

  1. document.body
  2. document.documentElement.body
  3. document.getElementsByTagName('BODY')[0]
  4. document.getElementsByTagName('body')[0]
  5. document.getElementById('body'); // Le he puesto un id al body

En el body, he puesto siete <h1> solamente para probar.

En todas, usando ya sea .childElementCount o .children.length, retorna sólo un hijo, y ni si quiera es un <h1>, sino me retorna el DOCTYPE!. Les pego el código con el que he descubierto esto:

var padre = document.getElementsByTagName('BODY')[0];
console.log("Probando el padre.childElementCount, da como resultado: " + padre.childElementCount);
console.log("Y toma el " + padre.children[0].tagName + " como hijo");
<body>
  <h1>Título 1</h1>
  <h1>Título 2</h1>
  <h1>Título 3</h1>
  <h1>Título 4</h1>
  <h1>Título 5</h1>
</body>

Y lo que obtengo en consola de Chrome, es:

prueba.js:69       Sólo el body es el padre
prueba.js:71       Probando el padre.children.count, da como resultado: 1
prueba.js:72       Y toma el DOCTYPE! como hijo
9
  • Me ha eliminado algunas palabras. Aquí está arreglado:
    – Chris N.
    Commented el 8 feb. 2018 a las 19:57
  • En el body, he puesto siete h1 solamente para probar. En todas, usando ya sea .childElementCount o .children.length, retorna sólo un hijo, y ni si quiera es un h1, sino me retorna el DOCTYPE!. Les pego el código con el que he descubierto esto:
    – Chris N.
    Commented el 8 feb. 2018 a las 19:57
  • 1
    Acabo de poner tu código como ejecutable y parece funcionar sin problemas.
    – Alvaro Montoro
    Commented el 8 feb. 2018 a las 20:10
  • 1
    Como nota: no es <DOCTYPE! html> debería ser <!doctype html> con el ! delante de doctype y no detrás. Eso puede crearte el problema porque se interpretará como una etiqueta normal y no como una declaración. Si al cambiar eso se solucionara el problema, deberías cerrar/borrar la pregunta porque sería un simple fallo tipográfico.
    – Alvaro Montoro
    Commented el 8 feb. 2018 a las 20:21
  • 1
    @ChrisN. Me alegra que te sirviera. Voy a cerrar la pregunta como no relacionada por ser un fallo tipográfico.
    – Alvaro Montoro
    Commented el 8 feb. 2018 a las 20:53

1 respuesta 1

1

Prueba utilizando jQuery. En mi ejemplo utilizare h5 por que el texto de h1 abarca demasiado espacio

function recorrer_body(){
  var hijos = $("body").children("h5"); //Esto retorna todos los del body con etiqueta <h1>
  var texto = "";
  
  for(i=0; i<hijos.length; i++){
    texto += $(hijos[i]).text()+"\n";
  }
  alert(texto);
  $("#resultado").val(texto); //Aqui imprimos el resultado en el textarea
}
<HTML>
    <HEAD>
        <TITLE>Título de la página</TITLE>
    </HEAD>

    <BODY>
        <h5>numero 1</h5>
        <h5>numero 2</h5>
        <h5>numero 3</h5>
        <h5>numero 4</h5>
        
        <textarea id="resultado"></textarea><br>
        <button type="button" onclick="recorrer_body()">Recorrer body</button>
    </BODY>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</HTML>

sino se comprende muy bien, te dejo la página que me sirvió a mi...

http://michelletorres.mx/padres-hijos-y-hermanos-en-jquery/

2
  • 1
    Mil gracias por tu respuesta. Ciertamente prefiero puro JavaScript, aunque podría utilizar la sugerencia. Muchas gracias, saludos.
    – Chris N.
    Commented el 8 feb. 2018 a las 20:26
  • De nada, me alegra que tu problema fuera resuelto, suerte Commented el 8 feb. 2018 a las 20:27

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.