[Web] DOM, 그리고 BOM이란?

 

 

수도 없이 사용했던 document.ready, getElementById, location.href ..

'이런 접근은 어떻게 가능한 것일까?'를 한번도 생각해 본 적이 없었던 나를 반성하며 정리하는 글

 

 

 

---

 

 

DOM

◽ DOM(Document Object Model)
- 단어 그대로 '도큐먼트를 객체로 표현하는 모델', 문서 객체을 의미한다.

- 문서 객체란 HTML 문서의 태그들을 JavaScript가 읽을 수 있는 객체(object)로 만든 것이다.

- HTML, XML 문서의 프로그래밍 인터페이스이다.

- DOM은 수정사항이 있을 때 처음부터 렌더링을 거치는데, 스케일이 커질수록 노드가 증가하여 브라우저의 속도가 느려진다.

 

◽ DOM에 접근하기

document 객체를 통하여 접근할 수 있다.

- getElementById()

- getElementByTagName()

- getElementByClassName()

- querySelector()

// 해당 div를 클릭했을 때 hide라는 클래스로 변경하기
<div id="here" class="show">
	<p>안녕!</p>
</div>

<script>
	let target = document.getElementById("here");
	target.addEventListener("click", function() {
		target.removeClass("show").addClass("hide");
	});
</script>

 

◽ 가상 DOM(Virtual DOM)

- Vue.js는 가상 DOM(Virtual DOM) 기반의 렌더링 시스템으로 빠른 렌더링 속도를 자랑한다.

- 가상 DOM은 실제 DOM의 복사본을 메모리 내에 저장하여 사용한다.

- 수정이 될 때 마다 전체가 다시 렌더링 되어 속도의 단점이 있는 진짜 DOM과 달리, 가상 DOM은 변경될 때마다 진짜 DOM과 비교해서 차이를 찾아 그 부분만 수정하는 효율적인 동작을 하여 속도가 빠르다.

 

---

 

BOM

◽ BOM(Browser Object Model)

- 브라우저에 접근 할 수 있는 객체의 모음이다.

- window 객체를 통해 접근할 수 있다.

- DOM은 현재 눈에 보이는 웹문서에 대한 제어와 변경이라면 BOM은 window를 제어한다.

 

◽ BOM에서 제공하는 객체

window 객체를 통하여 접근할 수 있다.

- window: 가장 최상위 객체로, 아래 서술된 모든 객체는 이 객체 아래에 존재한다.

- location

- document

- navigator

- history

- screen

 

 

 

---

 

 

출처 및 참고

DOM 소개

DOM-BOM이란?

[Javascript] BOM과 DOM이란?

[js] DOM과 BOM의 차이점

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.