자바스크립트 document.getElementById() - id로 dom 요소 찾기

 

 바닐라 자바스크립트로 특정 엘리먼트(요소)를 id 기준으로 찾기 위해서는 document.getElementById() 메서드를 사용할 수 있다. 이 함수를 이용하면 해당 태그의 객체를 반환받아 여러 가지 작업을 진행할 수 있다.

 

형식 : document.getElementById("아이디 명");

 

 

 

예로 아래와 같은 HTML 소스가 있다고 가정하고,

 

<div id="test0">
  <div id="test1">자식1</div>
  <div id="test2">자식2</div>
  <div class="test3">자식3</div>
</div>

 

 

 

id가 test2인 엘리먼트의 객체를 접근하고 싶으면 아래와 같이 할 수 있다.

 

그러면 test2에 해당되는 요소의 객체가 반환될 것이고,

콘솔 창에 출력해보고 싶으면 'textContent'를 활용하면 된다.

그러면 결과 값은 '자식2'가 나온다.

 

<script>
  
  var tmp2 = document.getElementById("test2");
  log.console(tmp2.textContent);
 
  var tmp3 = document.getElementById("test3");
  log.console(tmp3.textContent);
 
</script>

 

 

 

tmp3의 경우 div의 class 명을 넣었는데, 이렇면 당연히 널 값을 반환할 것이다.

id로만 찾기 때문이며, class 명으로 찾으려면 getElementByClass()를 사용하면 된다.

 

참고로 Body 내에 동일한 id를 가진 요소는 선언해서는 안된다.