본문 바로가기
영상리뷰

[우아한테크] 곤이 : DOM&BOM

by amoomar 2022. 2. 16.
반응형

 

https://www.youtube.com/watch?v=q1fQnGG1bgU 

해당 영상을 시청하고 내용을 정리해보았다.

 

 

 


1. DOM

 

1) DOM이란?

웹은 html(뼈대), scc(옷), js(기능)으로 구성되어있다. 이때, Java script는 DOM을 통해 확장자가 다른 html과 css파일의 내용을 읽고, 수정하는 것이 가능하게 된다.

 

DOM은 Documemt Object Model의 약자로, 문서(XML, HTML , XTML)에 대한 모든 내용을 담고있는 객체이다. 텍스트 파일로 만들어진 문서를 브라우저가 이해할 수 있는 구조로 구성한 것이며, 바로 이 문서 객체 모델이 html과 css의 파일의 내용을 읽고 수정하는것을 가능하게 해준다는 의미이다.

 

자바 스크립트는 아래 사진에 있는 객체 모델을 이용하여 새로운 HTML 요소나 속성을 추가, 제거, 수정할 수 있으며, CSS스타일을 변경할 수 있고, HTML 이벤트를 추가하고 반응할 수 있다.

 

* DOM트리(노드트리) 사진*

 

 

 

출처 : http://www.tcpschool.com/javascript/js_dom_concept

 

 


 

2) 노드

DOM은 노드(node)라고 불리는 계층적 단위에 정보를 저장하고 있다. DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해 주는 역할을 하는 것이다.

 

HTML 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장되고, 이러한 노드 트리는 노드들의 집합이며, 노드 간의 관계를 보여준다. 노드 트리의 모든 노드는 서로 계층적 관계(상속)를 맺고 있다.

 

노드 트리는 최상위 레벨인 루트 노드(root node)로부터 시작하여, 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려간다.

자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다.

 

노드객체의 종류는 총 12개로, 포스팅에서는 가장 중요한 4개에 대한 내용만 정리하였다.

 

① 문서 노드(document node)

DOM트리의 최상위에 존재하는 루트 노드로서 document객체를 가리킨다. html문서당 document 객체는 유일하다.

 

② 요소 노드(element node)

html 요소를 가리키는 객체이다. 문서의 구조를 표현한다.

 

③ 어트리뷰트 노드(attribute node)

html의 attribute를 가진다. 이는 지정된 html요소의 노드와 형제관계를 가지지만 그 노드의 부모노드와 직접적으로 연결되지 않는다. 따라서 어트리뷰트를 참조하거나 변경하려면 먼저 형제노드인 요소노드에 접근해야한다.

 

④ 텍스트 노드(text node)

html요소의 텍스트를 가리키는 객체이다. 문서의 정보를 표현하고, 자식을 가질 수 없기에 DOM트리의 최종 단이다. 텍스트 노드에 접근하려면 부모 노드인 요소노드에 접근해야한다.

 

 


 

3) DOM API

DOM의 여러 속성과 메서드의 집합이다. 브라우저에서 제공하는 API중 하나이고, 이 API를 이용해 자바스크립트로 웹페이지를 동적으로 조작할 수 있다. HTML 요소를 선택하기 위해 제공되는 메소드인 API의 대표적 종류는 다음과 같다.

메소드 설명
document.getElementsByTagName(태그이름) 해당 태그 이름의 요소를 모두 선택함.
document.getElementById(아이디) 해당 아이디의 요소를 선택함.
document.getElementsByClassName(클래스이름) 해당 클래스에 속한 요소를 모두 선택함.
document.getElementsByName(name속성값) 해당 name 속성값을 가지는 요소를 모두 선택함.
document.querySelectorAll(선택자) 해당 선택자로 선택되는 요소를 모두 선택함.

 

 

이외로 DOM API에 대한 자세한 내용은 아래 링크에서도 확인이 가능하다.

http://www.tcpschool.com/javascript/js_dom_document

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

 


 

2. 렌더링

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

</body>
</html>

 

브라우저의 렌더링은 클라이언트가 서버로부터 요청한 <html>부터 순차적으로 파싱하며 DOM을 생성해 나간다. 이때, 렌더링 엔진은 <title>의 바로 하단부부터 CSS을 로드하는 <link>태그나, <style>태그를 만나면 cssom을 생성하게 된다.

 

cssom은 DOM과 비슷한 트리구조의 오브젝트 모델이다.

 

