Document Object Model : DOM
Javascript는 HTML 조작에 특화된 언어입니다.
그런데 HTML과 Javascript는 다른 언어입니다.
그래서 Javascript에선 html을 직접 해석하고 조작할 수 없습니다.
Javascript가 HTML 조작을 하기 위해선 HTML을 Javascript가 해석할 수 있는 문법으로 변환해놓면 됩니다.
HTML을 Javascript가 좋아하는 array 혹은 object 자료형에 담아버리는게 좋지 않을까요?
그래서 실제로 브라우저는 HTML 페이지를 열어줄 때
HTML을 Javascript로 쉽게 찾고 바꾸기 위해 object와 비슷한 자료형에 담아줍니다.
예를 들어,
<div style="color : black">안녕하세요</div>브라우저는 이런 HTML을 발견하면 object 자료로 바꿔서 보관해둡니다.
구체적으로는 var document = { } 이런 변수를 하나 만들어서 거기 넣어줍니다.
var document = {
div1 : {
style : {color : 'black'}
innerHTML : '안녕하세요'
}
}그래서 저렇게 object에 담아두는 것입니다.
(물론 실제 DOM과 생김새는 좀 다릅니다)
위 변수를 document object라고 부릅니다. 간지나게 + model이라고 붙여서 Document Object Model이라고 합니다.
요약하자면 Javascript가 HTML에 대한 정보들 (id, class, name, style, innerHTML 등)을
object 자료로 정리한걸 DOM이라고 부릅니다.
브라우저는 HTML을 위에서부터 한줄한줄 읽습니다.
그런데 갑자기 Javascript로 HTML 요소를 DOM에서 찾고 바꾸라고 하면 에러가 납니다.
Javascript는 DOM이 생성된 경우에만 HTML을 변경할 수 있기 때문입니다.
해결책으로는,
$(document).ready(function(){ 실행할 코드 })
document.addEventListener('DOMContentLoaded', function() { 실행할 코드 })"이 코드는 HTML 전부 다 읽고 실행해주세요" 라고 코드짜놓을 수 있습니다.
위 코드 둘 중 마음에 드는거 쓰면 됩니다.
이 이벤트리스너들은 "HTML을 다 읽어들였는지"를 알려주는 이벤트리스너입니다.
아니면 그냥 Javascript를 <body>태그 끝나기 전에 전부 작성하면 오류 걱정은 안해도 됩니다.
Javascript 위치를 내가 정할 수 없을 경우에만 유용한 방법이라고 보시면 되겠습니다.
'Javascript' 카테고리의 다른 글
| arguments (0) | 2023.06.02 |
|---|---|
| this의 종류 (0) | 2023.05.31 |
| array를 sort로 정렬하는 법 (0) | 2023.05.30 |
| forEach 반복문 (0) | 2023.05.26 |
| 문자 중간에 변수 넣는 방법 (0) | 2023.05.26 |
