HTML DOM의 hasAttributes() 메서드는 특정 요소에 속성(attribute)이 존재하는지 여부를 확인하는 데 사용됩니다. 요소에 하나라도 속성이 있다면 true를 반환하고, 속성이 전혀 없다면 false를 반환합니다. 참고로, 이 메서드를 요소(element) 노드가 아닌 다른 종류의 노드에 호출하면 항상 false가 반환된다는 점도 기억해 두세요.
문법(Syntax)
hasAttributes() 메서드의 기본 문법은 다음과 같습니다.
node.hasAttributes()
별도의 매개변수 없이 호출하며, 불리언(Boolean) 값인 true 또는 false를 반환합니다.
예제(Example)
hasAttributes() 메서드의 실제 동작을 확인할 수 있는 간단한 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h1>hasAttributes() example</h1>
<p>This paragraph has no attributes</p>
<button onclick="containsAttr()">CHECK</button>
<p id="Sample">The paragraph above hasAttribute value : </p>
<script>
function containsAttr() {
var p = document.getElementsByTagName("P")[0];
document.getElementById("Sample").innerHTML+=p.hasAttributes();
}
</script>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
CHECK 버튼을 클릭한 후의 결과는 아래와 같습니다.
코드 설명
위 예제가 어떻게 동작하는지 단계별로 살펴보겠습니다.
1. 속성이 없는 문단 생성
먼저 어떠한 속성도 가지지 않는 문단(<p>) 요소를 하나 만듭니다.
<p>This paragraph has no attributes</p>
2. CHECK 버튼 생성
다음으로, 사용자가 클릭하면 containsAttr() 함수를 실행하는 CHECK 버튼을 만듭니다.
<button onclick="containsAttr()">CHECK</button>
3. containsAttr() 함수의 동작 원리
containsAttr() 함수는 getElementsByTagName() 메서드를 사용해 문서 내 모든 <p> 요소를 가져온 뒤, 인덱스 [0]으로 첫 번째 요소를 선택하여 변수 p에 할당합니다. 그다음 변수 p에 대해 hasAttributes() 메서드를 호출하는데, 첫 번째 <p> 요소에는 속성이 없으므로 false가 반환됩니다. 마지막으로 이 결과값을 innerHTML 프로퍼티를 통해 id가 "Sample"인 문단에 추가하여 화면에 표시합니다.
function containsAttr() {
var p = document.getElementsByTagName("P")[0];
document.getElementById("Sample").innerHTML+=p.hasAttributes();
}
정리
hasAttributes() 메서드는 DOM 조작 시 특정 요소에 속성이 설정되어 있는지 빠르게 판단해야 할 때 유용하게 활용할 수 있습니다. 반환값이 불리언 타입이므로 조건문(if 문)과 함께 사용하면 속성 존재 여부에 따라 분기 처리하는 로직을 간결하게 작성할 수 있습니다.