HTML DOM의 hasChildNodes() 메서드는 특정 요소에 자식 노드(child node)가 포함되어 있는지 확인하는 데 사용됩니다. 자식 노드가 존재하면 true를, 존재하지 않으면 false를 반환합니다. 다만 노드 내부의 공백(whitespace)은 텍스트 노드로 간주되기 때문에, 눈으로 보기에 비어 있는 요소라도 내부에 공백이 있다면 true가 반환될 수 있다는 점에 유의해야 합니다.
문법(Syntax)
hasChildNodes() 메서드의 기본 문법은 다음과 같습니다.
node.hasChildNodes()
예제
hasChildNodes() 메서드의 실제 동작을 확인할 수 있는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<script>
function checkChild() {
var div = document.getElementById("DIV1").hasChildNodes();
document.getElementById("Sample").innerHTML = div;
}
</script>
</head>
<body>
<h1>hasChildNodes() 메서드 예제</h1>
<div id="DIV1">
<p>div 요소 안에 있는 p 요소입니다</p>
<span>div 요소 안에 있는 span 요소입니다</span>
</div>
<br>
<button onclick="checkChild()">CHECK</button>
<p id="Sample"></p>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
CHECK 버튼을 클릭하면 아래와 같이 결과가 표시됩니다.
코드 설명
위 예제에서는 먼저 id가 “DIV1”인 <div> 요소를 만들고, 그 안에 <p> 요소와 <span> 요소를 포함시켰습니다.
<div id="DIV1"> <p>div 요소 안에 있는 p 요소입니다</p> <span>div 요소 안에 있는 span 요소입니다</span> </div>
그다음, 사용자가 클릭하면 checkChild() 함수를 실행하는 CHECK 버튼을 추가했습니다.
<button onclick="checkChild()">CHECK</button>
checkChild() 함수는 getElementById() 메서드로 해당 <div> 요소를 가져온 뒤, 이 요소에 대해 hasChildNodes() 메서드를 호출합니다. div 요소 내부에는 두 개의 자식 요소가 존재하므로 결과값은 true가 되며, 이 결과는 innerHTML 속성을 통해 id가 “Sample”인 <p> 요소에 그대로 출력됩니다.
function checkChild() {
var div = document.getElementById("DIV1").hasChildNodes();
document.getElementById("Sample").innerHTML = div;
}
참고 사항
공백까지 자식 노드로 계산되는 점이 번거롭다면, 요소 노드만 반환하는 element.children 속성을 활용해 element.children.length > 0 형태로 자식 요소의 존재 여부를 판별할 수 있습니다. 이 방법은 텍스트 노드와 공백을 제외한 실제 태그 요소만을 대상으로 검사하기 때문에, 의도한 대로 더 정확한 결과를 얻을 수 있습니다.