[자바스크립트] 빌트인객체(1) - 브라우저와 웹페이지를 위한 객체

[먼저 보면 좋은 게시글]

- DOM : http://jinbroing.tistory.com/90 , http://jinbroing.tistory.com/86

[빌트인객체란]

- 자바스크립트 내장 객체를 말함

- 개발자가 모든 기능을 구현하지않고, 편하게 개발할 수 있도록 자바스크립트에서 기본적으로 제공하는 객체

- 자료형 객체 관련 메서드를 제공함(Standard Builtin Object - String, Array 등)

- 웹페이지 제어 및 동작을 추가하기위한 공통의 기능을 제공함(Native Object - BOM, DOM)

- 반대로는 호스트 객체(Host Object)가 있는데, 호스트 객체란 개발자가 만들어내는 객체임

[브라우저와 웹페이지를 위한 객체]

- 빌드인객체 중 브라우저와 웹페이지 제어 및 동작추가를 위한 객체에 관한 설명임

- 앞서 언급한 Native Object를 뜻함

1) BOM (Browser Object Model)

- 브라우저 탭 또는 브라우저 창의 모델(브라우저의 각종 버튼 등)을 생성함

- 최상위 객체 : window

- 자식 객체

1) document(현재 로드된 웹페이지)

2) history(브라우저 히스토리 웹페이지)

3) location(페이지 URL)

4) navigator(브라우저 관련 정보)

5) screen(장치의 디스플레이 정보)

- 아래의 이미지는 최상위 객체가 객체 프로퍼티(자식객체)를 직접 콘솔창에 입력하여 브라우저와 연관된 정보를 받아와본 결과임

- 유저가 서버에 요청할 때 어떤 환경에서 요청을 하는지를 보내도록 할 때 유용하게 사용됨

2) DOM (Document Object Model)

- 웹문서를 브라우저 엔진이 로드할 때 html 문서를 파싱하거나 웹문서를 개발자가 제어할 수 있기 위해 객체화 및 구조화시켜주는 인터페이스

- 여기서 말하는 웹문서는 html, xml, svg 문서를 말함

- 객체화된 웹문서 구성요소(태그) 즉, 각 객체를 노드라 함

- 자바스크립트 언어의 한 부분은 아님 : DOM API로 객체화된 웹문서 구조를 제어하고, 자바스크립트로 동작 및 연산결과를 넣을 수 있는 것임

- DOM API는 프로그래밍 언어(환경)에서 동작할 수 있도록 만들어짐, 자바스크립트 또한....!

- 최상위객체(문서노드) : document 

- 자식 객체(노드) 

1) 요소 노드(html 태그)

2) 속성 노드(html 태그가 가지고 있는 속성, 요소 노드를 통해 접근)

3) 텍스트 노드(최하위 노드, 요소 노드를 통해 접근)

- 최상위 객체와 자식 객체(3가지 노드)의 관계도를 완성했을 때 나무 형태가 나오는데, 이를 트리구조라 함

- 아래는 DOM 트리 구조를 보여주는 이미지임

(출처 : W3School : https://www.w3schools.com/js/js_htmldom.asp)

- 아래는 현재 로드된 웹페이지 문서 내용을 알기위해 DOM API(노드에 접근하는 방법, 노드 제어관련 메서드)를 사용한 것을 캡쳐한 것임 

- DOM API로 특정 태그(객체)를 가지고 온 후, DOM API로 해당 태그(객체)를 제어함

- 자바스크립트 코드를 삽입하여 제어 과정에서 연산을 한 후, 연산 결과를 삽입할 수 있음

[참고자료]

1) poiemaweb 자바스크립트 빌트인객체 - http://poiemaweb.com/js-built-in-object , http://poiemaweb.com/js-dom

2) MDN DOM 소개 : https://goo.gl/Z8iMX4