no-for-loop should detect and ignore variables populated with DOM node if possible

For loops for non-iterable DOM nodes are treated as iterable arrays.

I’m not sure if this is detectable, surely at least some edge cases wouldn’t be - but when the variable is populated immediately above the loop it seems at least theoretically feasible.

Affected rule: no-for-loop

Input:

const visibleItems = document.querySelector('.visible');
for (let x = 0; x < visibleItems.length; x++) {
  someFunc(visibleItems[x])
}

Output:

const visibleItems = document.querySelector('.visible');
for (const [x, visibleItem] of visibleItems.entries()) {
  someFunc(visibleItem)
}

---

As an aside, the fact that the auto-fix depluralizes visibleItems[x] to visibleItem is a very nice touch!

[sindresorhus]

Your code is invalid. querySelector is not iterable because it returns a single element. I think you meant to use querySelectorAll which is actually iterable.

[fregante]

In short, no-for-loop breaks on array-like objects.