Quiero recorrer un div y almacenar <h4> y <ul> dentro de un objeto. Y ya usé querySelectorAll pero eso seleccionará todos los elementos h4 o ul.

En la imagen, puede ver que estoy seleccionando el hijo inmediato <h4> y <ul>, de la misma manera quiero seleccionar los siguientes elementos <h4> y <ul> y almacenarlos en un objeto. .

console

2
Leander Leo Lagardo 8 ago. 2020 a las 11:43

2 respuestas

La mejor respuesta

Aún puede usar querySelectorAll y elegir el índice correcto (el siguiente será el índice 1)

document.querySelectorAll('#main > ul')[1]
document.querySelectorAll('#main > h4')[1]

Prueba de ejemplo de la web de IMDB

const secondH4 = document.querySelectorAll('#main > h4')[1]
const secondUL = document.querySelectorAll('#main > ul')[1]

console.log(secondH4, secondUL)
<div id="main">
  <h4>11 August 2020</h4>
  <ul>
    <li>
      <a href="/title/tt4523530/?ref_=rlm">Valley of the Gods</a> (2019)
    </li>
  </ul>
  <h4>14 August 2020</h4>
  <ul>
    <li>
      <a href="/title/tt11394332/?ref_=rlm">Spree</a> (2020)
    </li>
    <li>
      <a href="/title/tt5723282/?ref_=rlm">Endless</a> (2020)
    </li>
    <li>
      <a href="/title/tt5617312/?ref_=rlm">The Bay of Silence</a> (2020)
    </li>
  </ul>
</div>

NOTA

Al usar nextSibling necesitaría más lógica ya que nextSibling no selecciona el siguiente h4 o el siguiente ul, selecciona cualquier elemento DOM que esté al lado del actual

1
Eugen Sunic 8 ago. 2020 a las 09:29

Probablemente debería seleccionar todos los elementos 'h4' y 'ul' en sus propias colecciones, identificar el elemento actual en estas colecciones y simplemente elegir el siguiente elemento. Aquí hay un pequeño fragmento que muestra cómo encontrar el siguiente <h4>:

const allH4s= [...document.querySelectorAll("h4")];

// assuming a <h4> has been selected:
const firstH4=document.querySelector("h4"),
// then nextH4 will be the immediately following h4 element in the document:
  nextH4=allH4s[allH4s.indexOf(firstH4)+1];

[... collection] crea una matriz a partir de una colección. Esto es necesario, ya que necesitamos acceder al método Array indexOf().

Puede hacer algo similar con sus <ul> s.

1
cars10m 8 ago. 2020 a las 09:05