JavaScript(document&DOM)
JavaScript 문법에서 사용되는 document, 그리고 DOM에 대해서 다뤄보도록 할께요.
문서 객체 모델 DOM(Document Object Model)
▷ 문서 객체 모델 DOM(Document Object Model)이란?
문서 객체 모델 / 도큐먼트 객체 모델은 문서에 대한 모든 내용을 담고 있는 객체예요.
브라우저는 HTML 페이지를 로드하는 과정에서 HTML 태그들을 각기 하나의 객체로 만들어요.
따라서 DOM은 HTML 태그당 하나씩 있으며 이름은 태그 이름과 같아요.
예) <p> ~ </p>로 구성된 요소 - p 객체 / <div>로 구성된 요소 - div 객체
이와 같이 HTML 문서의 각 요소를 객체화 한 것이 HTML DOM 객체예요.
▷ DOM의 목적
- 동적 HTML을 제어하
- elements(요소)에 접근 (HTML, CSS의 내용을 변경)
▷ DOM 객체의 구성요소
* HTML 태그의 요소 *
- 태그이름
- 속성
- css 스타일
- 이벤트 리스너 : HTML 태그에 발생한 이벤트(특정 행동)
- 콘텐츠 (innerHTML) : 시작 태그와 종료 태그 사이에 포함된 HTML 콘텐츠(내용)
* DOM 객체의 구성요소 *
- property(프로퍼티) : DOM 객체의 멤버 변수예요. HTML 태그의 속성 반영
- method(메소드) : DOM 객체의 멤버함수. HTML 태그를 제어함
- event listener(이벤트 리스너) : HTML태그에 작성된 이벤트 리스너를 그대로 가져가요.
- collection(컬렉션) : 정보를 집합적으로 표현하는 일종의 배열
- css style : style 프로프티를 통해 HTML 태그에 적용된 CSS 스타일 시트에 접근 가능
▷ DOM 객체 다루기
- DOM 객체 찾기 : document.getElementById('test').style.color="blue"; ▽
HTML에서 아이디가 test인 태그의 색상(style.color)를 파랑색으로 바꿔주세요.
- innerHTML 프로퍼티 : document.getElementById('test').innerHTML = "perfect"; ▽
HTML에서 아이디가 test인 태그의 텍스트를 perfect로 바꿔주세요.
- this : DOM 객체에서 객체 자신을 가리키는 용도로 사용되요.
<div onclick="this.style.backgroundColor='orange'"> ▽
이 객체의 배경색(style.backgroundColor)을 오렌지로 바꿔주세요.
도큐먼트 Document
▷ 도큐먼트 Document란?
DOM 트리의 최상위 객체예요. 브라우저는 HTML 문서를 로드하기 전에 document 객체를 먼저 만들어요. 그리고 document 객체를 뿌리로 하는 DOM 트리를 만들어요.
쉽게 설명을 하면 document를 문서라고 생각하시면 되요.
▷ Document 객체의 역할
- 프로프티 HTML 문서의 전반적인 속성을 나타냄
- 메소드로 DOM 객체 검색
- 메소드로 새로운 DOM 객체 생성
- 메소드로 HTML 문서의 전반적인 제어 지원
▷ Document 객체의 주요 프로퍼티(property), 컬렉션(collection), 메소드(method)
* 주요 프로퍼티(property) *
- title, head, body : HTML 문서의 태그 - <title>, <head>, <body>
- URL : 현재 문서의 URL
- location : 현재 문서의 URL 정보를 가진 location 객체의 레퍼런스
- referrer : 이 HTML 문서를 로드한 원래 문서의 URL 문자열이며 처음 로드한 문서면 문자열은 빈 문자열이 되요.
* 주요 컬렉션(collection) *
- images : 문서 내의 모든 <img> 객체들의 컬렉션
- links : 문서 내의 href 속성을 가진 모든 링크 객체들의 컬렉션
- forms : 문서 내의 모든 폼 객체들의 컬렉션
* 주요 메소드(method) *
- getElementById() : 아이디명으로 첫번째 DOM 객체 리턴 (아이디명을 가지고 있는 요소에 접근하는 함수)
※ 아이디명은 중복으로 쓸 수 없습니다.
- getElementsByTagName() : 특정 태그명을 가진 모든 태그 컬렉션 형태로 리턴
- getElementsByClassName() : 특정 클래스명을 가니 모든 태그 컬렉션 형태로 리턴
- open() : 콘텐츠를 모두 지우고 새로운 HTML 콘텐츠를 쓸 수 있도록 열기
- write(), writeln() : document에 HTML 콘텐츠 삽입 해주는 메소드, writeln()은 write() 후에 \n(다음 줄로 넘어가는 기능, enter와 같은 기능이라고 생각하면 되요.)가 추가 출력
- close() : document 객체에 있는 HTML 콘텐츠를 브라우저에 출력하도 더 이상 쓰기(write, writeln)을 받지 않음
※ 현재 브라우저 위도우에 출력된 HTML 텍스트를 지워버리고 새로운 내용을 출력하기 위한 순서
document.open() -> document.write() -> document.close()
우리가 문서를 작성하기 위해 하는 행동의 순서를 생각하시면 됩니다.
한글/워드 문서 열기 -> 문서 작성 & 저장 -> 문서 닫기
Next > JavaScript(jQuery 1)
'Programing > JavaScript' 카테고리의 다른 글
| JavaScript(jQuery 2) (0) | 2021.09.13 |
|---|---|
| JavaScript(jQuery 1) (0) | 2021.09.09 |
| JavaScript (EventListener) (0) | 2021.08.06 |
| JavaScript (Parameter) (0) | 2021.08.05 |
| JavaScript (Function) (0) | 2021.08.04 |
