JS - DOM 이라는 용어개념정리 & load 이벤트

1. DOM 이란?

Document Object Mode 이라는 뜻

자바스크립트는 HTML 조작에 특화된 언어이다.
하지만 자바스크립트가 어떻게 HTML 을 조작할 수 있는지 원리를 생각해본다면??

자바스크립트와 HTML 은 분명 다른 언어이다.
그래서 자바스크립트에선 <p></p> 이런 html을 직접 해석하고 조작할 수 없다

<script>

 <p></p>.innerHTML = '안녕' (당연히 에러날듯)

</script>

-> 바로 에러!

그렇다면 어떻게 HTML 태그들을 알아보고 조작할 수 있나요?

자바스크립트가 HTML 조작을 하기 위해선 HTML을 자바스크립트가 해석할 수 있는 문법으로 변환해놓으면 된다

실제로 브라우저는 HTML 페이지를 열어줄 때 HTML을 자바스크립트로 쉽게 찾고 바꾸기 위해 object 와 비슷한 자료형에 담아준다

ex)

<div style="color : red">안녕하세요</div>

브라우저는 이런 HTML을 발견하면 object 자료로 바꿔서 보관한다

var document = {
  div1 : {
    style : {color : 'red'}
    innerHTML : '안녕하세요'
  }
}

이렇게 저장을 해야 점을 찍고 원하는 자료를 출력하고 조작할 수 있다
document.div1.innerHTML = '안녕' 이렇게!

위의 변수들을 document object라고 한다
Document Object Model

(요약)
자바스크립트가 HTML에 대한 정보들 (id, class, name, style, innerHTML 등)을 object 자료로 정리한 걸 DOM 이라고 한다 :)

2. 브라우저는 HTML 문서를 위에서부터 읽으며 DOM을 생성한다

브라우저는 HTML문서를 위에서부터 차례로 읽어 내려가고, 읽을때마다 HTML을 발견하면 DOM 에 추가해준다

(html 파일)

<script>
  document.getElementById('test').innerHTML = '안녕'
</script>

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

-> 에러발생! 이유는?

브라우저는 HTML을 위에서부터 한줄한줄 읽는데 갑자기 자바스크립트로 <p id="test"> 인 요소를 DOM에서 찾고 바꾸라고 하는 것이기 때문에 에러가 난다

아직 <p id="test">를 읽기 전이라 p태그에 대한 DOM이 생성되지 않았기 때문이다
이렇듯 자바스크립트는 DOM이 생성된 경우만 HTML을 변경할 수 있다.

3. 자바스크립트 실행을 나중으로 미루는 방법

"이 코드는 HTML 전부 다 읽고 실행해주세요" 라고 코드를 짜놓을 수 있다.

$(document).ready(function(){ 실행할 코드 })
document.addEventListener('DOMContentLoaded', function() { 실행할 코드 }) 

둘 다 "HTML을 다 읽어들였는지" 를 알려주는 이벤트리스너 이다.

(html 파일)

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

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

-> 작동이 잘 된다!

4. load 이벤트리스너

load 라는 이벤트리스너를 사용하면 DOM 생성 뿐만 아니라 이미지, css, js 파일이 로드가 됐는지도 체크가 가능하다
이미지 같은게 로드되면 load 라는 이벤트가 발생한다

셀렉터로찾은이미지.addEventListener('load', function(){
  //이미지 로드되면 실행할 코드 
})

이걸 외부 자바스크립트 파일에 적으면 js 파일보다 이미지가 더 먼저 로드 되는 경우가 있어 이벤트 발생체크를 못할 수 있다

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

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

window에 붙이기도 가능하다
.ready()는 DOM 생성만 체크하는 함수이고 load 이벤트는 더 나아가서 모든 파일과 이미지 로드상태를 체크한다