브라우저 환경
자바스크립트는 어디서 실행되냐에 따라 해당 플랫폼 한정으로 추가 기능을 제공하며 ECMAScript의 고유 명세를 넘어선다.
예를 들면 브라우저에서 실행되는 js는 window 전역 객체가 주어지고, node.js는 서버로 동작할 수 있도록 다양한 모듈이 지원된다.
브라우저의 window 객체는 자바스크립트로 제어할 수 있는 한 페이지의 브라우저 창이며, 전역 객체라 코드의 어디서든 마음껏 접근 가능하다.
이 window는 DOM과 BOM을 내포하고 있다.
DOM
DOM은 Document Object Model로 문서의 인터페이스로 문서를 변경할 수 있게 도와준다.
한마디로 HTML(그리고 XML) 문서를 DOM API를 통해 구조, 스타일, 내용을 바꿀 수 있다는 소리다.
W3C의 표준이며, HTML, ECMAScript에서 정의되지 않았다.
BOM
BOM은 Browser Object Model로 브라우저가 제공하는 인터페이스다. 브라우저와 사용자간의 상호작용을 돕는다.
alert, prompt, location 등이 BOM의 일부다.
DOM Tree, Node
우리가 보는 페이지 화면은 렌더 트리이다.
렌더 트리는 DOM 트리와 CSSOM 트리가 합쳐져서 만들어진 것이다.
DOM 트리는 브라우저가 HTML을 파싱하여 생성한 것으로 트리 구조로 형성되어 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>예제용 문서</title>
</head>
<body>
여기는 바디인데 <span>여기는 span의 안입니다.</span>
</body>
</html>위 HTML의 DOM 트리는 다음과 같다.
트리라 그런지 각각 하나하나를 노드라고 부른다.
html 태그는 루트 노드, head와 body는 루트 노드의 자식이다.
태그는 Element node(요소 노드)라 불린다.
재밌는 점은 태그 말고도 텍스트도 ‘text node(텍스트 노드)’가 된다는 것이다.
요소에 있는 문자열은 텍스트 노드가 된다. 위 HTML에서는 여기는 바디인데 와 여기는 span의 안입니다. 가 텍스트 노드이다.
새 줄과 공백 또한, 텍스트 노드에 포함된다. 위의 DOM 트리 사진을 보면 중간중간에 텍스트 노드가 있다. 그 이유는 위 예제에서 엔터키 입력과 공백이 있었기 때문이다.
노드는 열 두가지 타입이 있지만 자주 사용하는 건 이것들이라 한다.
- element node
- text node
- comment node (주석)
- document node
DOM 구조를 직접 보는 방법은 개발자 콘솔로 보는 것이다.
하지만 아무 내용이 없는(공백만 있는) 텍스트 노드는 콘솔에 나타나지 않는다.
Element
element는 Node의 element 타입이다. HTML의 태그들이 element이다.
MDN에 있는 node와 element의 상속 관계이다.
따라서 node이면 element의 기능을 못 쓰고, element이면 node의 기능을 쓸 수 있다.
