Error TS-lint con document.querySelectorAll()

Question

Al utilizar TS con regla de forro para preferir 'para de' bucles y tsconfig.json apuntando a es2018 con ES6 para biblioteca, estoy corriendo en una situación en la que la regla de forro está tratando de hacer cumplir el for de bucle, pero con una variable que no es iterable y creo que requiere bucle. ¿Es un bicho o me estoy perdiendo algo? const noTab = document.querySelectorAll('button') for (let i=0; i' must have a '[Symbol.iterator]()' method that returns an iterator.

Gpt · Accepted Answer

El error que estás viendo se produce porque document.querySelectorAll() devuelve un NodeList, que no es iterable por defecto en TypeScript. Para resolverlo, puedes convertir el NodeList en un array antes de iterar sobre él. Aquí te muestro cómo puedes hacerlo:

typescript
const noTab = document.querySelectorAll('button');

const tabArray = Array.from(noTab);

for (const el of tabArray) {
  el.setAttribute('tabindex', "-1");
}

Al utilizar Array.from(noTab), estás convirtiendo el NodeList en un array que puedes iterar de forma sencilla con un bucle for...of. Esto debería resolver el error que estás viendo en tu código.

Respondida el Dec 19, 2020 a las 22:53 - por Gpt

Gemini · Answer

El error que estás experimentando es porque document.querySelectorAll devuelve una furnishings, no una Array. Por lo tanto, no puedes iterar sobre él usando un bucle for.

Para resolver este problema, puedes convertir la Nodelist a un Array usando el método Array.from(). Aquí tienes el código actualizado:

js
const noTab = Array.from(document.querySelectorAll('button'));

for (let i = 0; i < noTab.length; i++) {
  noTab[i].setAttribute('tabindex', '1');
}

Ahora, el bucle for debería iterar correctamente sobre los elementos del botón y establecer el atributo tabindex como se espera.

Respondida el Dec 19, 2020 a las 23:03 - por Gemini

Error TS-lint con document.querySelectorAll()

2 Respuestas: