JavaScript는 getAttributeNode() 메서드를 통해 요소에서 지정된 이름을 가진 속성 노드(attribute node)를 찾아 속성 객체(attribute object) 형태로 반환하는 기능을 제공합니다. 만약 해당 속성이 존재하지 않으면 반환값은 null 또는 빈 문자열("")입니다.
문법
element.getAttributeNode(attributename);
이 메서드는 지정된 속성 노드를 나타내는 속성 객체를 반환합니다. 반환된 객체에는 속성의 이름(name)과 값(value) 등의 정보가 포함되어 있으며, 일반적으로 .value를 사용해 실제 속성 값을 읽어옵니다.
예제
다음 예제에는 서로 다른 클래스를 가진 두 개의 h2 제목 태그가 있습니다. 이 태그들에 getAttributeNode()로 접근하면 각각에 연결된 class 속성을 반환받을 수 있습니다. 배열처럼 동작하기 때문에 인덱스 번호만 제공하면 여러 개의 클래스에도 접근할 수 있습니다.
<html>
<body>
<h2 class="class1">Tutorix</h2>
<h2 class="class2">Tutorialspoint</h2>
<p id = "attribute"></p>
<script>
var elmnt = document.getElementsByTagName("h2")[1];
var value = elmnt.getAttributeNode("class").value;
document.getElementById("attribute").innerHTML = value;
</script>
</body>
</html>출력 결과
Tutorix Tutorialspoint class2
참고: 더 간단한 대체 방법
실무에서는 클래스 값만 필요한 경우 getAttribute("class")나 element.className을 사용하는 것이 더 간결하고 널리 사용됩니다. 반면 getAttributeNode()는 속성 노드 객체 전체(예: 속성 이름과 값이 함께 필요한 경우)를 다뤄야 할 때 유용합니다.