toggle-toggle / javascript-basic

🌱우아한 테크코스 프론트엔드 자바스크립트 기초 스터디 입니다.
9 stars 0 forks source link

[DOM & BOM] DOM과 BOM의 차이점에 대해 설명해주세요. #16

Closed ddongule closed 3 years ago

ddongule commented 3 years ago

제곧내

shinsehantan commented 3 years ago

DOM과 BOM은 모두 브라우저의 요소들과 자바스크립트 엔진, 그리고 모든 변수를 담고 있는 전역 객체인 window에 속한 객체 모델들입니다. DOM은 Document Object Model의 약자로 웹 페이지에 대한 인터페이스를 의미한다면 BOM은 Browser Object Model의 약자로 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아니지만, Document 문서 이외의 모든 것을 제어하기 위해 브라우저가 제공하는 추가 객체를 말합니다. DOM은 자바스크립트와 같은 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법(DOM API)을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕고, BOM은 자바스크립트가 웹 브라우저의 버튼, URL 주소 입력 창, 타이틀 바 등 웹브라우저 윈도우 및 웹페이지의 일부분을 제어할수 있게하는 역할을 합니다. 요약하자면 window 객체에서 브라우저 창에 표시되는 내용에 해당하는 문서(document)를 담당하는 것은 DOM, 브라우저를 담당하는 것은 BOM이라고 말할 수 있습니다.

bucketHaneul commented 3 years ago

DOM이란 어떠한 document(열려진 페이지에 대한 정보)에 대한 모든 내용을 담고있는 객체입니다.

좀 더 자세히 말하자면, 텍스트 파일 형태의 웹 문서를 브라우저에 렌더링하려면, 웹 문서를 브라우저가 이해할 수 있는 구조로 변경하여 메모리에 올려야하는데요. 이를 위해 브라우저 렌더링 엔진은 웹 문서를 load하고 parsing하여 알맞은 형태의 객체로 변경하는데, 이러한 객체가 DOM입니다.

BOM이란 앞서 말한 document 이외에 모든 것들을 제어하기 위해 브라우저가 제공하는 객체입니다. 즉, BOM은 브라우저에 대한 모든 내용으로 뒤로가기, 북마크, 즐겨찾기, 히스토리, URL 등을 담고 있는 객체입니다.

Tanney-102 commented 3 years ago

DOM과 BOM 모두 웹페이지를 조작하는 기능을 제공하는 객체 모델이다.

DOM은 모든 html 요소, 어트리뷰트, 텍스트 요소를 트리 형태로 제공하는 객체 모델이다.

BOM은 자바스크립트로 브라우저와 소통할 수 있는 방법을 제공한다. 브라우저에 대한 정보 뿐만 아니라 url 정보, 히스토리, screen 정보 등과 조작할 수 있는 메서드들을 제공한다.

devhyun637 commented 3 years ago

사용자가 만든 문서(Html)를 조작 가능하게 하는 객체 모델을 DOM, 브라우저 환경을 제어하는 객체 모델을 BOM이라고 합니다.

DOMDocument Object Model의 약자로, JavaScript 를 사용하여 문서에 대한 조작이 가능하게 하는 프로그래밍 인터페이스입니다. 브라우저는 브라우저가 이해할 수 있도록, 우리가 작성한 HTML 파일 한줄 한줄을 읽으면서 DOM Tree 로 변환합니다.

BOMBrowser Object Model의 약자로 웹 브라우저 환경의 다양한 기능을 객체처럼 다루는 모델입니다. 웹 브라우저의 버튼, URL 주소 입력 창, 타이틀 바 등 웹브라우저 윈도우 및 웹페이지의 일부분을 제어할 수 있게 해주며, window 객체를 통해서 접근이 가능합니다.

jum0 commented 3 years ago

DOM Document Object Model의 약자로 문서에 대한 모든 내용을 담고 있는 객체 모델입니다. DOM은 텍스트 파일로 만들어진 문서를 브라우저가 이해할 수 있는 구조로 구성한 것으로, HTML 요소 간의 부자 관계를 반영하여 모든 노드들이 트리 구조로 구성되어 있는 것이 특징입니다. 노드의 종류에 대해서 좀 더 자세히 살펴보면, 노드는 DOM 트리의 최상단에 있으며, document 객체를 가리키는 document 노드, HTML 요소를 가리키는 객체인 element 노드, HTML 요소의 속성을 가리키는 객체인 attribute 노드, HTML 요소의 텍스트를 가리키는 객체인 text 노드가 있습니다. BOM은 Browser Object Model의 약자로 웹 브라우저 환경의 다양한 기능을 객체처럼 다루는 모델입니다. 대부분의 브라우저에서 구현되어 있지만, 정의된 표준이 없어 브라우저 제작사마다 세부 사항이 다릅니다. 즉, DOM이 BOM에 포함되는 형태를 띄고 있습니다.

ddongule commented 3 years ago

"DOM" 문서에 대한 모든 내용을 담고 있는 객체입니다. 객체화된 모델을 이용해 동적 HTML을 제어할 수 있습니다. elements에 대한 접근을 통해 HTML과 CSS의 내용을 변경 가능합니다.

"BOM" Browser Object Model 브라우저에 대한 모든 내용을 담고 있는 객체입니다. 뒤로가기 북마크 즐겨찾기 히스토리 URL 정보 등을 포함합니다. 브라우저가 가지고 있는 정보를 따로 객체화 시켜서 관리합니다.