javascript DOM이란 도대체 무엇인가?

자바스크립트/Javascript 2020. 4. 24. 14:45

728x90

처음에 자바스크립트를 공부할때 dom이라는 이야기를 많이 들었지만 제대로 파악하지 않고

자바스크립트로 개발을 했었다.

하지만 시간이 지나고 기초가 매우 중요한것을 깨닫고 DOM에 대해 공부를 하기시작했다.

이번 포스팅에는 DOM에 대해 알아볼것이다. 그전에 BOM이라는것부터 알아보자

BOM(Browser Object Model)?

웹 서비스 개발은 브라우저와 밀접한 관련이 있다. 현재 나온 모든 웹서비스는 웹브라우저를 통해서 서비스를 제공하기

때문이다. BOM은 브라우저와 관련된 모든 객체들의 집합을 브라우저 객체 모델이라 부르며 이것을 이용해서 브라우저와 관련된 기능들을 구성한다. DOM은 이 BOM중의 하나이다.

브라우저 객체 모델(BOM)의 최상위 객체는 windows라는 객체이며 DOM은 이 window 객체의 하위 객체이기도 하다.

DOM은 Dcoument Object Model의 약자이다 직역하면 문서 객체 모델?? 이것이 도대체 무엇일까?

Dcoument Object란 흔히 SI사업을 하다보면 <html> 이나 <body> 같은 html문서 태그들을 많이 사용하는데.

이 태그들을 javascript가 이용 할 수 있는 객체(object)로 만들면 이것을 Do(Dcoument Object) 라고 한다.

여기에 model을 붙이면 문서 객체를 인식하는 방식 이라고 해석 할수있다.

뭔가 감이 오는가?? 아직 안와도 괜찮다 천천히 살펴보자.

DOM은 넑은 의미로 웹 브라우저가 HTML페이지를 인식하는 방식을 의미한다!

좁은 의미로 본다면 document 객체와 관련된 객체의 집합을 의미 할수도있다.

DOM 구조

DOM은 tree 자료구조로 이루어져 있다. root (Dcouemnt)부터 아랫쪽으로 노드를 뿌리내리며 deep하게 내려가고있다.

여기서 노드는 head,body,title 등을 말하며 태그뿐 아니라 텍스트나 속성등도 모두 노드라고한다.

이중 HTML태그를 요소노드라고 부르고 요소 노드안에 있는 글자르 Text 노드라고 부르기도한다.

그렇다면 JavaScript로 문서객체를 생성한다는것은 무슨 의미인가?

문서 객체가 생성되는 방식은 2가지로 나뉘어 볼수있는데 우선 웹 브라우저가 HTML 페이지에 적혀 있는 태그를 읽으면서 생성하는것이다!

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    
  </body>
</html>

예를들어 위와같은 html 코드가 있다면 웹 브라우저는 html 페이지에 적혀있는 <head> 등 하나씩 읽어가며 문서 객체를 생성한다고 말하고 이것을 정적 문서 객체라고 한다.

반대로 원래 HTML 페이지에 없던 문서객체를 javascript를 이용해 생성할 수 있고 이런 과정을 동적으로 문서객체를 생성한다고 한다.

이정도까지면 DOM에 개념은 이해할수 있을것이다

728x90

[자바스크립트]javascript 생성자 함수 (0)	2020.11.23
[자바스크립트]javascript RegExp란? (0)	2020.11.23
javascript Node 와 Element란? (2)	2020.11.22
[자바스크립트(javascript)] 모든 문자열 치환(repalce,replaceAll) (0)	2020.11.21
[자바스크립트(javascript)]비동기 처리 및 콜백 함수 (0)	2020.11.21

갴발자 디찌 갴발자 디찌