Question

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

未捕获的TypeError：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的平台上进行的NodeList迭代填充。

Answer 2

未捕获的TypeError：rows.indexOf不是函数

出现此错误的原因是，您通过.indexOf()而不是nodeList来调用array，因为document.querySelectorAll()将返回nodeList而不是{ {1}}。

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

nodeList/collection

演示：

这是您的 updated fiddle。

Answer 3

querySelectorAll返回NodeList，而不是数组。

您需要使用

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

Answer 4

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