Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript HTML DOM으로 노드 리스트의 노드 개수 구하기 – length 속성 활용법

HTML DOM에서 노드 리스트(NodeList)에 포함된 노드의 개수를 확인하려면 length 속성을 사용하면 됩니다.

length 속성이란?

length 속성은 노드 리스트에 저장된 노드의 총 개수를 숫자로 반환합니다. 예를 들어 querySelectorAll() 메서드로 문서 내의 특정 요소들을 선택한 후, 이 속성을 활용하면 해당 요소가 몇 개 존재하는지 손쉽게 알아낼 수 있습니다.

예제 코드

다음 코드를 실행하면 문서 안에 있는 <p> 태그(단락 요소)의 개수를 화면에 출력할 수 있습니다.

<!DOCTYPE html>
<html>
    <body>
        <p>Demo Text1</p>
        <p id = "pid"></p>

        <script>
            var myLen = document.querySelectorAll("p");
            document.getElementById("pid").innerHTML = "이 문서에는 " + myLen.length + "개의 단락(p) 태그가 있습니다.";
        </script>
    </body>
</html>

코드 설명

위 예제에서는 document.querySelectorAll("p")를 호출하여 문서 내 모든 <p> 요소를 노드 리스트 형태로 가져옵니다. 그런 다음 반환된 객체의 length 속성을 읽어 노드 개수를 구하고, 이를 id가 "pid"인 단락에 동적으로 삽입해 결과를 표시합니다.

실행 결과

브라우저에서 위 코드를 실행하면 다음과 같은 결과가 나타납니다.

Demo Text1
이 문서에는 2개의 단락(p) 태그가 있습니다.

<p> 태그가 두 개 존재하므로 length 값은 2가 됩니다. 이처럼 length 속성은 NodeList뿐만 아니라 HTMLCollection 등 유사 배열 객체에서도 동일하게 사용할 수 있어, DOM 조작 시 반복문과 함께 자주 활용됩니다.