자바스크립트에서 웹 문서의 객체를 다루는 시스템을 '문서 객체 모델'이라 한다.
17-1 문서 객체 모델 알아보기
17-2 DOM 요소에 접근하고 속성 가져오기
17-3 DOM에서 이벤트 처리하기
17-4 DOM에서 노드 추가•삭제하기
DOM은 문서 객체 문서(document dobject model)의 줄임말.
웹 문서의 요소별로 제어 -> 웹문서 전체 또는 일부분을 동적으로 반응하게 한다.
문서 객체 모델(DOM)의 정의
자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법
HTML 언어로 작성한 웹문서의 DOM -> HTML DOM
XML 언어로 작성한 웹문서의 DOM -> XML DOM
자바스크립트로 DOM을 조작하려면 실제 웹 문서가 DOM으로 어떻게 표현되는지 알아야 한다.
DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분한다.
CSS 관점에서 부모 자식 관계 정리
한발 더 나아가 DOM 관점에서 부모 자식 관계에 대해 생각해보자.
DOM 트리에서 가지가 갈라져 나간 항목을 노드node라고 하며, DOM 트리의 시작 부분인 html 노드를 나무 뿌리에 해당한다 해서 루트root노드라고 한다.
DOM을 구성하는 기본 원칙
- 모든 HTML 태그는 요소(element) 노드입니다.
- HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드입니다.
- HTML 태그에 있는 속성은 자식 녿드인 속성(attribute) 노드입니다.
- 주석은 주석(comment) 노드입니다.
특정 요소의 동적으로 변화를 주기 위해선 특정 요소에 접근이 가능해야한다. 이에 대해 알아보자.
첫번째, 선택자를 활용하여 접근할 수 있다.
기본형 요소명.getElementById("id명")
기본형 요소명.getElementsByClassName("class명")
특징: class로 접근할 경우 반환되는 요소가 2개 이상일 수 있다. 그렇기에 이 메서드 이름에는 반환 요소가 여러 개라는 뜻에서 Element에 s를 붙인다.
위 메서드 사용 결과로 클래스 이름이 같은 DOM 요소들이 HTMLCollection 객체로 저장된다.
HTMLCollection 객체는 배열과 비슷하고, 배열처럼 사용할 수 있으나, 배열은 아니다.
기본형 요소명.getElementsByTagName("태그명")
앞서 살펴본 메서드의 반환값은 HTMLCollection 객체이다. 이때 HTML 요소는 'p'나 'a'와 같은 형태
DOM 트리의 모든 요소를 제어하기 위해서는 elector(), querySelectorAll() 메서드를 활용해야한다.
querySelector(), querySelectorAll() 메서드의 반환값은 노드이거나 노드 리스트입니다.
웹 요소를 문서에 삽입할 때 태그 속성을 함께 사용하면 DOM 트리에 속성 노드가 추가되면서 속성값이 저장된다.
웹 문서에서 이벤트가 발생하면 이벤트 처리기(event handler)를 연결해야 한다.
HTML 태그에서 이벤트 처리기를 연결할 수 있지만 그렇게 되면 스크립트 소스와 섞여 코드가 복잡해 진다. 이럴 때 DOM에서 이벤트 처리기를 연결하면 HTML 태그와 스크립트 소스를 분리할 수 있다.
웹 문서에서 이벤트가 발생한 요소가 무엇인지, 어떤 이벤트가 발생했는지 등의 정보가 들어있다.
표 17-1 event 객체의 프로퍼티와 메서드
- 프로퍼티
| 구분 | 설명 |
|---|---|
| altKey | 이벤트가 발생할 때 Alt를 눌렀는지 여부를 boolean값으로 반환합니다. |
| button | 마우스에서 누른 버튼의 키값을 반환합니다. |
| charCode | keypress 이벤트가 발생할 때 어떤 키를 눌렀는지 유니코드값으로 반환합니다. |
| clientX | 이벤트가 발생한 가로 위치를 반환합니다. |
| clientY | 이벤트가 발생한 세로 위치를 반환합니다. |
| ctrlKey | 이벤트가 발생했을 때 Ctrl를 눌렀는지 여부를 boolean값으로 반환합니다. |
| pageX | 현재 문서 기준으로 이벤트가 발생한 가로 위치를 반환합니다. |
| pageY | 현재 문서 기준으로 이벤트가 발생한 세로 위치를 반환합니다. |
| screenX | 현재 화면 기준으로 이벤트가 발생한 가로 위치를 반환합니다. |
| screenY | 현재 화면 기준으로 이벤트가 발생한 세로 위치를 반환합니다. |
| shiftKey | 이벤트가 발생할 때 Shift를 눌렀는지 여부를 boolean값으로 반환합니다. |
| target | 이벤트가 최초로 발생한 대상을 반환합니다. |
| timeStamp | 이벤트가 발생한 시간을 반환합니다. |
| type | 발생한 이벤트 이름을 반환합니다. |
| which | 키보드와 관련된 이벤트가 발생할 때 키의 유니코드값을 반환합니다. |
- 메서드
| 구분 | 설명 |
|---|---|
| preventDefault() | 이벤트를 취소할 수 있는 경우에 취소합니다. |
앞선 내용을 통해 이벤트 처리기는 한 요소에 하나의 이벤트 처리기만 연결할 수 있었다. 하지만 addEventListener() 메서드와 event 객체를 사용하면 한 요소에 여러 이벤트 처리기를 연결할 수 있는데 이에 대해 알아보자.
기본형 요소.addEventListerner(이벤트, 함수, 캡처 여부);
자바스크립트를 잉요하면 스타일 속성값을 가져와서 그 값을 원하는 대로 수정할 수 있다.
CSS 속성에 접근하기 위해 해당 스타일이 적용된 HTML 요소 다음에 예약어 style을 쓰고 속성을 적는다.
기본형 document.요소명.style.속성명
특징: 한 단어인 속성명은 그대로 사용해도 되지만 background-color, border-radius와 같이 하이픈으로 이어진 단어의 경우 backgroundColor와 같이 두 단어을 합쳐서 사용한다.
CSS의 display 속성을 활용하여 보이지 않던 내용을 클릭과 같은 이벤트로 보이게 할 수 있지만, DOM 트리에 새로운 노드를 추가하는 방법도 있다. 이때 주의할 점은, 노드를 추가하면 단순히 요소 노드뿐 아니라 텍스트와 속성 노드도 함께 추가해야 한다는 점이다.
- 모든 HTML 태그는 요소(element) 노드입니다.
- HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드입니다.
- HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드입니다.
- 주석은 주석(comment) 노드입니다.
개념: DOM에 새로운 요소를 추가하기 위해 요소 노드를 만든다.
기본형 document.createElement(노드명)
개념: 내용을 담는 텍스트 노드를 자식 노드로 만든다.
기본형 document.createTextNode(텍스트)
개념: 텍스트 노드나 속성 노드를 만든 후 요소 노드에 연결할 때 사용
기본형 부모노드.appendChild(자식노드)
개념 : img 요소는 src 속성을 사용해서 이미지 파일의 경로를 지정해야 브라우저에 이미지를 보여 줄 수 있다. 이를 위해 속성 노드를 만든다.
개념: 속성 노드를 요소 노드의 자식으로 연결
기본형 요소형.setAttributeNode(속성노드)
DOM 트리에서 특정 노드를 삭제하는 방법에 대해 알아보자.
노드를 삭제할 때는 부모 노드에서 자식 노드를 삭제해야 한다는 것을 명심하자.
개념: 삭제할 노드의 부모 노드를 찾는 방법
기본형 노드.parentNode
개념: 자식 노드를 삭제하는 역할
기본형 부모노드.removeChild(자식노드)