DOM이란?

1.배경설명

HTML과 자바스크립트는 다른 언어인데 자바스크립트는 어떻게 HTML을 조작할 수 있을까?

이유는 브라우저가 HTML 페이지를 열어줄 때 HTML을 자바스크립트로 조작할 수 있게 하기 위해 object와 비슷한 자료형에 담아주기 때문이다.

<div style="color: blue">오랜만이에요.</div>

브라우저가 이런 html을 발견하면,

let document = {
  div1 : {
    style : {color : 'blue'}
    innerHTML : '오랜만이에요'
  }
}

let document = {} 라는 변수를 만들어서 그곳에 넣어준다.
이렇게 저장해야 자바스크립트로 원하는 자료를 출력하고 조작할 수 있기 때문이다.
위의 변수를 document object라 하고 뒤에 model을 붙여서 앞글자만 딴 DOM이라고 한다.

<요약>
자바스크립트가 HTML에 대한 정보들을 object 자료로 정리한 것을 "DOM"이라 한다.

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

(html 파일)
<script>
	document.getElementById('test').innerHTML = '우리 저번주에도 봤잖아'
</script>

<span id="test">에러 발생할까요?</span>

위와 같은 코딩은 에러가 발생하는 코딩이다.

이유는 브라우저는 HTML을 위에서부터 한줄씩 읽는데 자바스크립트보다 아래에 있는 HTML을 DOM에서 찾고 바꾸려고 하니 에러가 나는 것이다.

아직 span 태그를 읽기 전이라 span태그에 대한 DOM이 아직 생성되지 않았으니 당연한 에러다.

위와 같은 에러가 발생하지 않게 하는 방법

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

<script>
  document.addEventListener('DOMContentLoaded', function() { 
    document.getElementById('test').innerHTML = '에러가 발생하지 않습니다.'
  })
</script>

<span id="test">에러 발생할까요?</span>

위에서 배운 코드를 사용했기 때문에 에러가 발생하지 않는다.
(최근에는 자바스크립트를 가장 하단에 작성하기 때문에 걱정할 필요가 없긴 하다.)

3.load 이벤트리스너

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

load라는 이벤트리스너는 DOM 생성뿐 아니라 이미지, css, js 파일이 로드가 됐는지도 체크할 수 있다.

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

📝 .ready( ) VS load

• .ready( ) : DOM 생성만 체크한다.
• load : 모든 파일과 이미지의 로드상태를 체크하므로 더 넓은 범위라고 보면 된다.

출처. 코딩애플