getElementById()란 무엇인가?
getElementById()는 지정한 값과 일치하는 ID 속성을 가진 요소를 반환하는 DOM 메서드입니다. 이 메서드는 HTML DOM에서 가장 널리 사용되는 메서드 중 하나로, 문서 내 요소를 조작하고자 할 때 거의 항상 활용됩니다.
만약 지정된 ID를 가진 요소가 존재하지 않으면 null을 반환합니다. 원칙적으로 ID는 페이지 내에서 고유해야 하지만, 만약 동일한 ID를 가진 요소가 여러 개 존재한다면 JavaScript 코드 기준으로 마지막에 등장하는 요소를 반환합니다.
예제 1: 요소의 텍스트 읽어오기
다음 예제에는 내부 텍스트가 "GetElementById"이고 id가 "element"인 <p> 태그가 있습니다. DOM 메서드인 document.getElementById()를 사용하여 해당 단락 태그 안의 텍스트에 접근하고, 그 값을 화면에 출력합니다.
주의할 점은 .innerHTML 없이는 document.getElementById()가 태그의 내부 텍스트를 읽어올 수 없다는 것입니다. 즉, 요소 자체가 아닌 그 안의 내용에 접근하려면 반드시 innerHTML 속성을 함께 사용해야 합니다.
<html>
<body>
<p id="element">GetElementById</p>
<script>
var s = document.getElementById("element").innerHTML;
document.write(s);
</script>
</body>
</html>실행 결과
GetElementById GetElementById
예제 2: 요소의 텍스트 변경하기
다음 예제에서는 getElementById 메서드를 사용하여 기존 텍스트 "GetElementById"를 "Tutorix"로 교체하고, 그 결과를 출력합니다. 이처럼 innerHTML 속성에 새로운 값을 할당하면 해당 요소의 내용을 동적으로 수정할 수 있습니다.
<html>
<body>
<p id="element">GetElementById</p>
<script>
document.getElementById("element").innerHTML = "Tutorix";
</script>
</body>
</html>실행 결과
Tutorix