[20220807_Document Object Model 간단한 개념 정리]

1. JavaScript

: 웹문서를 제어하기 위해 개발된 언어(HTML문서를 조작하기 위해 탄생)

2. DOM

: 브라우저로 파일을 열게되면 엔더링엔진이 HTML로 작성된 문서를 한줄한줄 해석

→ 그리고 이러한 문서를 객체화(문서객체 모델: Document Object Model) 하여 자바스크립트로 접근할 수 있게 함

→ 스크립트 언어로 HTML을 제어할 수 있도록 웹문서를 객체화한것

→ 브라우저에서 자바스크립트로 HTML요소를 제어하는 API

3. Tree 구조

: HTML 내부에는 head, body 태그 그리고 body태그 내부에 p, div, h1...그리고 ul태그 안에 li태그가 위치가능

→ Tree 구조는 하나의 부모태그 & n개의 자식 태그를 가지는 구조

나무 모양의 구조를 가짐. 이걸 DOM Tree라고 부름

4. 그러면 어떻게 노드에 접근하지?

이걸 알기 위해 잠깐 짚고 넘어가야 하는 것이 있다

∙ 브라우저 자체를 모델링: Browser Object Model(브라우저 객체 모델 BOM)

∙ CSS를 자바스크립트로 제어할 수 있게 하는 것: CSS Object Model

❈ BOM(브라우저 객체 모델)에는 웹문서 영역을 제어할 수 있는 객체가 있음 ❈

→ document객체: document객체는 웹페이지 자체를 의미, DOM Tree의 최상위 노드

따라서!!! 원하는 HTML 요소에 접근 가능(DOM요소에 접근하기 위한 진입점)

5. HTML property 접근법

document.querySelector('h1') →DOM의 object를 받아옴

domObject.지원하는속성 = ' '

→ 이렇게 제어가능