HTML DOM의 length 속성은 NodeList 객체에 포함된 노드의 총 개수를 숫자 형태로 반환합니다. 이 속성을 활용하면 특정 태그나 선택 조건에 해당하는 요소가 문서 안에 몇 개 존재하는지 쉽게 파악할 수 있습니다.
문법(Syntax)
NodeList 객체에 담긴 노드의 개수를 반환하는 기본 문법은 다음과 같습니다.
nodeList.length
예제(Example)
아래 예제는 HTML DOM length 속성을 활용해 학생 명단의 전체 인원수를 화면에 출력하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM length</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>HTML-DOM-length</legend>
<h3>Students</h3>
<ul>
<li>Adam</li>
<li>Alex</li>
<li>Bina</li>
<li>Eden</li>
<li>Rajesh</li>
<li>Zampa</li>
</ul>
<input type="button" onclick="getStrength()" value="Get Total Students">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var studentList = document.getElementsByTagName("li");
function getStrength() {
divDisplay.textContent = 'Total Students: '+studentList.length;
}
</script>
</body>
</html>코드 설명
위 예제의 핵심 동작 흐름은 다음과 같습니다.
1. document.getElementsByTagName("li")를 호출하여 문서 내 모든 <li> 요소를 NodeList 형태로 가져옵니다.
2. 버튼을 클릭하면 getStrength() 함수가 실행됩니다.
3. 함수 내부에서 studentList.length로 리스트에 포함된 노드의 개수를 구한 뒤, 결과를 divDisplay 영역에 텍스트로 출력합니다.
실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'Get Total Students' 버튼을 클릭하기 전 화면입니다.
'Get Total Students' 버튼을 클릭한 후 화면입니다. 리스트에 있는 학생 수인 'Total Students: 6'이 출력되는 것을 볼 수 있습니다.
정리
HTML DOM의 length 속성은 NodeList뿐만 아니라 HTMLCollection 같은 유사 배열 객체에서도 동일하게 사용할 수 있습니다. 반복문(for, forEach 등)으로 여러 요소를 처리할 때 루프 범위를 지정하는 데 필수적으로 활용되므로, DOM 조작의 기본기로 꼭 익혀두는 것이 좋습니다.