HTML DOM getAttribute() 메서드 – 문법과 실전 예제로 배우기

HTML DOM의 getAttribute() 메서드는 특정 HTML 요소에 연결된 속성(attribute)의 값을 가져오는 데 사용됩니다. 만약 해당 요소에 지정한 속성이 존재하지 않으면 null 또는 빈 문자열을 반환합니다.

문법(Syntax)

getAttribute() 메서드의 기본 문법은 다음과 같습니다.

element.getAttribute(attributename)

여기서 attributename은 문자열(string) 타입의 필수 매개변수로, 값을 가져오고자 하는 속성의 이름을 의미합니다.

예제(Example)

getAttribute() 메서드의 실제 사용 예를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<script>
    function getAttr() {
        var a = document.getElementsByTagName("a")[0].getAttribute("href");
        document.getElementById("Sample").innerHTML = a;
    }
</script>
</head>
<body>
<h1>getAttribute() example</h1>
<a href="https://www.google.com">GOOGLE</a>
<p>Get the href attribute value of the above link by clicking the below button</p>
<button onclick="getAttr()">GET</button>
<p id="Sample"></p>
</body>
</html>

실행 결과(Output)

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

HTML DOM getAttribute() 메서드 – 문법과 실전 예제로 배우기

GET 버튼을 클릭하면 아래와 같이 링크의 href 속성 값이 표시됩니다.

HTML DOM getAttribute() 메서드 – 문법과 실전 예제로 배우기

코드 상세 설명

위 예제가 동작하는 과정을 단계별로 살펴보겠습니다.

먼저 href 속성 값이 https://www.google.com으로 설정된 앵커(anchor) 요소를 생성했습니다.

<a href="https://www.google.com">GOOGLE</a>

그다음, 사용자가 클릭하면 getAttr() 메서드를 실행하는 GET 버튼을 만들었습니다.

<button onclick="getAttr()">GET</button>

getAttr() 함수 내부에서는 document 객체의 getElementsByTagName() 메서드를 사용해 HTML 문서에서 첫 번째 <a> 요소를 가져옵니다.

이어서 getAttribute() 메서드로 해당 요소의 href 속성 값을 읽어 변수 a에 저장하고, innerHTML 속성을 이용해 id가 “Sample”인 문단(paragraph)에 그 값을 출력합니다.

function getAttr() {
    var a = document.getElementsByTagName("a")[0].getAttribute("href");
    document.getElementById("Sample").innerHTML = a;
}

정리

getAttribute() 메서드는 DOM 조작 시 특정 요소의 속성 값을 확인해야 할 때 매우 유용하게 사용됩니다. 참고로 속성 값을 설정할 때는 setAttribute() 메서드를 함께 활용하면 더욱 효율적인 웹 개발이 가능합니다.