regresar a la lección

DOM children

importancia: 5

Mira esta página:

<html>
<body>
  <div>Users:</div>
  <ul>
    <li>John</li>
    <li>Pete</li>
  </ul>
</body>
</html>

Para cada una de las siguientes preguntas, da al menos una forma de cómo acceder a ellos:

  • ¿El nodo <div> del DOM?
  • ¿El nodo <ul> del DOM?
  • El segundo <li> (con Pete)?

Hay muchas maneras, por ejemplo:

El nodo <div> del DOM:

document.body.firstElementChild
// o
document.body.children[0]
// o (el primer nodo es un espacio, así que tomamos el segundo)
document.body.childNodes[1]

El nodo <ul> del DOM:

document.body.lastElementChild
// o
document.body.children[1]

El segundo <li> (con Pete):

// obtener <ul>, y luego obtener su último elemento hijo
document.body.lastElementChild.lastElementChild