HTML DOM의 getAttributeNode() 메서드는 지정된 요소의 특정 속성 노드를 Attr 객체 형태로 반환하는 데 사용됩니다. 반환된 Attr 객체가 제공하는 다양한 속성과 메서드를 활용하면 해당 속성의 값을 읽거나 조작할 수 있습니다.
구문(Syntax)
getAttributeNode() 메서드의 기본 구문은 다음과 같습니다.
element.getAttributeNode(attributename)
여기서 attributename은 필수 매개변수이며, 문자열(string) 타입으로 반환받고자 하는 속성의 이름을 지정합니다.
예제(Example)
다음은 getAttributeNode() 메서드의 실제 사용 예제입니다.
<!DOCTYPE html>
<html>
<head>
<script>
function getAttrNode(){
var a = document.getElementsByTagName("a")[0].getAttributeNode("href");
var val=a.value;
document.getElementById("Sample").innerHTML = val;
}
</script>
</head>
<body>
<h1>getAttributeNode() example</h1>
<a href="https://www.google.com">GOOGLE</a>
<p>아래 버튼을 클릭하면 위 링크의 href 속성 값을 가져옵니다.</p>
<button onclick="getAttrNode()">GET</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
GET 버튼을 클릭하면 아래와 같이 결과가 표시됩니다.
코드 상세 설명
위 예제의 동작 과정을 단계별로 살펴보겠습니다.
1. 앵커 요소 생성
먼저 href 속성 값이 “https://www.google.com”으로 설정된 앵커(<a>) 요소를 생성했습니다.
<a href="https://www.google.com">GOOGLE</a>
2. 버튼 생성
그다음, 사용자가 클릭하면 getAttrNode() 함수를 실행하는 GET 버튼을 만들었습니다.
<button onclick="getAttrNode()">GET</button>
3. 함수 로직 분석
getAttrNode() 함수는 getElementsByTagName() 메서드를 사용해 HTML 문서 내 첫 번째 앵커 요소를 가져온 뒤, 매개변수 값 “href”를 전달하여 getAttributeNode("href") 메서드를 호출합니다.
이때 getAttributeNode() 메서드는 href 속성을 나타내는 Attr 객체를 반환하며, 이 객체는 변수 a에 할당됩니다. 이후 Attr 객체의 value 속성을 이용해 href 속성 값을 추출하여 변수 val에 저장합니다.
마지막으로, 가져온 href 속성 값은 innerHTML 속성을 통해 id가 “Sample”인 단락(<p>)에 표시됩니다.
function getAttrNode(){
var a = document.getElementsByTagName("a")[0].getAttributeNode("href");
var val=a.value;
document.getElementById("Sample").innerHTML = val;
}