JavaScript - DOM, Callback

DOM (Document Object Model )

문서 객체 모델

문서에 대한 모든 내용을 담고있는 객체 Document 관련 내용을 객체화 하여 관리한다.

• 자바스크립트로는 객체화 된 모델을 이용하여 동적 HTML을 제어할 수 있다.

• elements(요소) 에 대한 접근을 통해 HTML의 내용을 변경 할 수 있다.

• CSS (style) 의 내용 또한 변경 가능하다.

그중 element를 통해 html에 접근하는 연습을 해보았다.

<button id="btn">버튼</button>

    <script type="text/javascript">
      let btn = document.getElementById("btn")
	  btn.addEventListener("click",clickBtn)
      function clickBtn(){
           console.log("hello world!")
      }
    </script>

• html로 버튼을 하나 만들고 document.getElementById를 사용하여 html의 id가 "btn"인 엘리먼트를 가져와 선언하고 addEventListener을 사용하여 click할 때 마다 hellow world!가 출력되도록 설정하였다.
• document.querySelector("#btn")을 사용하여 가져온 엘리먼트들의 속성은 object 이다.

addEventListener (이벤트 등록)

.addEventListener는 앞에 html 관련 object일때만 사용 가능하다.

• 문법

st.addEventListener(이벤트명,실행할 함수명(call back 내용))

• 이벤트
  "click"은 click하면 함수가 실행된다
  "onload"는 문서의 모든 콘텐츠가 로드된후 실행되는 이벤트이다.

call back

함수를 정의하고 함수를 호출하려고 할 때 뒤에 ()를 쓰지않으면 함수를 정의한 코드만 나온다. 함수명 뒤에 ()를 써야지만 함수가 실행되기 때문에 잠깐 함수를 담고 싶을때 많이 사용하는 방법이다.

위와 같은 상황에서도 callback 함수를 사용하여 함수를 실행하지 않고 있다가 btn을 click 할 시에 함수가 실행되도록 설정한 것이다.

위같은 방법 말고도 화살표 함수를 사용하여 보다 쉽게 코드를 작성할 수 있다.

<button id="btn">버튼</button>

let btn = document.getElementById("btn")
btn.addEventListener("click",()=>console.log("hello world!"))

화살표 함수를 사용하여 보다 간단하게 만들 수 있다.

<button id="btn">버튼</button>

let btn = document.querySelector("#btn")
btn.addEventListener("click",()=>console.log("hello world!"))

getElementById 말고 querySelector를 사용하여도 똑같이 btn을 불러 올 수 있다.