DOM(Document Object Model)

---

DOM이란?

자바스크립트는 HTML 조작에 특화된 언어이다.

그런데 HTML 과 JS는 별개의 언어인데 어떻게 html을 해석하고 조작할 수 있을까?

JS가 HTML을 해석하고 조작하기 위해선 HTML을 해석할 수 있는 문법으로 변환해 놓는다.

array 혹은 object 자료형에 담는다면?

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

예를들어,

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

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

구체적으로는 var document = { } 이런 변수를 하나 만들어서 담아 놓는다.

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

위와 같은 방식으로 object 자료에 정리를 해놓는다.

document.div1.innerHTML = ‘안녕’ 이렇게 코드를 치면 HTML 조작이 가능하다. ( 물론 실제 DOM과는 생김새가 좀 다르다.)

위 변수를 document object 라고 부르고 model을 붙여 Document object model이라고 한다.

위 자료와 같이 HTML에 대한 정보들(id, class, name, style, innerHTML 등)을 object 자료로 정리한걸 DOM 이라고 부른다.

interpreter

브라우저는 HTML 문서를 위에서 차례로 읽어내려간다.

읽을 때 마다 HTML을 발견하면 DOM에 추가한다.

 // (index.html..)

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

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

<p id="test"> 를 읽기 전이라서 DOM 에는 p태그에 대한 DOM이 생성되기 전인데 p태그 바꾸려 하기 떄문에

그래서 위와 같은 코드가 에러가 나는 이유다.

defer

위와 같은 에러를 방지하려면

• 해당 요소보다 JS코드를 아래에 위치 시킨다.
• ready, DOMContentLoaded 이벤트리스너

// 1.
$(document).ready(function(){
	//실행할 코드
})

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

// (index.html..)

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

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

⇒ JS 위치를 내가 정할 수 없을 경우에만 유용한 방법이다.

script 태그에 defer 속성을 써줘도 되지만

이건 외부스크립트 코드인 경우에만 가능하다.