HTML DOM의 item() 메서드는 노드 리스트(NodeList) 객체에서 지정된 인덱스 위치에 해당하는 노드를 반환합니다.
참고 − item() 메서드는 노드 리스트 객체에서 인덱스 값을 기반으로 특정 노드에 접근할 때 사용됩니다. 대괄호 표기법으로 nodeListObject[index]처럼 접근하는 것과 완전히 동일한 결과를 반환합니다. 만약 전달된 인덱스가 범위를 벗어나면 null을 반환합니다.
구문
다음은 item() 메서드의 기본 구문입니다 −
item(index) 형태로 호출하며, 인덱스는 0부터 시작합니다.
nodeListObject.item(index)
예제
item() 메서드의 실제 사용 예제를 살펴보겠습니다 −
<!DOCTYPE html>
<html>
<head>
<title>item()</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
ul{
width: 30%;
margin: 0 auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>item( )</legend>
<h2>메뉴</h2>
<ul>
<li onclick="getOrder(0)">맥 앤 치즈</li>
<li onclick="getOrder(1)">피자</li>
<li onclick="getOrder(2)">버거</li>
</ul>
<div id="divDisplay">주문하려면 메뉴 항목을 클릭하세요</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var menuSelect = document.getElementsByTagName("li");
function getOrder(index) {
divDisplay.textContent = '주문: '+(menuSelect.item(index)).textContent;
}
</script>
</body>
</html>코드 설명
위 예제에서는 document.getElementsByTagName("li")를 호출하여 문서 내 모든 <li> 요소를 담은 노드 리스트를 생성합니다. 각 메뉴 항목(<li>)을 클릭하면 해당 항목의 인덱스 값이 getOrder() 함수로 전달되고, 함수 내부에서 menuSelect.item(index)를 통해 클릭된 노드를 가져와 화면에 주문 내용을 표시합니다.
출력 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다 −
<li> 요소를 클릭하기 전 −
<li> 요소를 클릭한 후 −
