JS는 본래 웹 브라우저에서 사용하려고 만든 언어였다. 진화를 거쳐 현재의 다양한 플랫폼을 지원하는 언어로 변해왔다.
JS가 돌아가는 플랫폼을 호스트 host 라고 부르며, 호스트는 브라우저, 웹서버, 심지어는 커피 머신이 될 수도 있다. 각 플랫폼은 특정되는 기능을 제공하는데, JS 명세서에서는 이를 호스트 환경 host environmnet 라고 부른다.
호스트 환경은 랭귀지 코어 + 플랫폼에 특정되는 객체와 함수를 제공한다.
웹브라우저는 웹페이지를 제어하기 위한 수단을 제공하고, Node.js는 서버 사이드 기능을 제공해주는 것처럼 말이다.
Modern Javascript Tutorial 호스트 환경이 웹 브라우저일 때 사용할 수 있는 기능
최상단에는 window 라는 루트 객체가 있다.
🧐
window객체의 2가지 역할
1. JS 코드의 전역 객체
2. 브라우저 창browser window을 대변하고, 이를 제어할 수 있는 메서드 제공// window 객체를 전역 객체로 사용하는 예시 function good() { alert('good'); } window.good(); // 전역 함수는 전역 객체 (window)의 메서드이다. // 브라우저 창을 대변하는 예시 alert(window.innerHeight); //창 내부 inner window의 높이
🎇 DOM
문서 객체 모델 Document Objects Model
HTML 페이지에 있는 html,head, body, h1, span 등을 HTML 언어에서는 요소 element 라고 한다. 그리고 이것을 JS에서는 문서 객체 document object 라고 한다.
즉, '문서 객체를 조작한다' 라는 의미는 'HTML 요소들을 조작한다' 라는 의미이다. 이와 같이 DOM은 웹 페이지 내의 모든 콘텐츠를 객체로 나타낸다.
document.body.style.background = "red"; 이 외의 문서 객체 모델 관련 프로퍼티와 메서드에 대한 정보는 아래의 링크에서 찾을 수 있다.
❗ DOM은 브라우저만을 위한 모델이 아니다.
DOM 명세서에는 문서의 구조와 이를 조작할 수 있는 객체에 대한 설명이 담겨있다.
그런데 브라우저가 아닌 곳에서도 DOM을 사용하는 경우가 있다. ❗ 스타일링을 위한 CSSOM
CSS와 HTML은 다른 구조를 띈다. 따라서 별도의 명세서 CSS 객체 모델,
CSS Object Model, CSSOM이 존재한다.
CSSOM은 문서에 쓰이는 스타일 규칙을 수정할 때 DOM과 같이 쓰인다.
그런데 CSS의 규칙은 대부분 정적이기 떄문에 실무에서 자주 접하진 않을 것이다. 🎇 BOM
브라우저 객체 모델 Browser Object Model
브라우저 객체 모델은 문서 이외의 모든 것을 제어하기 위해 브라우저(호스트 환경)가 제공하는 추가 객체를 나타낸다.
예시로는 navigator 객체, location 객체와같은것들이있다.
우리가 가장 많이 사용해온 alert ,confirm ,prompt 역시 BOM의 일부이다.
문서와 직접 연결되어 있지 않지만 사용자와 브라우저 사이의 커뮤니케이션을 돕는 순수 브라우저 메서드이다.
❗ BOM은 HTML 명세서의 일부이다.
HTML 명세서는 HTML 뿐만 아니라 다양한 객체와 메서드, 브라우저에서만 사용되는
DOM 확장을 다룬다. 이 모든 것이 HTML 기술에 속하기 때문이다. 🔗 명세서
DOM 명세서 문서 구조, 조작, 이벤트
CSSOM 명세서 스타일시트, 규칙, 조작
HTML 명세서 태그, BOM, DOM 명세서 확장
