티스토리 뷰
DOM이란?
DOM은 document object model의 약자로 직역하면 문서 객체 모델이다.
문서 객체 모델이라는 말만 들어서는 뭐하는 건지 이해가 가지 않아 검색을 해보았다.
먼저 문서 객체는 html의 태그들을 자바스크립트가 이용할 수 있는 객체로 만들면 그것을 문서 객체라고 부른다고 한다.
모델이란 뜻은 모형이라는 의미도 있지만 방식이라는 의미로 해석할 수 있다고 한다.
합쳐보면 html의 태그들을 자바스크립트가 이용할 수 있는 객체로 만드는 방식 이라고 할 수 있다.
내가 이해한 것을 한줄로 정리하면 '자바스크립트가 html의 요소들에 접근하는 방식' 이다.
* html도 일종의 문서이다.
Javascript와 DOM
DOM은 자바스크립트뿐만 아니라 다른 언어들로도 구현이 가능하지만 이 글에서는 자바스크립트를 가지고 DOM을 구현을 해 볼 것이다.
DOM을 구현하기 전에 먼저 html 문서가 tree구조로 이루어져있다는 것을 알고 있어야 한다.
예를 들어 다음과 같은 코드가 있다고 가정해보자
다음과 같은 코드가 있을 때 만들어지는 트리는 다음과 같다.
위 트리에서 title과 같은 태그들을 요소노드라 부르고 요소노드안에 있는 글자를 텍스트노드라고 한다.
이제 우리는 html이 트리구조로 이루어져 있다는 것을 알았으니 자바스크립트를 이용해 필요한 노드에 접근하여 여러 작업들을 할 수 있다.
html에 있는 요소들로 여러가지 작업을 할 수 있을 뿐만 아니라 새로운 요소까지 추가 가능하다.
아래 코드를 보자
위 코드의 실행 결과는 다음과 같다.
코드를 설명하자면 첫줄은 h2태그를 생성한다.
다음줄은 textNode 변수에 create text라는 텍스트노드를 넣는다.
세번째 줄은 h2에 textNode에 담긴 텍스트노드를 넣고 마지막줄에서 body태그에 자식노드로 header 변수에 담긴 h2 태그와 셋째줄에서 넣어준 텍스트노드를 넣어준다.
참고한 블로그
'Front' 카테고리의 다른 글
| Browser 대용량 파일 다운로드 구현기 (0) | 2023.03.20 |
|---|---|
| 해시뱅 (0) | 2019.03.07 |
| SEO 검색 엔진 최적화 (0) | 2019.03.04 |