자바스크립트 Dom 이란?

 

 

자바스크립트는 웹 문서를 제어하기 위해 만들어진 언어

다른 html 요소를 추가하거나 제거하는 등 html 문서를 조작하기 위해 만들어진 언어

 

그렇다면 how?

 

브라우저 안에는 웹 문서를 해석할 수 있는 렌더링 엔진이 있음

브라우저로 html 파일을 열게 되면 이 렌더링 엔진이 html를 읽음

그리고 해석이 끝나면 문서를 객체화하여 자바스크립트로 접근할 수 있게 함

 

문서 객체 모델 (Document Oject Model) = DOM

 

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

 

 

DOM

: 문서 객체 모델로, 브라우저에서 자바스크립트로 html를 제어할 수 있도록 제공하는 API

->  API : 자바스크립트 언어 자체는 아니지만브라우저에서 제공하는 기능 

 

 

트리 구조, 돔 트리

 

각각의 요소를 노드라고 함

이 각각의 돔 요소(노드)에 접근해서 제어할 수 있음

 

순서

접근 -> 제어

 

 

브라우저 자체를 제어할 수 있도록 모델링 한 것 : BOM

-> document 객체(웹 페이지 자체를 의미, 톰 트리의 최상위 노드)로 원하는 html 에 접근함

 

let domObject = document.querySelector('h1')

domObject.textContext = '변경합니다~'

-> {해당하는 h1 텍스트 내용} 에서 '변경합니다~' 로 변환됨

 

 

css를 자바스크립트로 제어할 수도록 한 것 : Css OM

 

 

 

 

 

출처 : https://www.youtube.com/watch?v=aTGhKjoZeao