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이 정의되어 있지 않으면 (루프 내부 또는 외부에서) 코드가 오류를 반환합니다.

사용하려는 pageHeads 요소의 인덱스에 솔루션

(1) 설정 i.

(2) pageHeads의 하위 요소에 액세스하려면 해당 색인을 찾으십시오. 대} 호 표기법과 함 2 색인을 사용하여 하위 요소에 액세스하십시오.

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