웹브라우저 자바스크립트 - Object Model

Object Model - https://opentutorials.org/course/1375/6622

자바스크립트를 통해서 브라우저를 제어하기 위해서 자바스크립트로 제어할 수 있는 무엇인가가 있어야한다.

그 무엇이 Object(객체)이다.

브라우저의 여러 구성요소들을 객체로 만들어서 제공해주는 것을 Object Model이라고 한다.

자바스크립트로 브라우저를 제어하기 위해서 객체를 만드는 것을 객체화라고 한다.

아래는 객체화의 예시이다.

img태그가 있는 html문서가 있다.

여기서 img태그를 제어하려면 브라우저가 가지고 있는 객체를 사용하여 제어할 수 있다.

브라우저에는 document라는 객체가 이미 있는 상태이며 이 객체가 가지고 있는 메소드 중 getElementsByTagName을 사용하여 img태그로 되어 있는 것들을 모두 제어할 수 있다.

var imgs = document.getElementsByTagName('img'); 은 img태그로 되어있는 모든 element를 가지고 와서 imgs라는 변수에 값을 받겠다 라는 뜻이다.

값들은 복수이기 때문에 배열을 이용하여 값을 확인 해야 한다.

imgs[0]은 첫번째 element값을 가져온다.

imgs[0].style.width='15px'; 는 객체화를 통하여 img태그값을 가져왔기 때문에 img태그의 css도 제어할 수 있는 것을 확인 할 수 있다.

Window객체와 DOM, BOM, JavaScript의 관계

아래 객체의 공통점은 브라우저를 제어한다는 것이다.

Window - 전역객체, frame 이라고 한다.

DOM(Document Object Model)에는 document 객체가 있는데 웹페이지에 있는 문서(body, img태그 등등..)을 제어하는 역할을 한다.

BOM(Browser Object Model)는 현재 웹브라우저가 가리키고 있는 url을 알아내기, 웹브라우저가 표시하고 있는 페이지를 리로드하는 객체이며 브라우저를 제어한다.

JSC(JavaScript Core)는 브라우저, 구글앱스스크립트, node.js를 제어한다.