HTML DOM hasChildNodes() 메서드

<시간/>

HTML DOM hasChildNodes() 메서드는 요소에 자식 노드가 포함되어 있는지 여부를 확인하는 데 사용됩니다. 요소에 자식 노드가 포함되어 있으면 true를 반환하고 그렇지 않으면 false를 반환합니다. 노드 내부의 공백은 기본적으로 텍스트 노드로 간주되므로 모든 공백을 자식 노드로 간주합니다.

구문

다음은 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() method example</h1>
<div id="DIV1">
<p>This is a p element inside the div element</p>
<span>This is a span element inside the div element</span>
</div>
<br>
<button onclick="checkChild()">CHECK</button>
<p id="Sample"></p>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM hasChildNodes() 메서드

CHECK 버튼을 클릭하면 -

HTML DOM hasChildNodes() 메서드

위의 예에서 -

우리는 먼저 ID가 "DIV1"인

요소를 생성했으며 그 안에

요소와 요소가 포함되어 있습니다 -

<div id="DIV1">
<p>This is a p element inside the div element</p>
<span>This is a span element inside the div element</span>
</div>

그런 다음 사용자가 클릭할 때 checkChild() 메서드를 실행할 CHECK 버튼을 만들었습니다.

<button onclick="checkChild()">CHECK</button>

checkChild() 메서드는 getElementById() 메서드를 사용하여 해당

요소와 이 요소에 대한 hasChildNodes() 메서드를 가져옵니다. div 요소에는 내부에 두 개의 자식이 있으므로 true를 반환합니다. innerHTML 속성을 사용하여 id가 "Sample"인 단락에 동일한 내용이 표시됩니다 -

function checkChild() {
   var div = document.getElementById("DIV1").hasChildNodes();
   document.getElementById("Sample").innerHTML = div;
}