Object Model
웹 브라우저의 구성요소를 객체화시켜 객체처럼 사용할 수 있도록 하는 것
브라우저에 렌더링되는 HTML문서는 정적인 문서인데, 정적인 요소를 동적으로 제어하기 위한 객체화 방법
javscript로 제어할 수 있는 객체 형태로 만들어 준다
Window는 전역 객체이면서, 모든 객체가 소속된 객체(최상위 객체?)
Document, navigator, object 등은 window의 Property이면서 각각 객체로서 역할을 한다
object model 출처: tistory1, tistory2, youtube
Window
전역 객체
1
2
3
4
5
6
7
8
9
10
11
12
| <!DOCTYPE html>
<html>
<script>
a = 1; # window 객체의 property, 전역변수, 함수에 소속되지 않은 변수
var b = 2;
alert('Hello world'); # window 객체의 메소드
window.alert('Hello world');
</script>
<body>
</body>
</html>
|
Document
Document 객체는 웹 페이지 그 자체를 의미
웹 페이지에 존재하는 HTML요소에 접근하고자 할 때는 DOM으로 만들어야 한다
Document 메소드
1
2
3
4
| 1. HTML 요소 선택
2. HTML 요소 생성
3. HTML 이벤트 핸들러 추가
4. HTML 객체 선택
|
HTML 요소 선택
HTML 요소 생성
HTML 이벤트 핸들러 추가
HTML 객체 선택
사진 출처: tcpschool
Property vs Attribute vs Variable
자바스크립트에서 Property와 Variable
1
2
3
| Property : 인스턴스로부터 만들어진 변수, 인스턴스에 종속된 변수
Variable : 인스턴스와 상관없이 만들어진 변수
|
예제로 알아보자
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <script type="text/javascript">
var setMyName = function(value){
this.name = value;
}
var setMyName2 = function(value){
var name = value;
}
var setName = new setMyName("jihyuk"); # setName 인스턴스
var setName2 = new setMyName2("jihyuk2"); # setName2 인스턴스
console.log(setName); # Property를 포함함한 객체
console.log(typeof(setName)); # setName 인스턴스는 object를 반환한다
console.log(setName.name); # Property 값 출력
console.log(typeof(setName.name));
console.log(setName2); # Property를 포함하지 않은 객체
console.log(typeof(setName2));
console.log(setName2.name); # Property가 없다
console.log(typeof(setName2.name));
</script>
|
Html과 Dom에서 Attribute와 Property
1
2
3
| Attribute: HTML관점에서 선택자
Property: DOM관점에서 선택자
|
예제로 알아보자
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| # HTML 관점
<div class="name">ji hyuk</div>
# 태그 div는 Element
# class는 attribute
# name은 값
# ji hyuk은 data
# DOM 관점
# 태그 div는 Element
# class는 property
# name은 값
# ji hyuk은 data
|
Attribute vs Property: Medium
Variable vs Property: blog
DOM
Document Object Model의 약자로 객체 지향 모델로써 구조화된 문서를 표현하는 형식이다.
Html, xml 같은 문서를 객체형태로 바꾸어 객체로써 이용하기 위한 형태이다.
DOM은 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 W3C의 공식 표준이기 때문에 문서를 객체로써 쓴다면 DOM 형식을 사용해야한다.
DOM은 HTML문서의 모든 요소에 접근하는 방법을 정의한 API이기도 하다.
DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식으로 볼 수 있고
좁은 의미로는 document 객체와 관련된 객체의 집합으로 볼 수 있다.
등장 배경
1
2
3
| DOM은 HTML 문서의 요소를 제어하기 위해 웹 브라우저에서 처음 지원되었다.
브라우저가 다양해지면서 브라우저 사이에 DOM 구현이 호환되지 않음에 따라,
W3C에서 DOM 표준 규격을 작성하게 되었다.
|
DOM 출처: tistory, wiki
CCSOM