HTMLCollection item() 메서드

정의와 사용법

item() 메서드는 HTMLCollection에서 지정된 인덱스 위치의 요소를 반환합니다.

요소는 소스 코드에서 등장한 위치에 따라 정렬되며, 인덱스는 0에서 시작합니다.

간단한 메서드를 사용할 수도 있으며, 동일한 결과를 얻을 수 있습니다:

var x = document.getElementsByTagName("P")[0];

예제

예제 1

이 문서의 첫 번째 <p> 요소의 HTML 내용을 가져오기:

function myFunction() {
  var x = document.getElementsByTagName("P").item(0);
  alert(x.innerHTML);
}

직접 시도해 보세요

문법

HTMLCollection.item(index)

또는：

HTMLCollection[index]

매개변수 값

매개변수 타입 설명
index Number

필수입니다. 반환할 요소의 인덱스를 지정합니다.

주의사항：인덱스는 0에서 시작합니다.

반환 값

Element 객체는 지정된 인덱스 위치의 요소를 나타냅니다.

인덱스 번호가 범위를 벗어나면 null을 반환합니다.

브라우저 지원

메서드 크롬 IE 파이어폭스 사파리 오페라
item() 지원 지원 지원 지원 지원

더 많은 예제

예제 2

첫 번째 <p> 요소의 HTML 내용을 변경합니다:

document.getElementsByTagName("P").item(0).innerHTML = "Paragraph changed";

직접 시도해 보세요

예제 3

모든 class="myclass" 요소를 순회하며 배경색을 변경합니다:

var x = document.getElementsByClassName("myclass");
for (i = 0; i < x.length; i++) {
  x.item(i).style.backgroundColor = "red";
}

직접 시도해 보세요

예제 4

<div> 요소 내 첫 번째 <p> 요소의 HTML 내용을 가져오기:

var div = document.getElementById("myDIV");
var x = div.getElementsByTagName("P").item(0).innerHTML;

직접 시도해 보세요

관련 페이지

HTMLCollection：length 속성

HTML 요소:getElementsByClassName() 메서드

HTML 요소:getElementsByTagName() 메서드