JavaScript에서 특정 요소의 자식 노드 개수를 확인하려면 children.length 속성을 사용하면 됩니다. 이 속성은 해당 요소 안에 포함된 자식 요소(HTML 요소 노드)의 총 개수를 숫자 값으로 반환합니다.
아래 예제에서는 document.getElementById('subjectName').parentNode를 통해 특정 <li> 요소의 부모인 <ul> 요소를 가져온 뒤, children.length로 그 안에 들어 있는 자식 요소의 개수를 출력합니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<label>
List Of Subject Names are as follows:
</label>
<ul>
<li>Javascript</li>
<li>MySQL</li>
<li>MongoDB</li>
<li>Java</li>
<li id="subjectName">Python</li>
</ul>
<script>
var arrayValueOfSubject =
document.getElementById('subjectName').parentNode;
console.log("The count of child node
is="+arrayValueOfSubject.children.length);
</script>
</body>
</html>
프로그램 실행 방법
위 프로그램을 실행하려면 파일 이름을 anyName.html(또는 index.html)로 저장한 후, 해당 파일을 마우스 오른쪽 버튼으로 클릭하여 VSCode 편집기에서 'Open with Live Server' 옵션을 선택하면 됩니다.
실행 결과
코드를 실행하면 브라우저 콘솔에 아래와 같이 <ul> 요소의 자식 노드 개수(여기서는 5개의 <li> 항목)가 출력됩니다.
