indexOf 不是函数，在数组中找不到元素的索引 [重复]

Question

我有一个包含 HTML 元素的数组（我用querySelectorAll() 填充它），我试图在该数组中找到一个元素的索引，但控制台给出了错误：

未捕获的类型错误：rows.indexOf 不是函数

我用它用所需的 HTML 元素填充数组：

rows = document.querySelectorAll("#selectableTableBody > tr");

然后这个找到索引：

document.getElementById("tableItem_10087528").onclick = function (e) { console.log(rows.indexOf(this)); }

这是我在控制台中测试的图像（没有意义）：

值得注意的是，这些元素是用javascript生成的，然后使用querySelectorAll()放入数组中 如果你想检查整个事情，这里是jsfiddle

Answer 1

我有一个包含 HTML 元素的数组（我用 querySelectorAll() 填充它）

不，你没有，这是问题所在。 :-) querySelectorAll 返回 NodeList (MDN | spec)，而不是数组。

您可以通过多种方式将其转换为数组：

rows = Array.from(document.querySelectorAll(/*...*/));

或（在NodeList 可迭代的最新环境中）：

rows = [...document.querySelectorAll(/*...*/)];

或在旧环境中：

rows = Array.prototype.slice.call(document.querySelectorAll(/*...*/));

---

可迭代性：This answer 讨论了在数组可迭代（本机或多亏了 polyfill）但 NodeList 还不能迭代的平台上的 polyfilling NodeList 可迭代性。

Answer 2

未捕获的类型错误：rows.indexOf 不是函数

您收到此错误是因为您通过nodeList 而不是array 调用.indexOf()，因为document.querySelectorAll() 将返回nodeList 而不是array。

您可以使用 Array.from() method 从此 nodeList/collection 获取 array：

rows = Array.from(document.querySelectorAll("#selectableTableBody > tr"));

演示：

这是你的 updated fiddle。

Answer 3

那是因为 querySelectorAll() 的返回是一个类似对象的数组（具有长度属性的对象）而不是数组。您需要使用 Array.from(rows) 将其转换为数组。

Answer 4

querySelectorAll 返回NodeList，而不是数组。

你需要使用

rows = Array.from(document.querySelectorAll("#selectableTableBody > tr"));