JavaScript / getElementById()로 ID가 있는 요소 선택하기

document.getElementById("notice")는 현재 문서에서 id="notice"인 요소를 찾아 요소 객체를 반환합니다. 일치하는 요소가 없으면 null을 반환하며, ID의 대소문자를 구분합니다. CSS 선택자와 달리 인수에 #을 붙이지 않는 것이 기본 사용법입니다.

ID 문자열로 요소 하나 선택하기

const notice = document.getElementById("notice");

if (notice !== null) {
  notice.textContent = "처리가 완료되었습니다.";
}

위 코드는 문서에 <p id="notice">안내</p>가 존재한다는 전제입니다. 반환값은 텍스트 자체가 아니라 DOM(Document Object Model, 문서 객체 모델)의 요소 객체이므로, 텍스트가 필요하면 textContent 같은 속성에 접근합니다. 선택한 결과를 변수에 저장해 두면 같은 요소를 계속 사용할 수 있습니다.

메서드 이름의 철자도 정확해야 합니다. getElementById의 마지막 부분은 Id이며 getElementByID가 아닙니다. 이 메서드는 단일 ID를 찾는 용도이고, 일반 요소 객체에서 parent.getElementById()처럼 호출하는 메서드는 아닙니다. 관련 규칙은 MDN의 getElementById() 문서에 설명돼 있습니다.

찾기·변경·복원을 실습하는 전체 예제

다음 코드를 get-element-by-id.html에 UTF-8로 저장하고 브라우저에서 여세요. 스크립트가 모든 대상 요소 뒤에 있으므로, 코드가 실행될 때 버튼과 출력 영역이 이미 문서에 만들어져 있습니다. 별도 라이브러리는 필요하지 않습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ID로 요소 찾기</title>
</head>
<body>
<h1>ID로 요소 찾기</h1>
<p id="notice">처음 안내</p>
<label for="lookup-id">찾을 ID</label>
<select id="lookup-id">
  <option value="notice">notice</option>
  <option value="Notice">Notice</option>
  <option value="#notice">#notice</option>
  <option value="missing">missing</option>
</select>
<button id="find" type="button">찾기</button>
<button id="change" type="button">안내 변경</button>
<button id="restore" type="button">복원</button>
<pre id="output"></pre>
<script>
const notice = document.getElementById("notice");
const selectedId = document.getElementById("lookup-id");
const output = document.getElementById("output");
function findElement() {
  const element = document.getElementById(selectedId.value);
  if (element === null) {
    output.textContent = "요소를 찾지 못했습니다.";
    return;
  }
  output.textContent = `태그: ${element.tagName}\n내용: ${element.textContent}`;
}
document.getElementById("find").addEventListener("click", findElement);
document.getElementById("change").addEventListener("click", () => {
  notice.textContent = "변경한 안내";
  findElement();
});
document.getElementById("restore").addEventListener("click", () => {
  notice.textContent = "처음 안내";
  selectedId.value = "notice";
  findElement();
});
findElement();
</script>
</body>
</html>

처음에는 태그: P와 내용: 처음 안내가 출력됩니다. ‘안내 변경’을 누르면 같은 요소의 내용이 변경한 안내로 바뀝니다. 이후 선택 상자에서 Notice 또는 #notice만 바꿔 ‘찾기’를 누르면 찾지 못했다는 메시지가 표시됩니다. 요소 자체는 그대로 둔 채 찾는 문자열 한 가지만 바꾸어 비교하는 실습입니다.

‘복원’을 누르면 텍스트와 선택값이 모두 처음 상태로 돌아옵니다. null일 때 속성을 읽지 않고 메시지를 출력한 뒤 return으로 끝내기 때문에, 없는 요소를 선택해도 예제가 중단되지 않습니다. return은 현재 함수를 끝내는 문장입니다.

요소가 있는데 null이 나올 때 확인할 순서

가장 먼저 HTML의 실제 id와 JavaScript의 인수를 비교합니다. 공백, 대소문자, 비슷한 철자의 다른 글자를 확인하세요. name="notice"나 class="notice"만 있는 요소는 이 메서드의 ID 검색 대상이 아닙니다.

다음으로 실행 시점을 확인합니다. 일반 스크립트가 head에서 먼저 실행되면 아래쪽의 요소는 아직 생성되지 않았을 수 있습니다. 이 예제처럼 script를 대상 요소 뒤에 두거나, 외부 파일을 연결할 때 defer를 사용해 문서 파싱 이후 실행되도록 구성할 수 있습니다. 파싱은 브라우저가 HTML을 읽어 문서 구조를 만드는 과정입니다.

<script src="app.js" defer></script>

이 태그는 외부 JavaScript 파일 app.js가 있을 때 사용하는 연결 예시입니다. defer는 외부의 일반 스크립트에 적용하는 방식이며, src가 없는 인라인 일반 스크립트에 붙여도 같은 지연 효과가 생기지 않습니다. MDN의 script 요소 설명에서 실행 순서와 적용 조건을 확인하세요.

요소를 동적으로 만든 경우에는 문서에 추가되기 전인지도 확인합니다. document.createElement()로 객체를 만들고 ID를 붙이기만 해서는 현재 문서의 검색 대상으로 들어가지 않습니다. 나중에 화면에서 생기는 요소라면 생성 이후의 시점에 찾거나, 이미 가지고 있는 요소 객체를 직접 사용하세요.

중복 ID와 다른 선택 방법

한 문서에서 ID는 유일해야 합니다. 같은 ID가 여러 번 나오면 getElementById()가 요소 하나를 반환하더라도, 그것이 의도한 요소라고 신뢰하기 어렵습니다. 복제한 카드나 폼에서 같은 ID를 반복하지 말고, 여러 요소를 한꺼번에 고를 목적이라면 공통 클래스를 사용하세요.

const one = document.querySelector("#notice");
const cards = document.querySelectorAll(".card");

이 부분 코드는 CSS 선택자를 사용하는 다른 API의 문법을 비교한 것입니다. querySelector()는 첫 번째 일치 요소를, querySelectorAll()는 일치한 요소들의 목록을 반환합니다. ID 문자열을 그대로 찾으려는 상황과 CSS 선택자로 조건을 표현하려는 상황을 구분하면 # 유무를 혼동하지 않을 수 있습니다. 선택 후 텍스트를 바꾸는 동작은 innerText·innerHTML·textContent 비교 글의 전체 예제에서도 확인할 수 있습니다.