NodeListでインデックスメソッドを使用できないのはなぜですか？

Question

何らかの理由で、NodeListオブジェクトのインデックスメソッドを使用できません。私がheadElementsの項目に型を指定すると、ノードとしてオブジェクトとして受け取られます。

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'); 

さらに、これらの2つの行はループ外ではあまり意味がありません。 iは、選択する要素のpageHeads要素のインデックスを格納する変数です。 iが定義されていない限り（ループ内またはループ外）、コードはエラーを返します。

ソリューション

は、（1）使用したいpageHeads要素のインデックスにiを設定します。

（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