HTML DOM의 getElementById() 메서드는 id를 매개변수로 전달하여 해당 요소를 반환하는 함수입니다. 웹 페이지에서 특정 요소를 선택해 이후 조작하기 위해 가장 널리 사용되며, 가장 쉬운 방법 중 하나로 꼽힙니다. 만약 지정한 id가 문서 내에 존재하지 않으면 NULL을 반환합니다.
문법(Syntax)
getElementById() 메서드의 기본 문법은 다음과 같습니다.
document.getElementById(elementID)
예제(Example)
getElementById() 메서드의 실제 사용 예를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<script>
function changeLink() {
var l = document.getElementById("LINK1");
l.style.color = "red";
l.style.fontSize="40px";
}
</script>
</head>
<body>
<h1>getElementById() example</h1>
<a id="LINK1" href="https://www.google.com">GOOGLE</a>
<p>Click the below button to apply styling to the above link</p>
<button onclick="changeLink()">CHANGE</button>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CHANGE 버튼을 클릭하면 링크의 스타일이 아래와 같이 변경됩니다.
코드 상세 설명
먼저 id가 "LINK1"이고, href 속성 값이 "https://www.google.com"으로 설정된 앵커(<a>) 요소를 생성했습니다.
<a id="LINK1" href="https://www.google.com">GOOGLE</a>
그다음, 사용자가 클릭하면 changeLink() 함수를 실행하는 CHANGE 버튼을 만들었습니다.
<button onclick="changeLink()">CHANGE</button>
changeLink() 함수는 document 객체의 getElementById() 메서드에 <a> 요소의 id를 매개변수로 전달하여 해당 요소를 가져옵니다. 반환된 요소는 변수 l에 할당되며, 이후 전역 style 속성을 활용해 앵커 태그의 color와 fontSize 속성 값을 설정합니다.
function changeLink() {
var l = document.getElementById("LINK1");
l.style.color = "red";
l.style.fontSize = "40px";
}이처럼 getElementById() 메서드를 활용하면 id 하나만으로 원하는 DOM 요소에 즉시 접근할 수 있으며, 스타일 변경뿐 아니라 텍스트 수정, 이벤트 처리 등 다양한 동적 조작에 활용할 수 있습니다.