[모던 자바스크립트 입문] 6-3 DOM에서 가져온 HTML요소에 이벤트 처리

2021. 2. 8. 12:49

DOM객체

DOM에서는 HTML 문서나 HTML 요소를 가리키는 객채로 자바스크립트를 사용하여 HTML 문서를 조작합니다. DOM의 주요객체는 다음과 같이 분류할 수 있습니다.

window
- Window 객체라고 부르며 웹 브라우저 윈도우 하나 또는 탭 하나를 가리킵니다.
document
- Document 객체라고 부르며 HTML 문서 전체를 가리킵니다. HTML 문서에서 HTML 요소객체를 가져오거나 HTML 요소를 새로 만드는 등 HTML 문서 전반에 걸친 기능을 제공합니다.
요소 객체
- HTML 문서의 요소를 가르키는 객체입니다.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>시각을 콘솔에 표시하기</title>

    <script type="text/javascript">
      function displayTime(){
        var d = new Date();
        console.log("현재시각은" + d.toLocaleString() + " 입니다.");
      }

      // 1) window 객체의 onload 프로퍼티에 함수를 저장한다.
      // 이 함수는 웹 브라우저가 문서를 모두 읽어 들인 후에 실행한다.
        window.onload =function(){
        //2) input 요소의 객체 가져오기
        var button = document.getElementById("button");
        //3) input 요소를 클릭했을 때 동작하는 이벤트 처리기를 등록한다.
        button.onclick =displayTime;
      }

    </script>
  </head>
  <body>
    <input type = "button" value= "click" id ="button">
  </body>
</html>

1) window.onload에 초기 설정 함수를 이벤트 처리기로 등록한다.

DOM에서 이벤트 처리기를 등록하는 가장 큰 목적은 HTML 코드와 자바스크립트 코드를 분리하기 위해서입니다. 코드를 분리하면 가독성과 유지 보수성이 높아 집니다. 이를 구현하기 위해 script 요소를 head 요소의 자식 요소로 배치합니다. (script를 head에 구현했다)

DOM을 사용하면, body요소 바깥에서 body요소 안에 있는 HTML 요소를 조작할 수 있습니다. 그러나 head 요소 안에 있는 script요소의 코드가 실행되는 시점은 body 요소를 아직 읽어 들이지 못한 시점입니다. 따라서 이 시점에는 조작하고자하는 요소가 없으므로 이벤트 처리기를 등록할 수 없습니다. 그래서 이벤트 처리기를 등록하느 작업의 실행 시점을 HTML 문서 전체를 읽어 들인 이후로 미룹니다. 이를 위해 window객체의 onload 프로퍼티에 이벤트 처리기를 등록하는 작업을 수행하는 초기 설정함수를 정의합니다.

자바스크립트 코드가 실행되는 시점

웹 브라우저는 HTML 문서를 위에서 부터 차례대로 해석하면서 표시한다. 해석하는 도중 script 요소를 발견하면 script 요소 안에 있는 코드를 해석해서 실행한다. script 요소 안에 있는 코드를 실행한 다음에 HTML 요서를 해석하여 추가해 나간다. 이처럼 script 요소는 동기 실행(블로킹 실행)이 된다.

2) getElemetByID 메서드로 요소 객체를 가져온다.

document 요소에 속하는 getElementById 메서드를 사용하여 요소 객체를 가져옵니다.

var button = document.getElementById("button");

document.getElementById는 전달받은 인수를 id 속성의 값으로 가지고 있는 HTML 요소의 요소 객체를 본환합니다. HTML 요소를 찾기 못하면 null을 반환합니다. 앞의 코드는 id 속성 값이 "button"인 요소(input 요소)의 요소 객체를 가쟈와서 가져와서 변수 button에 저장합니다. 이 요소 객체가 가진 메서드를 사용해서 HTML 요소를 조작하는 다양한 작업을 수행할 수 있습니다.

3) 이벤트 처리기 프로퍼티에 이번트 처리기로 동작할 함수를 등록한다.

마지막으로 input 요소를 클릭했을 때 동작할 이벤트 처리기를 등록합니다.

button.onclick = displayTime;

WantAirpod