为什么我无法在NodeList上使用索引方法？

Question

由于某些原因，我无法使用NodeList对象的索引方法。当我对headElements项进行typeof时，我将它作为对象而不是节点接收。

我想将headElements和rowElements的每个节点追加到tr元素。

这是我的代码：

var pageHeads = document.getElementsByTagName('thead');
var pageBody = document.getElementsByTagName('tbody');


var headElements = pageHeads[i].querySelectorAll('td');
var rowElements = pageBody[i].querySelectorAll('td');

headElements.index(0).cloneNode(true);

Answer 1

var pageHeads = document.getElementsByTagName('thead');
var pageBody = document.getElementsByTagName('tbody');


var headElements = pageHeads[i].querySelectorAll('td');
var rowElements = pageBody[i].querySelectorAll('td');

headElements.item(0).cloneNode(true);

希望这有帮助！

Answer 2

.index()方法不是本机JavaScript方法，而是Jquery方法。这就是您收到错误headElements.index is not a function。

的原因

var headElements = pageHeads[i].querySelectorAll('td');
var rowElements = pageBody[i].querySelectorAll('td');

另外，这两行在循环之外没有多大意义。 i只是一个变量，用于存储要选择的任何pageHeads元素的索引。除非定义了i（在循环内部或外部），否则您的代码将返回错误。

解决方案

（1）将i设置为您要使用的pageHeads元素的索引。

（2）要访问pageHeads的子元素，只需查找其索引即可。使用带括号表示法的索引来访问子元素。

var headElements = pageHeads[0].querySelectorAll('td');
headElements[0]; // This will return the first element in the headElements nodelist.

修改

您似乎正在寻找表头中错误的子元素。

var headElements = pageHeads[i].querySelectorAll('td');

应该是：

var headElements = pageHeads[i].querySelectorAll('th');

请参阅此fiddle