이후 html파싱이 중단된 지점부터 다시 html을 파싱하기 때문에 DOM생성을 재개한다. DOM과 cssom생성이 끝나면, 이 둘을 합쳐 렌더트리(렌더링을 위한 트리구조)를 구성하는데, meta tag나 scriptTag, css, 디스플레이 등과 같은 것들은 제외하고 구성이 되게 된다. 

 

위의 렌더링 엔진과 마찬가지로 DOM을 생산하다, <script>를 만나면 DOM 생성을 일시중단한다. 브라우저는 자바스크립트 코드를 실행하기 위해 렌더링 엔진에서부터 자바스크립트 엔진으로 제어권을 넘긴다. 이후 자바스크립트 파싱과 실행이 종료되면 렌더링엔진으로부터 다시 제어권을 넘겨 html파싱이 중단된 지점부터 DOM을 생성한다.

 

즉, 스트립트 태그의 위치에 따라 html파싱이 중단되어 DOM생성이 지연될 수 있다는 것이므로, 스크립트 태그의 위치는 중요한 의미를 갖는다.

 

 

보편적으로 CSS태그는 상단, Script태그는 하단에 위치하는데 그 이유는 다음과 같다.

CSS태그를 상단에 위치시키는 이유 - 사용자가 흰 화면을 응시하는 시간을 줄이기 위해
- link를 이요하여 스타일 시트를 다운받는 경우, 최대한 빠르게 다운받기 위해
Script태그를 하단에 위치시키는 이유 -html파서는 script태그를 만나면 파싱을 멈추고 스크립트를 읽기 때문에 로딩이 그만큼 늦춰질 수 있다.
- 생성되지 않은 DOM노드를 읽거나 조작하는 것이 불가능 하기 때문에 예상치못한 오류가 발생할 수 있다.

 

 


 

3. Vitual DOM

 

기존 DOM의 렌더링은 하나의 페이지에서 많은 동작이 이루어지는 SPA에서 비효율적이다. 이런 문제점을 개선하기 위해 등장한 것이 바로 VItual DOM이다.

 

이전 DOM과 가상 DOM에 있는 내용을 비교하여 바뀐 부분만 실제 DOM에 적용하며, react에서는 변경된 부분만을 계산하여 실제 DOM에 적용한다. 

 

결과적으로 브라우저는 불필요한 렌더링 횟수를 줄이고 한 번만 렌더링 할 수 있게 되는 것이다.

 

 


 

4. BOM(브라우저 객체 모델)

 

 

영상 캡처 화면

 

Browser Object Model의 약자로, 웹 브라우저 환경의 다양한 기능을 객체처럼 다루는 모델이다.

 

대부분의 브라우저에서 구현되어 있지만, 정의된 표준이 없어 브라우저 제작사마다 세부사항이 다르다. window객체는 자바스크립트의 최상위 객체이자 전역 객체이면서 모든 객체가 소속된 객체이다.

 

BOM은 웹브라우저의 버튼, URL, 주소입력창, 타이틀바 등 웹 브라우저 윈도우 및 페이지의 일부분을 제어할 수 있게끔하는 역할을 한다.

 

var키워드로 선언한 일반 변수도 모두 window 객체의 속성이 되며, 최상위 객체이기때문에 생략이 가능하다.

 

위 사진에서 볼 수 있다싶이 document객체는 DOM트리의 최상단 객체이며, BOM에 포함되는 관계이다. 때문에 DOM API를 통해 노드 요소를 불러올때 window.를 앞에 붙여도 정상적으로 실행되는 것을 확인할 수 있다.

 

 

 


 

https://velog.io/@ddinggu/HTML-DOM-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC

 

HTML, DOM 간단 정리

HTML & DOM 브라우저 우리가 사용하고 있는 브라우저는 소프트웨어로 사용자가 요청한 자원(URI 주소)을 받아와서 표시해준다. 주로 HTML파일을 받아와 해석하여 보여주지만, 이미지, PDF 등 여러가지

velog.io

 

https://dev-cini.tistory.com/10

 

[React] DOM이란? 가상 돔 (Virtual DOM )이 나오게 된 이유

돔(DOM)이란? DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다. DOM(Document Object Model)을 영어 뜻풀이 그대

dev-cini.tistory.com

 

https://dev-cini.tistory.com/11

 

[React] 가상돔 Virtual DOM이란?

가상 돔(Virtual DOM) 이란? Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용 ✅ 실제 DOM의 가벼운 사본 DOM의 상태를 메모리에 저장하고

dev-cini.tistory.com

 

반응형