12장. 문서 객체 모델과 이벤트 다루기
12.1 문서 객체 모델(DOM) 이해하기
- 문서 객체 모델(DOM, Document Object Model)은 웹 브라우저에 표시되는 문서를 자바스크립트가 이해할 수 있도록 객체화한 모델 구조이다.
- DOM은 트리 구조로 생성되는데, 이를 DOM 트리라고 한다.
- DOM 트리를 구성하는 노드의 타입은 다음과 같다.
| 타입 | 설명 |
|---|
| 문서 노드(Node.DOCUMENT_NODE) | 최상위 document 객체의 노드 타입 |
| 요소 노드(Node.ELEMENT_NODE) | h1, p 태그와 같은 요소의 노드 타입 |
| 속성 노드(Node.ATTRIBUTE_NODE) | href, src와 같은 속성의 노드 타입 |
| 텍스트 노드(Node.TEXT_NODE) | 텍스트에 해당하는 노드 타입 |
| 주석 노드(Node.COMMENT_NODE) | 주석에 해당하는 노드 타입 |
- DOM 트리의 노드를 탐색하는 속성은 다음과 같다.
| 구분 | 속성 | 설명 |
|---|
| 모든 노드 탐색 | parenNode | 부모 노드를 반환한다. |
| childNodes | 모든 자식 노드를 반환한다. |
| firstChild | 첫 번째 자식 노드를 반환한다. |
| previousSibling | 이전 형제 노드를 반환한다. |
| nextSibling | 다음 형제 노드를 반환한다. |
| 요소 노드 탐색 | parentElement | 부모 요소 노드를 반환한다. |
| children | 자식 요소 노드를 반환한다. |
| firstElementChild | 첫 번째 자식 요소 노드를 반환한다. |
| lastElementChild | 마지막 자식 요소 노드를 반환한다. |
| previousElementSibling | 이전 요소 노드를 반환한다. |
| nextElementSibling | 다음 요소 노드를 반환한다. |
12.2 노드 선택하기
DOM 트리의 노드를 선택하는 다양한 메서드가 있다.
| 메서드 형식 | 설명 |
|---|
getElementById(<id 속성값>) | id 속성값과 일치하는 요소 노드를 1개만 선택한다. |
getElementsByClassName(<class 속성값>) | class 속성값과 일치하는 요소 노드를 모두 선택한다. |
getElementsByTagName(<태그명>) | 태그명과 일치하는 요소 노드를 모두 선택한다. |
querySelector(<CSS 선택자>) | 매개변수로 넘어오는 CSS 선택자에 해당하는 노드를 1개만 선택한다. |
querySelectorAll(<CSS 선택자>) | 매개변수로 넘어오는 CSS 선택자에 해당하는 노드를 모두 선택한다. |
12.3 노드 조작하기
- 콘텐츠 조작하기: 요소 노드는 다음 속성으로 콘텐츠를 조작할 수 있다.
| 속성 | 설명 |
|---|
textContent | 노드 요소의 모든 텍스트에 접근한다. |
innerText | 노드 요소의 텍스트 중 웹 브라우저에 표시되는 텍스트에만 접근한다. |
innerHTML | 노드 요소의 텍스트 중 HTML 태그를 포함한 텍스트에만 접근한다. |
- 스타일 조작하기: 요소 노드는
style 속성으로 스타일(CSS)을 지정할 수 있다.
<노드>.style.<CSS 속성명> = <속성값>;
- 클래스 조작하기:
classList 속성의 add(), remove() 메서드로 class 속성을 조작할 수 있다.
<노드>.classList.add(class 속성값);
<노드>.classList.remove(class 속성값);
- 데이터 속성 조작하기:
dataset 속성으로 HTML 문서에서 data-* 속성을 조작할 수 있다.
<노드>.dataset;
- 메서드로 속성 조작하기: 메서드로 모든 속성을 조작할 수 있다.
| 메서드 형식 | 설명 |
|---|
<노드>.getAttribute("속성명"); | 속성값을 가져온다. |
<노드>.setAttribute("속성명", "속성값"); | 속성값을 설정한다. |
<노드>.remoteAttribute("속성명"); | 속성을 삭제한다. |
12.4 노드 추가/삭제하기
| 구분 | 메서드 | 설명 |
|---|
| 노드 생성 | createElement() | 요소 노드를 생성한다. |
| createTextNode() | 텍스트 노드를 생성한다. |
| createAttribute() | 속성 노드를 생성한다. |
| 노드 연결 | <기준 노드>.appendChild(<자식 노드>) | 기준 노드에 자식 노드를 연결한다. |
| <기준 노드>.setAttributeNode(<속성 노드>) | 기준 노드에 속성 노드를 연결한다. |
| 노드 삭제 | <부모 노드>.removeChild(<자식 노드>) | 부모 노드에 연결된 자식 노드를 삭제한다. |
12.5 폼 조작하기
document 객체의 forms 속성을 사용하면 모든 form 태그를 참조하는 HTMLCollection 객체가 반환된다. 반환된 HTMLCollection 객체를 사용해 화면에 있는 form 요소 노드를 선택할 수 있다.form 태그의 name 속성값으로 form 요소 노드를 선택할 수 있다.
2) 폼 요소 선택하기
form 요소 노드의 elements 속성은 하위 노드의 폼 요소를 반환한다. 반환된 객체를 사용해 개별 폼 요소 노드에 인덱스로 접근할 수 있다.- 폼 요소의
name 속성값으로 폼 요소 노드에 바로 접근할 수 있다.
3) 폼 요소의 입력값 다루기
- 한 줄 입력 요소, 여러 줄 입력 요소는
value 속성을 참조하면 입력한 값을 가져올 수 있고, value 속성에 값을 할당하면 새로운 값을 설정할 수 있다.
- 체크박스 요소와 라디오버튼 요소는
checked 속성으로 체크 또는 선택 상태를 확인할 수 있고, checked 속성에 true를 할당하면 체크 또는 선택 상태를 기본으로 설정할 수 있다.
- 콤보박스 요소는
selected 속성으로 항목의 선택 상태를 확인할 수 있고, selected 속성에 true를 할당하면 항목을 선택 상태로 설정할 수 있다.
- 파일 업로드 요소는
FileList 객체를 사용해 요소의 값을 가져올 수 있다.
12.6 이벤트 다루기
- 이벤트(event)는 웹 브라우저와 사용자 사이에 상호작용이 발생하는 특정 시점을 의미한다. 자바스크립트로 이벤트 종류에 따른 제어 작업을 할 수 있다.
- 주요 이벤트는 다음과 같다.
| 구분 | 이벤트 | 설명 |
|---|
| 마우스 이벤트 | onclick | 마우스로 클릭하면 발생한다. |
| ondblclick | 마우스로 두 번 빠르게 클릭하면 발생한다. |
| onmouseover | 마우스 포인터를 올리면 발생한다. |
| onmouseout | 마우스 포인터가 빠져나가면 발생한다. |
| onmousemove | 마우스 포인터가 움직이면 발생한다. |
| onwheel | 마우스 휠(wheel)을 움직이면 발생한다. |
| 키보드 이벤트 | onkeypress | 키보드 버튼을 누르고 있는 동안 발생한다. |
| onkeydown | 키보드 버튼을 누른 순간 발생한다. |
| onkeyup | 키보드 버튼을 눌렀다가 뗀 순간 발생한다. |
| 포커스 이벤트 | onfocus | 요소에 포커스가 되면 발생한다. |
| onblur | 요소가 포커스를 잃으면 발생한다. |
| 폼 이벤트 | onsubmit | 폼이 전송될 때 발생한다. |
| 리소스 이벤트 | onload | 웹 브라우저의 리소스 로드가 끝나면 발생한다. |
12.7 이벤트 객체와 this
- 이벤트 객체는 이벤트 함수가 호출될 때 내부적으로 전달되는 이벤트 정보다 담긴 객체를 의미한다.
- 이벤트 객체의
preventDefault() 메서드를 사용하면 태그에 적용된 기본 이벤트를 취소할 수 있다.
- 이벤트 함수 내부에서
this 키워드를 참조하면 이벤트를 발생시킨 요소 노드를 가리킨다. 단, 화살표 함수일 때는 이벤트 객체의 target 속성으로 참조해야 한다.
