HTML DOM Collections

기존에 HTML DOM에 접근하여, 요소를 가져오는 메소드들은 다양한 것들이 있었는데,
예를 들면 getElementsByTagName()이 있었습니다. 이런것들을 컬렉션이라고 부른다고 전에 적었던 기억이 납니다.

이 컬렉션은 객체이지만, HTML 요소의 배열 비스무리한 리스트 객체입니다.
따라서, ()안에 적어주는 태그네임에 따라 그 태그네임을 가지는 모든 요소를 긁어모아와 리스트객체로 만들어줍니다.

이때, 예를 들어
x = document.getElementsByTagName("p");
라고 선언해줬다면, x[1]같이 인덱스를 이용해 N번째 p 요소에 접근할 수 있습니다.
참고로 이 인덱스는 0부터 시작합니다.

이 HTMLCollection의 길이는 단순히
document.getElementsByTagName("p").length;
로 구할 수 있습니다.

x = document.getElementsByTagName("p");`
for (i=0; i<x.length; i++) x.style.backgroundColor = 'dodgerblue';

이런식으로 모든 p의 배경색, 즉 스타일을 바꿔줄 수도 있는데,
여기서 style.하고 뒤에오는 selector들은 반드시 camelCase가 적용되어야 합니다.
background-color가 아니라 backgroundColor임을 기억해주세요.

유의사항

HTML컬렉션은 리스트 객체인데, 이는 배열이 아닙니다.
루프를 이용해 각각의 요소에 접근할 수도 있지만, array의 메소드인 pop(), push()등을 HTML컬렉션에는 사용할 수 없습니다.