JavaScript의 getElementById 메서드는 HTML DOM(Document Object Model)에서 특정 요소를 선택하는 데 사용됩니다. 그런데 이 메서드의 이름을 잘못 입력하면 document.getElementByID is not a function 오류가 발생합니다.
이 글에서는 이 오류가 의미하는 바와 발생 이유를 살펴보고, 실제 예제를 통해 오류를 해결하는 방법까지 단계별로 알아보겠습니다.
document.getElementByID is not a function 오류란?
document.getElementById() 메서드는 JavaScript의 대표적인 DOM 선택자 메서드 중 하나로, HTML 문서에서 ID를 기준으로 해당 요소 객체를 가져옵니다.
이 메서드는 주로 특정 요소의 내용을 조작하거나, 텍스트·속성 등 요소에 대한 정보를 조회할 때 사용됩니다.
ID는 HTML에서 정의하며, 반드시 고유한 값이어야 합니다. 예를 들어 다음과 같이 작성할 수 있습니다:
<header id="top_header"></header><header> 태그에는 top_header라는 ID가 부여되었으며, 이 ID는 해당 태그에만 고유하게 적용됩니다. ID는 주로 CSS를 통해 특정 요소에 스타일을 지정할 때도 활용됩니다.
메서드 이름은 대소문자를 구분합니다
document.getElementById()는 대소문자를 엄격하게 구분하는 메서드입니다. 따라서 아래와 같은 표기법은 모두 올바르지 않으며, JavaScript가 인식하지 못합니다:
- document.getelementbyid()
- document.getElementByID()
- document.GetElementById()
함수 이름에서 I는 대문자로, d는 소문자로 정확히 입력해야 합니다. "ID"라는 약어 때문에 전부 대문자로 쓰고 싶은 유혹이 있지만, 이 메서드에서만큼은 반드시 Id 순서로 작성해야 한다는 점을 기억하세요.
오류 발생 예제
사용자에게 환영 인사를 보여주는 간단한 코드를 만들어 보겠습니다. 페이지 상단 제목에 환영 메시지가 표시되도록 구성할 것입니다.
먼저 웹페이지의 환영 섹션에 해당하는 HTML 코드를 정의합니다:
<html>
<body>
<header>
<h1 id="welcome_title">Welcome</h1>
</header>
</body>
</html>기본적으로 <h1> 태그에는 Welcome라는 텍스트가 들어 있고, 이 제목은 부모 태그인 <header> 안에 위치합니다. 다음으로 <header> 태그 아래에 <script> 태그를 추가하고, 그 안에 환영 메시지를 처리할 JavaScript 코드를 작성합니다:
…
</header>
<script>
</script>
</body>
...스크립트 내부에서 제목 요소를 선택한 뒤 내용을 변경하는 코드입니다:
var title = document.getElementByID("welcome_title");
title.textContent = "Welcome, Luke!";getElementById() 메서드가 제목 요소를 선택하고, 그 결과를 title이라는 변수에 할당합니다. 그다음 textContent 속성을 이용해 제목 내용을 "Welcome, Luke!"로 바꾸려고 합니다.
코드를 실행하고 개발자 도구 콘솔을 열면 다음과 같은 오류가 표시됩니다:
Uncaught TypeError: document.getElementByID is not a function
오류가 발생했기 때문에 화면의 제목도 변경되지 않은 채 그대로 유지됩니다.
해결 방법
원인은 간단합니다. getElementByID라는 함수 이름을 잘못된 대소문자로 입력했기 때문입니다. 대문자 I와 소문자 d를 사용해야 하는데, 여기서는 대문자 I와 대문자 D를 사용했습니다.
JavaScript는 함수 이름의 대소문자를 구분하기 때문에, getElementByID라고 쓰면 프로그램이 getElementById 함수를 호출하는 것으로 인식하지 못합니다.
코드를 아래와 같이 올바른 대소문자로 수정합니다:
var title = document.getElementById("welcome_title");
title.textContent = "Welcome, Luke!";함수 호출 부분에서 ID 대신 Id를 사용하도록 변경했습니다. 수정된 코드를 다시 실행하면:
프로그램이 정상적으로 동작하여, 제목의 내용이 "Welcome, Luke!"로 성공적으로 변경됩니다.
마무리
document.getElementById() 메서드는 웹 페이지에서 특정 요소를 선택하고, 해당 요소의 내용을 확인하거나 수정할 수 있는 강력한 도구입니다. 다만 이 메서드를 사용할 때는 대소문자를 정확히 지켜야 합니다. "ID"라고 전부 대문자로 쓰면 안 되며, 반드시 대문자 I와 소문자 d, 즉 getElementById 형태로 입력해야 정상적으로 동작합니다.
비슷한 오타 오류를 방지하려면 코드 에디터의 자동 완성 기능을 활용하거나, 자주 사용하는 메서드 이름을 익혀 두는 것이 좋습니다. 오류 메시지의 is not a function이라는 문구를 보면 함수 이름 철자부터 점검하는 습관을 들이면 디버깅 시간을 크게 줄일 수 있습니다.