Window
- 자바스크립트의 최상위 객체/ 전역 객체 / 모든 객체가 소속된 객체
- 브라우저를 대변 + 제어가능 메서드 제공
BOM(Browser Object Model)
- 브라우저 객체 모델: 자바스크립트가 브라우저와 소통하기위해 만들어진 모델
DOM(Document Object Model)
- 문서 객체 모델: 객체 지향 모델로써 구조화된 문서를 표현하는 방식
- 브라우저가 웹 문서를 이해할 수 있도록 구성된 것
- 트리구조 / 자바스크립트를 통해 동적으로 변경 가능
JSC(JavaScript Core)
- 자바스크립트 언어의 자체에 정의되어 있는 객체들. Object, Array, function 등
즉 간단하게 말하자면
Dom도 Bom도 자바스크립트가 웹페이지를 쉽게 조작하기 위해 제공되는 기능, 조작 가능한 객체 모델이라는 것이고,
Bom의 경우는, 웹브라우저에서 제공되는 조작 방식이 어떤 것이 있는지,
Dom의 경우는, html 요소를 어떤식으로 가져와서 조작해야 하는지
에 대해 알아보고 숙달하면 된다.
BOM
자바스크립트를 이용하여 브라우저에 접근하여
브라우저를 조작
window 객체를 통하여 접근 방식
- location 객체: url 주소에 대한 정보를 제공
- window 객체: 최상위 객체로 각 프레임별로 하나씩 존재
- document 객체: 현재문서에 대한 정보
- navigator 객체: 브라우저명, 코드명, 버전정보 제공
- history 객체: 브라우저의 방문기록 정보를 제공
- screen 객체: 브라우저의 외부환경에 대한 정보를 제공
DOM
자바스크립트를 이용하여 각 요소에 접근하여
HTML 소스를 제어, 변경, CSS(style)의 내용 변경
요소에 대한 접근 방식
- getElementById
- getElementByTagName
- getElementByClassName
- querySelector
reference
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
Introduction to the DOM - Web APIs | MDN
The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. This guide will introduce the DOM, look at how the DOM represents an HTML document in memory and how to use APIs to
developer.mozilla.org
'언어(JS,TS) > 그룹스터디' 카테고리의 다른 글
| 그룹스터디 [Browser: DOM] (0) | 2022.05.07 |
|---|---|
| 그룹스터디 [Browser: 브라우저 렌더링 (작동) 원리] (1) | 2022.05.07 |
| 그룹스터디 [보안 : SOP과 same origin] (0) | 2022.05.05 |
| 그룹스터디 [보안 : CORS란?] (0) | 2022.05.05 |
| 그룹스터디 [보안 : 인증방식(Session, Cookie, Token)] (0) | 2022.05.05 |
