DOM

• Document Object Model
• Javascript는 어떻게 HTML 태그들을 알아보고 조작할 수 있을까?
  • HTML을 자바 스크립트가 해석할 수 있는 문법으로 변환해 놓으면 된다.
  • 실제로 브라우저는 HTML 페이지를 열어줄 때, HTML을 자바스크립트로 쉽게 찾고 바꾸기 위해서 object와 비슷한 자료형에 담아준다.

<div style="color : red">Hi</div>

• 브라우저는 이런 HTML을 발견하면 Object 자료형으로 바꿔서 보관해둔다.

var document = {
  div1 : {
    style : {color :"red"}
    innerHTML : "Hi"
  }
}

• 이런식으로 담고 있다.
• 위와 같은 변수를 document object라고 부른다. model이 붙은 것은 그냥 간지라고한다.
• 즉, JavaScript가 HTML에 대한 정보들을 저장한 Object 자료로 정리한 것을 DOM이라고 부른다.
• JavaScript는 DOM이 생성된 경우에만 HTML을 변경할 수 있으므로 해당 HTML을 먼저 적고 Script를 만들어줘야되는 이유가 HTML 정보를 알아야하기 때문이다.

(html 파일)

<script>
  document.addEventListener('DOMContentLoaded', function() { 
    document.getElementById('test').innerHTML = '안녕'
  })
</script>

<p id="test">임시글자</p>

• 그래도 HTML을 다 읽어들였는지에 대한 이벤트 리스너도 제공하고 있다.
• 저 기능을 굳이 쓴다고 하면 자바스크립트 위치를 내가 정할 수 없을 경우에만 유용한 방법이라고 보면된다.

Load

$(window).on('load', function() {
	// document 안의 이미지, js 파일 포함 전부 로드가 되었을 경우 실행할 코드
});

window.addEventListener('load', function() {
	// 위와 동일 코드
});

• load라는 이벤트 리스너를 사용하게 되면 DOM 생성뿐 아니라 image, css, js 파일이 로드 되었는지도 체크가 가능하다.
  • 해당 파일들이 로드되면 load 이벤트가 발생한다.
• 앞의 DOMContentLoaded 와 같은 이벤트는 DOM 생성만 체크하는 함수인데, 약간 더 나아가서 모든 파일과 이미지의 로드 상태를 체크한다고 보면 될 것이다.

• 코딩애플 가라사대.. 존나 명심하겠다.