HTML DOM NodeList item() 메서드

정의와 사용법

item() method는 NodeList에서 지정된 인덱스 위치의 노드를 반환합니다.

지정된 인덱스 위치의 노드에 접근할 수 있는 두 가지 방법이 있습니다:

list.item(인덱스)

또는

list[인덱스]

가장 간단하고 일반적인 방법은 [인덱스]。

예제

예제 1

<body> 요소의 자식 노드를 가져오기:

const nodeList = document.body.childNodes;

직접 시도해보세요

예제 2

첫 번째 자식 노드의 노드 이름을 가져오기:

const list = document.body.childNodes;
let name = list.item(0).nodeName;

직접 시도해보세요

예제 3

이 예제의 결과는 동일합니다:

const list = document.body.childNodes;
let name = list[0].nodeName;

직접 시도해보세요

예제 4

文档中第一个 <p> 元素的 HTML 内容를 가져오기:

const list = document.getElementsByTagName("p");
let text = list.item(0).innerHTML;

직접 시도해보세요

예제 5

"myDIV" 내 첫 번째 <p> 요소의 HTML 내용을 가져옵니다:

const div = document.getElementById("myDIV");
const list = div.getElementsByTagName("p");
let text = list[0].innerHTML;

직접 시도해보세요

예제 6

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

const div = document.getElementById("myDIV");
const list = div.getElementsByTagName("p");
let text = list[0].innerHTML = "Paragraph changed";

직접 시도해보세요

예제 7

class="child"의 모든 요소의 색상을 변경합니다:

const list = document.querySelectorAll(".child");
for (let i = 0; i < list.length; i++) {
  list[i].style.color = "red";
}

직접 시도해보세요

문법

nodelist.item(인덱스)

또는 간단히:

nodelist[인덱스]

매개변수

매개변수 설명
인덱스

필수. 목록의 노드 인덱스(인덱스).

노드는 문서에서 나타나는 순서로 정렬됩니다.

인덱스는 0에서 시작합니다.

반환 값

타입 설명
객체 지정된 인덱스 위치의 노드.
null 인덱스가 범위를 벗어났을 때.

브라우저 지원

nodelist.item()는 DOM Level 1 (1998) 특성입니다.

모든 최신 브라우저에서 지원됩니다:

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 9-11 지원 지원 지원 지원

관련 페이지

length 속성

entries() 메서드

forEach() 메서드

keys() 메서드

values() 메서드

NodeList 객체

childNodes() 메서드

querySelectorAll() 메서드

getElementsByName() 메서드