HTML DOM specified 속성 이해하기 – 속성 지정 여부 확인 방법

HTML DOM의 specified 속성은 특정 속성(attribute)이 실제로 지정되었는지 여부를 확인하는 데 사용됩니다. 해당 속성이 지정되어 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다. 또한, 속성 노드가 생성되었지만 아직 요소에 연결되지 않은 경우에도 true를 반환한다는 점이 특징입니다.

문법(Syntax)

specified 속성의 기본 문법은 다음과 같습니다.

attribute.specified

예제(Example)

아래 예제는 이미지 요소에 alt 속성이 지정되어 있는지 확인하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<body>
<p>버튼을 클릭하여 버튼에 onclick 속성이 지정되어 있는지 확인해 보세요.</p>
<img id="IMG1" src="https://www.tutorialspoint.com/swing/images/swing-mini-logo.jpg"
alt="Learn Swing">
<p> 아래 버튼을 클릭하여 위 이미지에 alt 속성이 지정되어 있는지 확인해 보세요 </p>
<button onclick="checkAlt()">CHECK</button>
<p id="Sample"></p>
<script>
    function checkAlt() {
        var img = document.getElementById("IMG1");
        var s=img.getAttributeNode("alt").specified;
        if(s==true)
            document.getElementById("Sample").innerHTML = "이미지 요소에 alt 속성이 지정되어 있습니다";
        else
            document.getElementById("Sample").innerHTML = "이미지 요소에 alt 속성이 지정되어 있지 않습니다";
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM specified 속성 이해하기 – 속성 지정 여부 확인 방법

CHECK 버튼을 클릭하면 아래와 같이 alt 속성의 지정 여부가 표시됩니다.

HTML DOM specified 속성 이해하기 – 속성 지정 여부 확인 방법

핵심 정리

getAttributeNode() 메서드로 속성 노드를 가져온 뒤, 해당 노드의 specified 속성 값을 확인하면 HTML 문서에서 직접 작성된 속성인지, 스크립트로 동적으로 생성된 속성인지 등을 판별할 수 있습니다. DOM 조작 시 속성의 존재 여부를 검증해야 하는 상황에서 유용하게 활용할 수 있습니다.