[JavaScript] document.getElementById() - 특정 id를 가지고 있는 dom 요소를 찾기/가져오기

javascript로 dom 요소를 제어할때 가장 많이 사용되는 메서드중 하나인 document.getElementById()에 대해 알아보자.

메서드명 그 의미를 그대로 가지고 있어, 특정 id를 가지고 있는 dom 요소에 접근하기 위한 메서드이다.

지금까지 그냥 아무생각없이 사용해왔는데, 한번 공부할 겸 정리하고자 한다.

▷ 구문

document.getElementById(id);

id : 찾으려는 요소 id를 의미하며, 대소문자를 구분하는 문자열을 사용해야하는데 id는 기본적으로 문서 내에서 유일해야 한다. (처음 발견하는 id 하나만 반환하며, 주어진 id가 없을 경우 null을 반환한다.)

▷ 예제 1) document.getElementById() 사용법

<!doctype html>
<html lang="ko">
  <head>
    <script src="./test.js"></script>
    <title>mineItRecord</title>
  </head>
  <body>
    <div id="div-1">div-1</div>
    <div id="div_2">div_2</div>
    <div id="div3">
      <span>div3</span>
    </div>
  </body>
</html>

// 기본적인 사용법
document.getElementById('div-1'); // <div id="div-1">div-1</div>
document.getElementById('Div-1'); // null

// 축약 사용법
div_2; // <div id="div_2">div_2</div>
div3; // <div id="div3">...</div>
div-1; // ReferenceError: div is not defined

예제를 보면 신기하게도 축약하여 사용하여도 바로 접근이 가능한데, 그냥 이렇게도 사용이 가능하구나 정도로만 알아두고

좀 더 명확하게 document.getElementById() 메서드를 사용해주도록 하자.

참고 : https://developer.mozilla.org/ko/docs/Web/API/Document/getElementById

Document.getElementById() - Web API | MDN

Document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을

developer.mozilla.org