javascript : object model /dom

결론

브라우저 렌더링 엔진

->(텍스트 파일로 만들어져 있는)웹 문서를 로드

-> 파싱하여

-> 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재

-> 이걸 DOM 이라고 한다....

[렌덜링 :      , 파싱:  ]

다시말해,,,

   모든 요소와 요소의 어트리뷰트, 텍스트를 

->각각의 객체로 만들고

-> 이들 객체를 부자관계를 표현할 수 있는 트리 구조로 구성하는 것

-> 이를 DOM이라고 한다 

다시말해,

프로그래밍 언어(자바스크립트)가 접근하고 수정할 수 있는 방법을 제공하는데,,,,

-> 일반적으로 프로퍼티와 메소드를 갖는 자바스크립트 객체로 제공

-> 이를 DOM API라고 부른다...

달리 말해,

정적인 페이지를 동적으로 만드는 유일한 방법은,

-> 메모리 상에 존재하는 DOM을 변경하는 것이고,

-> 이런 DOM에 접근하고 변경하는 프로퍼티와 메소드의 집합인 DOM API이다.

--------------------------------------------------------------------------------

위에 내용 정리

--------------------------------------------------------------------------

브라우저 렌더링 엔진은 

(텍스트 파일로 만들어져 있는) 웹문서를 로드 후

파싱하여

웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재

이를,, DOM이라고 한다..

정리하자면.....

DOM(엘리먼트,엘리먼트의에트리뷰트,텍스트->객체화->객체부자관계,즉 객체트리 구성)

DOM API : 프로그래밍 언어(JS)가 DOM에 접근 하는 방법

              일반적으로, 프로퍼티와 메소드를 갖는 JS객체로 제공

---------------------------------------------------

결론

문서의 내용들을 tree형태로 해서,,,, 

이것들을 자바스크립트 객체화 시킨다는 것이다... 

다시말해,,,,

    웹문서

-> 표준(ESCMA script) 기준 기반으로

-> 윈도우렌더링엔진, 자바스크립트 실행엔진

-> Tree형태의 JS객체화(메모리에 적재할수 있음)

=============================================================

object model

자바스크립트로 브라우저의 여러 구성 요소들을 객체로 만들어 제어 한다는 내용이다.

이미지(태그)를 

자바스크립트로 제어(크게한다던가 작게한다던가)하려면,,, 

이걸 객체화 시켜여야 한다..

우리가 객체를 만드는 것이 아니라,,,,

브라우저에서 이미 웹페이지를 읽는 과정에서

각각의 태그 마다 미리 객체를 만들어 놓고 준비해두고 있는 것이다.

우리는 만들어진 태그에 해당되는 객체를 찾아서,,,

객체의 메소드,,, 객체의 프로퍼티 값을 가져옴으로서

객체를 제어한다는 것이다.

즉 객체가 가르키는 태그를 제어한다는 의미이다...

이미지태그-> 태그에 해당되는 객체 찾기 -> 자바스크립트로 객체를 통해 태그를 제어 한다.

(즉,, 태그를 일일히 쓰는게 아니라,,,, 

자바스크립트라는 언어를 통해 태그를 제어할 수 있게 된다는 의미이다)

('객'체와 '객체 안에있는 매소드 프로퍼티 '는 브라우저에서 제공하는거다.)

----------

예시 :

개발자 도구에 console에 들어가서 써서 해보자..

예를 들어 

이미지 태그인 ,,,,,,,<img src="어쩌구 저쩌구">와 같이 되어 있다면.....

console에다가 아래처럼 쓰면.....

document.getElementsByTagName('img'); 

브라우저가 가지고 있는 객체 document

document안에는 

getElementByTagName('태그이름을이용해 모든elements를 가져온다'라는 뜻)

이라는 메소드가 있다..

이미지태그 안에 요러 요소를 가진 채로 객체화 시킨다는 말이다...

document. 안에는 여러개 요소 엘리먼트가 있기 때문에

배열 형태이다.... 배열 형태는 [ ] 이런식으로 되어 있다....

var bears = document.getElementsByTagName('img'); 를

bears라고 치면  

[ 어쩌구 저쩌구] 이렇게 값이 나올것이다....

그래서,,[  ] 없앤 체로 값을 내려면,,,,

bears[0] 이라고 치면  [ ] 없이 값이 나오게 된다.......

bears[0].styel.width='300px'; 이런식으로 하면 이미지는 300px이 된다..

--------------------------------------------------------------------------------------------

dom bom javascript(core)

window라는 객체 내에 document, navigator 등 다양한 프로퍼티가 있는 것이다..

window 객체는 쓸때 생략 가능

(window.)document  브라우저내 문서제어 객체

(window.)navigator screen location frames history...... 브라우저 오브젝트: 경고창을 띄운다거나 

                                                                     현위치를 파악한다거나 

javascript(core)  자바스크립자체 내의 고유 객체

=======================================================

DOM (Document Object Model)

웹페이지를 구성하는 문서를 구성하는  a태그 body태그 div태그들

그런 하나하나를 객체로 만들어서

자바스크립트가 제어할 수 있도록 한 것이

DOM이다

정의:

-자바스크립트는 DOM을 통해 HTML을 제어한다.

-문서에 프로그래밍적으로 엑세스하고 변형하기 위한 프로그래밍 인터페이스

(자바스크립트라는 것은 웹브라우저랑은 별개의 언어이다. 즉 여기서는 자바스크립트는 '제어'이고 웹브라우저는 '대상'이다.... 또한 웹브라우저/서버/ 플래시플레이어 등도 자바스크립트의 제어되는 대상이다..  )

-자바스크립트를 통해 DOM을 제어해서 웹페이지를 제어한다.....