Javascript DOM

자바스크립트의 배경

html을 조작하기위해 만들어진 언어다 .

웹사이트는 html, css, js로 이루어져있다.

보통 html 파일 내에서 js는

(여기서 js는 초기에 인터프리터 언어지만 엔진에 따라 컴파일러도 가능(ex. v8엔진))

다만 브라우저는 html 전에 js를 읽을 수도 있는데 이걸 해결하기 위해 async나 defer를 사용하는데

defer는 사용자 지정 순서대로 js를 실행할 수 있음 async는 비동기라 먼저 끝나는 걸 먼저 보냄

따라서 defer를 사용해보자

DOM이란 ?

DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.

렌더링 엔진이 HTML 파일을 해석해서 웹문서를 객체화해 js로 접근가능하게 만들어 준 것이다.

• 브라우저 자체를 제어할 수 있도록 모델링한건 bom + js에서 css를 조작할 수 있도록 한건 cssom

**렌더링 엔진**
: 웹문서 해석해주는 것

html이 dom에 접근해서 가져오고 javascript는 dom에 접근에 조작을 한다.
이렇게 javascript가 html을 조작할 수 있도록 함 .

DOM 특성

1. DOM(document object model)
   : html 요소들로 구성된 구조에 맞춰서 조작할 수 있는 상태, 브라우저 안에서 화면에 나타나고 이벤트에 반응 하는 등 기능들을 수행할 객체들로 실체화된 형태임 ( HTML, XMl의 프로그래밍 interface이다. )
   dom은 프로그래밍 언어가 dom 구조(html,xml 문서)에 접근할 수 있는 방법을 제공하여 그들이 문서구조, 스타일, 내용 등을 변경할 수 있게 돕는 API임 (언어가 아니라 브라우저에서 제공하는 기능임.)
   

2. DOM은 트리구조이다.
   dom은 노드(html, body, head 등)로 이루어져있음. 여기서 노드는 html의 요소들을 포함하고있는 추상클래스라고 보면 된다.
   
   

DOM의 핵심 interfaces

• document.getElementById(id)
• document.getElementsByTagName(name)
• document.createElement(name)
• parentNode.appendChild(node)
• element.innerHTML
• element.style.left
• element.setAttribute
• element.getAttribute
• element.addEventListener

참고

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction