4

Vi en un curso de programacion que estaban usando

document.body.appenChild() 

Y decia que es porque al body es al que se le agregan cosas, pero es que me pregunté porque no era así, pero con document.getElementById(), es decir que fuera document.body.getElementById().

Además, ¿qué no se supone que el document es como el body?, o sea yo creo que no es necesario aclarar que es al body al que se le agregan cosas cuando el document es lo visual, o sea como el body masomenos, pero bueno aca les dejo el codigo completo en donde en una parte se usa el document.body.appendChild.

<!DOCTYPE html>
<html>
 <head>
  <title>
   PakimanDex!
  </title>
 </head>
 <body>
  <h1>Pakimanes que he atrapado!</h1>
  <script src="pakiman.js">
  </script>
  <script src="paki.js">
  </script>
 </body>
</html>

JS (CLASE)

class Pakiman
{
  constructor(n, v, a)
  {
    this.imagen = new Image();
    this.nombre = n;
    this.vida = v;
    this.ataque = a;

    this.imagen.src = imagenes[this.nombre];
  }
  hablar()
  {
    alert(this.nombre);
  }
  mostrar()
  {
    document.body.appendChild(this.imagen);
    document.write("<br /><strong>" + this.nombre + "</strong><br />");
    document.write("Vida: " + this.vida + "<br />");
    document.write("Ataque: " + this.ataque + "<hr />");
  }
}

JS 

var imagenes = [];
imagenes["Cauchin"] = "vaca.png";
imagenes["Pokacho"] = "pollo.png";
imagenes["Tocinauro"] = "cerdo.png";

var coleccion = [];
coleccion.push( new Pakiman("Cauchin", 100, 30) );
coleccion.push(new Pakiman("Pokacho", 80, 50));
coleccion.push(new Pakiman("Tocinauro", 120, 40));

for(var freddito of coleccion)
{
  freddito.mostrar();
}

for(var x in coleccion[0])
{
  console.log(x);
}

1 respuesta 1

4

Para esto tienes que recordar la estructura de un HTML que se compone con la estructura básica:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>    
</body>
</html>

El body sólo hace referencia a esta parte o en dado caso a un frameset:

<body>    
</body>

De igual manera el document tiene el método appendChild, sin embargo hace referencia a un contexto más grande, incluyendo las cookies, la URI, entre otros.

En estos enlaces puedes encontrar la documentación de MDN acerca del document.body y para el document

Para que quede un poco más claro vamos a crear un ejemplo donde se puede apreciar la diferencia:

Diferencias, de mayor a menor selectividad

console.log(document.querySelector("#welcome-text"));
console.log(document.body);
console.log(document);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo</title>
</head>
<body>
    <div>
        <p>Hola</p>
        <p>Mundo</p>
    </div>
    <div id="welcome-text"><p>Mi primera página web</p></div>
</body>
</html>

Como se puede apreciar en el anterior ejemplo, tú puedes hacer la query más específica de acuerdo a tus necesidades.

Por ejemplo, si nosotros queremos acceder a un elemento en específico lo podemos lograr más fácilmente si sabemos quien es su padre inmediato. En este caso vemos que si quisiéramos identificar el elemento <p> dentro del <div id="welcome-text">, la que menos esfuerzo tendría que hacer es la query por id, seguida de la query por document.body y hasta el último la query de document

Append Child

Ahora sobre el método appendChild, veamos la diferencia.

function addElements() {
  let element = document.createElement('strong');
  element.innerText = "dentro del id";

  document.querySelector("#welcome-text").appendChild(element);

  let element2 = document.createElement('strong');
  element2.innerText = "dentro del body";

  document.body.appendChild(element2);

  let element3 = document.createElement('strong');
  element3.innerText = "dentro de document";
  try {
    document.appendChild(element3);
  } catch (error) {
    console.log("document es el árbol del DOM, por lo que no es correcto añadir elementos HTML")
  }
};
div {
  border-style: dashed;
  border-color: green;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Ejemplo</title>
</head>

<body>
  <div>
    <p>Hola</p>
    <p>Mundo</p>
  </div>
  <div id="welcome-text">
    <p>Mi primera página web</p>
  </div>
  <div>
    <button onclick="addElements()">Añadir elementos</button>
  </div>
</body>

</html>

Finalmente

La documentación MDN nos dice que:

The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree.


La interfaz Document representa cualquier página web cargada en el navegador y sirve como punto de entrada al contenido de la página web, que es el árbol DOM.

3
  • 1
    ok, pero por qué en este caso no se usa document.body.getElementById(), o sea porque el id está en el body. Commented el 10 abr. 2021 a las 18:22
  • 1
    @BetaM wow gracias si estaba muy mal redactado la verdad. Commented el 10 abr. 2021 a las 18:26
  • 4
    hace la query más específica. Tú puedes crear diferentes queries hacia un mismo objeto, en este caso estás ayudándole al selector diciendo que ese elemento se encuentra dentro del body, incluso podrías ser más específico y decirle que ese elemento se encuentra dentro de un div por ejemplo Commented el 10 abr. 2021 a las 18:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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