JavaScript로 요소 내부의 요소 확인하기
어떤 요소(element)가 다른 요소 내부에 있다는 것은, 예를 들어 div 요소 안에 span 요소가 존재하는 경우를 말합니다. JavaScript는 특정 요소가 다른 요소를 포함하고 있는지 확인할 수 있도록 .contains() 메서드를 제공합니다. 이 메서드는 조건이 충족되면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
구문
node.contains(node);
예제
다음 예제에서는 span 요소가 div 요소 내부에 위치해 있습니다. 따라서 코드가 실행되면 .contains() 메서드가 true를 반환하며, 그 결과가 출력 화면에 표시됩니다.
<html>
<body>
<div id="div">
<p>There is a <span id="span"><b>span</b></span> element inside me.</p>
</div>
<p id = "contain"></p>
<script>
var span = document.getElementById("span");
var div = document.getElementById("div").contains(span);
document.getElementById("contain").innerHTML = div;
</script>
</body>
</html>출력 결과
There is a span element inside of me. true
참고 사항
.contains() 메서드는 직계 자식뿐만 아니라 모든 하위(descendant) 노드까지 검사하며, Chrome, Firefox, Safari, Edge 등 주요 브라우저에서 폭넓게 지원됩니다. 또한 요소 노드뿐 아니라 텍스트 노드도 인자로 전달할 수 있어, DOM 구조를 검증하거나 이벤트 위임(event delegation) 로직을 작성할 때 매우 유용하게 활용됩니다.