getElementsByTagName 으로 특정Tag를 선택한후 for/in 문으로 인덱스를 뿌렸을때 이상한 것을 발견했다.

<h1>보라돌이</h1>
<h1>뚜비</h1>
<h1>나나</h1>
<h1>뽀</h1>

var tagH1 = document.getElementsByTagName("h1");

for(var i in tagH1){
  console.log(i);  // 0,1,2,3,length,item,namedItem
}

0,1,2,3 뿐만 아니라 length,item,namedItem 이란 요소가 따라왔다.
다시

document.getElementsByTagName("h1")[0]  // <h1>보라돌이</h1>
document.getElementsByTagName("h1")[1]  // <h1>뚜비</h1>
document.getElementsByTagName("h1")[2]  // <h1>나나</h1>
document.getElementsByTagName("h1")[3]  // <h1>뽀</h1>
document.getElementsByTagName("h1")[4]  // undefined

배열로 접근한다고 잡히지도 않는다.

getElementsByTagName 는 배열이 아니라 nodelist이다.

더군다나 for in 문은 배열의 인덱스를 출력하는것이라기보다 오브젝트의 property를 뱉어낸다.
배열도 오브젝트이다. 인덱스를 뿌려줄수있으나 nodelist라던가 특정 object의 경우 프로퍼티까지 다 나온다.

반대로 배열에서

var a = [ , , 3];

의 경우  일반 for문을 돌리면

for(var i=0; i < a.length ; i++) 
 console.log(a[i]); // undefined, undefined, 3

이렇게 나오지만  for/in문을 쓰면

for(var i in a)
console.log(i); // 3

이렇게 존재하는 요소만 출력한다.