클라이언트 프로그램과 서버 프로그램을 구분할 수 있는 가장 대표적인 방법
→ 사용자 인터페이스가 있는지 없는지 구별하는 것
웹 브라우저의 자바스크립트는 사용자 인터페이스를 구성하려고 문서 객체 모델을 사용한다.
문서 객체 모델 관련 용어
문서 객체 모델
문서 객체 모델은,
넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방법이다.
좁은 의미로는 document 객체와 관련된 객체의 집합을 나타낸다.
문서 객체 모델을 사용하면 HTML 페이지에 태그를 추가, 수정, 제거할 수 있다.
기본적인 자바스크립트만으로는 문서 객체 모델을 다루는 것은 굉장히 복잡하기 때문에, 대부분 jQuery 등 라이브러리를 사용해 조작한다.
웹 브라우저에 HTML 파일을 끌어다 놓기 → 웹 브라우저는 HTML 파일을 분석해 화면에 출력한다.
이때, 웹 브라우저가 HTML 파일을 분석하고 출력하는 방식을 문서 객체 모델(Document Object Model, DOM)이라고 한다.
문서 객체
HTML 태그를 자바스크립트에서 사용할 수 있는 객체로 만든 것을 문서객체라고 한다.
⇒ 문서 객체 조작 == 태그 조작
문서 객체를 조작하면 태그 내부의 글자, 스타일, 속성을 변경할 수 있다.
용어
밑에 있는 각 요소들을 노드라고 한다.
노드는 두가지로 구분한다.
- 요소 노드(Element Node)
- 텍스트 노드(Text Node)
요소 노드
h1 태그와 script 태그처럼 요소를 생성하는 노드
텍스트 노드
화면에 출력되는 문자열 등
HTML 페이지는 h1 태그처럼 텍스트 노드가 있는 태그도 있고,
다음과 같이 텍스트 노드가 없는 태그도 있다.
정적으로 문서 객체를 생성한다.
웹 페이지를 처음 실행할 때 HTML 페이지에 있는 태그를 읽으면서 생성하는 것을 정적으로 문서 객체를 생성한다고 표현한다.
동적으로 문서 객체를 생성한다.
자바스크립트를 사용해 프로그램 실행 중에 문서 객체를 생성하는 것을 동적으로 문서 객체를 생성한다고 표현한다.
웹 페이지 생성순서
HTML 코드 위에서 아래로 실행
문서 객체 선택
이미 있는 HTML 태그를 자바스크립트에서 문서 객체로 변환하는 것을 문서 객체 선택이라고 한다.
1개의 문서 객체 선택
| 메소드 | 설명 |
|---|---|
| document.querySelector(선택자) | 선택자를 사용해 문서 객체를 선택한다. |
여러 개의 문서 객체 선택
| 메소드 | 설명 |
|---|---|
| document.querySelectorAll(선택자) | 선택자로 여러 개의 문서 객체를 선택한다. |
문서 객체 조작
문서 객체는 세가지를 조작할 수 있다.
- 문자
- 속성
- 스타일
문자 조작
문서 객체의 내부의 문자를 조작할 때는 innerHTML 속성을 사용한다.
|속성|설명|
|------------|----------------|
|innerHTML|문서 객체 내부의 글자를 나타낸다.|
스타일 조작
문서 객체의 스타일을 조작할 때는 style 속성을 사용한다.
style 속성에는 객체로 CSS로 선택할 수 있는 모든 스타일 속성이 들어 있다.
속성 조작
문서 객체의 속성 조작 메소드
| 메소드 | 설명 |
|---|---|
| setAttribute(속성이름, 속성값) | 속성을 지정한다. |
| getAttribute(속성_이름) | 속성을 추출한다. |
문자열 data- 로 시작하는 속성을 사용자 지정 속성이라고 한다.
반드시 속성 조작 메소드를 사용해서 접근해야 한다.
이벤트
키보드로 키를 입력하거나 마우스 클릭 등 어떤 현상이 프로그램에 영향을 미치는 것을 의미한다.
자바스크립트는 기본적으로 다음 이벤트를 지원한다.
- 마우스 이벤트
- 키보드 이벤트
- HTML 프레임 이벤트
- HTML 입력 양식 이벤트
- 사용자 인터페이스 이벤트
- 구조 변화 이벤트
- 터치 이벤트
이벤트 관련 용어 정리
window.onload = function () { };onload : 이벤트 속성(Event Property)
load : 이벤트 이름(Event Name) || 이벤트 타입(Event Type)
Event Listener || Event Handler : 이벤트 속성에 넣는 함수
Event Model : 문서 객체에 이벤트를 연결하는 방법
이벤트 모델은 다음과 같이 DOM Level 버전에 따라서 구분할 수 있다.
- DOM Level 0
- 인라인 이벤트 모델
- 고전 이벤트 모델
- DOM Level 2
- 표준 이벤트 모델
인라인 이벤트 모델
HTML 태그 내부에서 이벤트를 연결하는 방법
웹 페이지의 가장 기본적인 이벤트 연결 방식으로 HTML 태그 내부에 자바스크립트 코드를 넣어 이벤트를 실행한다.
HTML 태그에서 on 문자열로 시작하는 속성은 모두 이벤트와 관련되어 있다.
