티스토리 뷰
첫번째 면접때 virtual dom에 대해서는 잘 대답했지만. 막상 제일 근본인 DOM에 대해서는 잘 설명하지 못했다.
이때 받았던 질문으로는 BOM도 포함되어있었다.
제대로 다시 공부를 해보자.
시작하기에앞서
BOM이란? : 브라우저 객체 모델
웹서비스개발은 결국 개발 후 개발을 마치면? 브라우저에서 보여주는것.
웹서비스와 브라우저는 밀접한 관련이있다.
브라우저와 관련된 객체들의 집합을 브라우저 객체모델 (BOM: Browser Object Model)
브라우저 객체 모델 BOM의 최상위 객체는 window라는 객체다.
DOM은 window객체의 하위 객체
DOM이란? : 문서 객체모델
그렇다면 DOM은 무엇인가
Document Object Model 의 약자이다. 문서 객체 모델
브라우저 객체 모델인 BOM은 느낌이 조금 왔지만, 문서 객체 모델은 무슨일을 하는것인지 통 느낌이안온다.
나만그런가?ㅎㅎ
아래는 MDN검색시 나오는 DOM에 대한 설명과 정의다.
MDN을 읽어도 크게 와닿지가 않는다.
Document Object 문서객체란 <html> <header> <body> 와 같이 html의 태그들을 자바스크립트가 이용할 수 있는 객체로 만들면?
그것을 문서 객체라고 한다.
이제 마지막 글자인 Model. 영어에서는 Model이 다양한의미로 쓰인다는데 모듈로 해석하는게 가장 적합하다고한다.
즉 인식하는 방식. 문서객체를 인식하는 방식인것이다.
DOM은 넓은 의미로 웹브라우저가 HTML페이지를 인식하는 방식이다.
좁은 의미로는 document 객체와 관련된 객체의 집합
웹브라우저는 HTML 문서를 해석하고, 화면을 통해 해석된 결과를 보여준다.
해석한 HTML코드를 화면을 통해 보여주는 과정을 '렌더링'이라고한다.
브라우저는 HTML 코드를 해석해서 요소들을 트리 형태로 구조화해서 표현하는 문서(데이터)를 생성한다.
이를 DOM이라하며, 브라우저는 DOM을 통해 화면에 웹컨텐츠를 렌더링한다.
DOM의 목적
HTML은 정적인데. 동적으로 만들어주고싶다. DOM이 그 역할을 해준다.
즉. 요약하자면
DOM은
- html 코드를 해석해서 요소들을 구조화 해 표현하는 방식이다. (정의,)
- DOM은 자바스크립트를 사용해서 웹 화면의 컨텐츠를 추가,수정,삭제하거나 이벤트를 처리할수 있도록 프로그래밍 인터페이스를 제공한다. (목적)