HTML DOM contains() 메서드 완벽 정리: 특정 노드의 자손 여부 확인하기

HTML DOM contains() 메서드는 특정 노드가 지정된 노드의 자손(descendant)인지 여부를 확인하는 데 사용됩니다. 여기서 자손이란 해당 노드의 직계 자식뿐만 아니라 손자손, 증손자손까지 모두 포함합니다. 이 메서드는 노드가 실제로 지정된 노드의 자손이라면 true를 반환하고, 그렇지 않다면 false를 반환합니다.

문법(Syntax)

HTML DOM contains() 메서드의 기본 문법은 다음과 같습니다.

node.contains(givenNode)

여기서 givenNode는 필수 매개변수로, 해당 노드가 node에 포함되어 있는지 검사할 대상 노드를 지정합니다.

예제(Example)

HTML DOM contains() 메서드의 실제 사용 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style>
    #DIV1{
        border: 2px solid blue;
        width:160px;
    }
</style>
</head>
<body>
<div id="DIV1">
<p>I live in the <attr id="At" title="United States of America">U.S.A </attr></p>
</div>
<p>아래 버튼을 클릭하면 attr 요소가 div 요소의 자손인지 확인할 수 있습니다.</p>
<button type="button" onclick="divDesc()">CONTAINS</button>
<p id="Sample"></p>
<script>
    function divDesc() {
        var attr = document.getElementById("At");
        var div = document.getElementById("DIV1").contains(attr);
        if(div==true)
            document.getElementById("Sample").innerHTML="attr 요소는 div 요소의 자손입니다."
        else
            document.getElementById("Sample").innerHTML="attr 요소는 div 요소의 자손이 아닙니다."
    }
</script>
</body>
</html>

출력 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

HTML DOM contains() 메서드 완벽 정리: 특정 노드의 자손 여부 확인하기

CONTAINS 버튼을 클릭하면 아래와 같은 결과를 볼 수 있습니다.

HTML DOM contains() 메서드 완벽 정리: 특정 노드의 자손 여부 확인하기

코드 상세 설명

위 예제의 동작 원리를 단계별로 살펴보겠습니다.

먼저 id가 "DIV1"인 <div> 요소를 생성하고, 그 안에 <p> 요소를 배치한 뒤, <p> 요소 내부에 <attr> 요소를 중첩했습니다. CSS 스타일을 통해 "DIV1"에는 파란색 테두리를 적용하고 너비를 지정했습니다.

#DIV1{
    border: 2px solid blue;
    width:160px;
}
<div id="DIV1">
<p>I live in the <attr id="At" title="United States of America">U.S.A </attr></p>
</div>

그다음, 사용자가 클릭하면 divDesc() 함수를 실행하는 CONTAINS 버튼을 만들었습니다.

<button type="button" onclick="divDesc()">CONTAINS</button>

divDesc() 함수는 document 객체의 getElementById() 메서드를 사용해 <attr> 요소를 가져와 attr 변수에 할당합니다. 이어서 <div> 요소의 contains() 메서드를 호출하면서 <attr> 요소를 매개변수로 전달합니다.

<div> 요소가 <attr> 요소를 포함하고 있으므로, 즉 <attr> 요소가 <div> 요소의 자손이므로 contains() 메서드는 true를 반환합니다. 조건문을 통해 반환값을 판별하고, innerHTML 속성을 이용해 id가 "Sample"인 단락에 적절한 결과 텍스트를 표시합니다.

function divDesc() {
    var attr = document.getElementById("At");
    var div = document.getElementById("DIV1").contains(attr);
    if(div==true)
        document.getElementById("Sample").innerHTML="attr 요소는 div 요소의 자손입니다."
    else
        document.getElementById("Sample").innerHTML="attr 요소는 div 요소의 자손이 아닙니다."
}

정리

contains() 메서드는 DOM 트리에서 특정 노드 간의 부모-자손 관계를 손쉽게 확인할 수 있는 유용한 도구입니다. 이벤트 위임(event delegation) 구현 시 클릭된 요소가 특정 컨테이너 내부에 속하는지 판별하는 등 실무에서도 다양하게 활용됩니다. 단, 주의할 점은 어떤 노드가 자기 자신에 대해 contains()를 호출하면 true가 반환된다는 점입니다.