HTML DOM isSameNode() 메서드 – 두 노드가 같은지 확인하는 방법

HTML DOM의 isSameNode() 메서드는 두 노드가 서로 동일한 노드인지 여부를 판별하여 불리언 값(true 또는 false)을 반환합니다.

참고: isSameNode() 메서드는 현재 폐기(deprecated)된 상태이므로, 실제 개발에서는 대신 '===' 연산자를 사용하는 것이 권장됩니다.

구문 (Syntax)

isSameNode() 메서드의 기본 사용법은 다음과 같습니다.

nodeOne.isSameNode(NodeTwo)

두 매개변수로 전달된 노드가 같은 객체를 참조하면 true를, 그렇지 않으면 false를 반환합니다.

예제 (Example)

다음은 isSameNode() 메서드를 활용한 실전 예제입니다. 이 예제에서는 특정 리스트 항목(id가 'cricket'인 요소)이 문서의 첫 번째 <li> 요소와 동일한 노드인지 확인합니다.

<!DOCTYPE html>
<html>
<head>
<title>isSameNode()</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
    ul{
        width: 30%;
        margin: 0 auto;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>isSameNode( )</legend>
<h3>John Doe's Achievements</h3>
<ul>
<li id="cricket">Trophy 1</li>
<li>Trophy 2</li>
<li>Trophy 3</li>
</ul>
<input type="button" onclick="confirmTrophy()" value="Check">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var cricketTrophy = document.getElementById("cricket");
    var trophyOne = document.getElementsByTagName("li")[0];
    divDisplay.textContent = 'NOTE: Check if Trophy 1 was won in cricket';
    function confirmTrophy() {
        if(cricketTrophy.isSameNode(trophyOne))
            divDisplay.textContent = 'Trophy 1 was indeed won in cricket';
        else
            divDisplay.textContent = 'Trophy 1 was not won in cricket';
    }
</script>
</body>
</html>

코드 설명

document.getElementById("cricket")로 id가 'cricket'인 첫 번째 트로피 항목을 가져옵니다.
document.getElementsByTagName("li")[0]으로 문서 내 첫 번째 <li> 요소를 참조합니다.
버튼 클릭 시 confirmTrophy() 함수가 호출되어, 두 참조가 동일한 노드인지 isSameNode()로 비교합니다.
비교 결과에 따라 화면에 해당 메시지가 출력됩니다.

실행 결과 (Output)

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

'Check' 버튼을 클릭하기 전 화면:

HTML DOM isSameNode() 메서드 – 두 노드가 같은지 확인하는 방법

'Check' 버튼을 클릭한 후 화면:

HTML DOM isSameNode() 메서드 – 두 노드가 같은지 확인하는 방법

두 변수가 같은 노드를 가리키므로, 버튼을 클릭하면 "Trophy 1 was indeed won in cricket"라는 메시지가 표시됩니다.