[JS] DOM (Document Object Model)

자바스크립트는 HTML 조작에 특화된 언어지만, 엘리먼트들을 직접 해석하고 조작할 수는 없다.

그렇다면 ?
HTML 을 자바스크립트가 해석할 수 있는 문법으로 변환

브라우저는 HTML 페이지를 열어줄 때, 자바스크립트로 쉽게 변환하기 위해 아래처럼 object에 자료를 정리한다

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

👇

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

위 변수를 document object model 이라고 한다

즉
DOM은 자바스크립트가 HTML에 대한 정보들을 object 자료로 정리한 것

브라우저는 HTML 문서를 위에서 아래로 읽고
HTML을 발견하면 DOM에 추가한다

때문에 DOM이 생성된 경우에만 HTML을 변경할 수 있다

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

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

위와 같은 코드가 에러가 나는 이유와도 같다

JS 실행 미루기

$(document).ready(function(){})
document.addEventListener('DOMContentLoaded', function() {}) 

보통 body 태그가 끝나기 전에 JS 를 작성하나, 그러지 못하는 경우 사용할 수 있다

load 이벤트 리스너

셀렉터로찾은이미지.addEventListener('load', function(){})

• DOM 생성뿐만 아니라 이미지, css, js 파일의 로드 여부 체크 가능하다
• 외부 JS 파일에 작성시에는 이미지가 먼저 로드되는 경우도 있어 이벤트 체크를 못 할 수도 있음
  
  

$(window).on('load', function(){});

window.addEventListener('load', function(){})

• window에 붙이면 document에 포함된 이미지, css, js 파일 등 모든 것이 로드 되었는지 체크
• ready() 는 DOM 생성만 체크
  
  

강의 내용 정리한 것입니다