JavaScript HTML DOM 셋

HTMLCollection 객체

getElementsByTagName() 메서드가 반환합니다 HTMLCollection 객체。

HTMLCollection 객체는 HTML 요소 목록(집합)의 유사 배열입니다。

다음 코드는 문서 중 모든 <p> 요소를 선택합니다：

예제

var x = document.getElementsByTagName("p");

집합의 요소는 인덱스 번호를 통해 접근할 수 있습니다。

두 번째 <p> 요소에 접근하려면 다음과 같이 작성할 수 있습니다：

y = x[1];

직접 시도해 보세요

주석：인덱스는 0에서 시작합니다。

HTML HTMLCollection 길이

length HTMLCollection 중 요소의 개수를 정의합니다：

예제

var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;

직접 시도해 보세요

예제 설명:

  • 모든 <p> 요소의 콜렉션을 생성합니다
  • 콜렉션의 길이를 표시합니다

length 속성은 콜렉션의 요소를 순회할 때 유용합니다:

예제

모든 <p> 요소의 배경색을 변경하십시오:

var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.backgroundColor = "red";
}

직접 시도해 보세요

HTMLCollection은 배열이 아닙니다!

HTMLCollection은 배열처럼 보일 수 있지만, 실제로는 배열이 아닙니다.

리스트를 순회하며 요소에 숫자를 참조하여 요소를 접근할 수 있습니다. (배열처럼).

그러나, HTMLCollection에 배열 메서드를 사용할 수 없습니다. 예를 들어, valueOf()、pop()、push() 또는 join()。