예제 파일에 들어 있는 전체 코드를 실행하면 단일 요소 노드를 선택하는 getElementById() 메서드와 나머지 메서드의 차이점이 보입니다. getElementById() 메서드로 선택하는 요소 노드는 무조건 1개이기 때문에 해당하는 요소 하나만을 보여 주지만, 다른 두 메서드는 HTMLCollection 객체로 여러 요소를 한꺼번에 선택합니다.
여기서 HTMLCollection 객체는 유사 배열이라서 다음 코드처럼 배열의 인덱스로 요소에 하나씩 접근할 수 있습니다.
12/02/getElement.html
<script>
const classEl = document.getElementsByClassName("text");
console.log(classEl[0]);
console.log(classEl[1]);
const tagEls = document.getElementsByTagName("p");
console.log(tagEls[0]);
console.log(tagEls[1]);
</script>
Note 유사 배열
여러 개의 노드를 선택하는 document 객체의 속성이나 메서드를 사용하다 보면 선택된 노드들이 HTMLCollection 객체나 NodeList 객체 등에 담겨 반환되는 것을 볼 수 있습니다. 출력 형태를 보면 마치 배열처럼 보이지만, 배열 자료형에는 없는 여러 객체 속성을 가지고 있습니다. 그래서 자바스크립트에서는 이런 객체를 배열과 비슷하게 보인다고 해서 유사 배열이라고 합니다. 이 객체들은 자체적으로 많은 내용을 담고 있지만, 이 책의 범위를 넘어가므로 자세히 다루지 않습니다. 여기서는 객체 형태지만, 배열처럼 인덱스로 각각의 요소에 접근할 수 있다는 정도만 알면 됩니다.