DOM(Document Object Model)이란?
- HTML요소를 Object처럼 조작할 수 있는 Model이며 HTML문서에 접근하기 위한 인터페이스이다. 이 객체 모델은 문서 내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공한다.
- 웹 문서를 브라우저에 렌더링하려면 렌더링 엔진이 웹 문서를 로드한 후 파싱하여 브라우저가 이해할 수 있는 구조로 구성 후 메모리에 적재하는데 이를 DOM이라 한다.
- HTML문서를 브라우저가 이해할 수 있도록 만든 Tree 자료구조이며 HTML문서의 계층적 구조와 정보를 표현한다.
DOM의 특징
- HTML 문서에 대한 모델 구성
브라우저는 HTML 문서를 로드한 후 해당 문서에 대한 모델을 메모리에 생성한다. 이때 모델은 객체의 트리로 구성되는데 이것을 DOM tree라 한다.
- HTML 문서 내의 각 요소에 접근 및 수정
DOM은 모델 내의 각 객체에 접근하고 수정할 수 있는 프로퍼티와 메소드를(DOM API) 제공한다. DOM이 수정되면 브라우저를 통해 사용자가 보게 될 내용 또한 변경된다.
DOM Tree
- DOM Tree는 브라우저가 HTML문서를 로드한 후 파싱하여 생성하는 모델을 의미하며 객체의 트리로 구조화되어 있기 때문에 DOM Tree라 부른다.
- 브라우저는 JavaScript 언어만 이해하기 때문에 HTML의 태그나 속성들을 이해하지 못한다. HTML 문서는 텍스트로만 이루어져 있기 때문에 이해할 수 있는 형태인 객체로 바꿔준 것이 DOM Tree 이다.
- root node 아래에 여러 구성요소가 부모-자식 관계를 가지고 있는데 이런 자료 구조를 트리 구조라 한다. 부모가 자식을 여러 개 가지고 부모가 하나인 구조가 반복된다.
DOM 다루기
- JavaScript는 DOM을 통해 웹 페이지에 접근하고 페이지를 수정할 수 있는데 document객체는 DOM Tree의 root node에 접근하게 해준다. 즉, DOM 트리 안의 다양한 요소(element)와 속성(attribute)에 접근할 수 있고 tag, id, class를 추가 및 style을 수정할 수 있다.
1. CREATE
createElement
const createDiv = document.createElement('div');
console.log(createDiv); // <div></div>
- 새로운 div 엘리먼트(요소)를 생성하고 변수에 할당
append
document.body.append(createDiv);
- 변수 createDiv에 담긴 div 엘리먼트를 body 엘리먼트에 추가(부모 노드에 포함)
2. READ
querySelector
const query = document.querySelector('.test')
- 클래스 이름이 test인 HTML 엘리먼트 중 첫 번째 요소를 조회
- 변수 query에 할당된 엘리먼트는 하나이다.
querySelectorAll
const queryAll = document.querySelectorAll('.test')
- 클래스 이름이 test인 모든 HTML 엘리먼트를 유사 배열(Array-like Object)로 받아온다.
getElementById
const getEl = document.getElementById('test')
- querySelector와 비슷한 역할을 하는 옛날 방식으로 호환성을 신경써야할 경우 사용한다.
3. UPDATE
textContent
createDiv.textContent = 'abcde';
console.log(createDiv); // <div>abcde</div>
- textContent를 통해 div 엘리먼트에 문자열을 입력할 수 있다.
classList.add
createDiv.classList.add('header');
console.log(createDiv); // <div class="header">abcde</div>
- div 엘리먼트에 'header' 클래스를 추가
4. DELETE
remove
createDiv.remove(); // undefined
- 삭제하려는 엘리먼트의 위치를 알고 있는 경우 remove를 이용해 createDiv를 삭제한다.
innerHTML
document.querySelector('#footer').innerHTML = ''
- id가 footer인 요소 아래의 모든 요소를 삭제한다.
- 간단하고 편리한 방식이지만 innerHTML은 크로스 스크립팅 공격(XSS: Cross-Site Scripting Attacks)에 취약점이 있기 때문에 지양하는 것이 좋다.
변수에 저장하는 이유
- DOM selector를 이용할 때마다 브라우저는 document 객체에서 element를 찾는 과정을 반복하게 된다. 만일 원하는 element를 변수에 저장하지 않고 계속 DOM selector를 사용하면 매 단계마다 document 객체를 전부 훑으며 찾기 때문에 메모리 누수가 발생한다.
- 따라서 DOM selector를 이용할 때에는 선택하고자 하는 element를 항상 변수에 저장하는 습관을 들이는 것이 좋다.
BOM(Browser Object Model)
- 브라우저 객체 모델로 브라우저와 관련된 객체들의 집합을 말하며 BOM을 이용해서 브라우저 기능들을 구성한다.
- 북마크, 즐겨찾기, 뒤로가기, 주소창 등 브라우저 전체를 담당한다.
- DOM도 이 BOM 중 하나이며 BOM의 최상위 객체는 window라는 객체이다.
