Encontrar y recorrer nodos en JavaScript

Los métodos de consulta, y moverse entre elementos relacionados.

function inspect() {
  const rows = document.querySelectorAll(".step");
  const locked = [...rows].filter((row) => row.matches("[data-locked]"));

  const first = rows[0];
  const tour = first?.closest("[data-tour]")?.dataset.tour;

  return {
    total: rows.length,
    locked: locked.length,
    tour,
    next: first?.nextElementSibling?.textContent?.trim(),
    parentTag: first?.parentElement?.tagName,
  };
}

Cómo funciona

querySelectorAll devuelve una NodeList estática, no un arreglo.
closest sube; children y matches hacen el resto.
Esparce la NodeList con spread cuando quieras métodos de arreglo.

Palabras clave y builtins usados aquí

const
document
function
return

El intento, en números

Líneas: 15
Caracteres a escribir: 383
Tokens: 105
Ritmo de tres estrellas: 95 tpm

Al ritmo de tres estrellas de 95 tokens por minuto, este intento toma unos 66 segundos.

Escribe este fragmento

Paso 3 de 3 en El DOM; paso 3 de 13 en El navegador.

← Anterior Siguiente →