12주차 - 문서 객체 모델(DOM)

문서 객체 모델(DOM)

자바스크립트에서 웹 문서의 객체를 다루는 시스템을 '문서 객체 모델'이라 한다.

17-1 문서 객체 모델 알아보기 17-2 DOM 요소에 접근하고 속성 가져오기 17-3 DOM에서 이벤트 처리하기 17-4 DOM에서 노드 추가•삭제하기

17-1 문서 객체 모델 알아보기

DOM은 문서 객체 문서(document dobject model)의 줄임말.

문서 객체 모델이란

웹 문서의 요소별로 제어 -> 웹문서 전체 또는 일부분을 동적으로 반응하게 한다.

문서 객체 모델(DOM)의 정의 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법

HTML 언어로 작성한 웹문서의 DOM -> HTML DOM XML 언어로 작성한 웹문서의 DOM -> XML DOM

DOM 트리

자바스크립트로 DOM을 조작하려면 실제 웹 문서가 DOM으로 어떻게 표현되는지 알아야 한다. DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분한다.

CSS 관점에서 부모 자식 관계 정리

한발 더 나아가 DOM 관점에서 부모 자식 관계에 대해 생각해보자.이처럼 부모와 자식 구조로 표시하면 나무 형태로 나타나게 되는데 이를 `DOM 트리`라고 한다.

DOM 트리에서 가지가 갈라져 나간 항목을 노드node라고 하며, DOM 트리의 시작 부분인 html 노드를 나무 뿌리에 해당한다 해서 루트root노드라고 한다.

DOM을 구성하는 기본 원칙

모든 HTML 태그는 요소(element) 노드입니다.
HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드입니다.
HTML 태그에 있는 속성은 자식 녿드인 속성(attribute) 노드입니다.
주석은 주석(comment) 노드입니다.

17-2 DOM 요소에 접근하고 속성 가져오기

특정 요소의 동적으로 변화를 주기 위해선 특정 요소에 접근이 가능해야한다. 이에 대해 알아보자.

DOM에 접근하기

첫번째, 선택자를 활용하여 접근할 수 있다.

id 선택자로 접근하는 getElementById() 메서드

기본형 요소명.getElementById("id명")

class값으로 접근하는 getElementsByClassName() 메서드

기본형 요소명.getElementsByClassName("class명") 특징: class로 접근할 경우 반환되는 요소가 2개 이상일 수 있다. 그렇기에 이 메서드 이름에는 반환 요소가 여러 개라는 뜻에서 Element에 s를 붙인다. 위 메서드 사용 결과로 클래스 이름이 같은 DOM 요소들이 HTMLCollection 객체로 저장된다. HTMLCollection 객체는 배열과 비슷하고, 배열처럼 사용할 수 있으나, 배열은 아니다.

태그 이름으로 접근하는 getElementsByTagName() 메서드

기본형 요소명.getElementsByTagName("태그명")

다양한 방법으로 접근하는 querySelector(), querySelectorAll() 메서드

앞서 살펴본 메서드의 반환값은 HTMLCollection 객체이다. 이때 HTML 요소는 'p'나 'a'와 같은 형태 DOM 트리의 모든 요소를 제어하기 위해서는 elector(), querySelectorAll() 메서드를 활용해야한다.

querySelector(), querySelectorAll() 메서드의 반환값은 노드이거나 노드 리스트입니다.

웹 요소의 내용을 수정하는 innerText, innerHTML 프로퍼티

속성을 가져오거나 수정하는 getAttribute(), setAttribute() 메서드

웹 요소를 문서에 삽입할 때 태그 속성을 함께 사용하면 DOM 트리에 속성 노드가 추가되면서 속성값이 저장된다.

17-3 DOM에서 이벤트 처리하기

웹 문서에서 이벤트가 발생하면 이벤트 처리기(event handler)를 연결해야 한다. HTML 태그에서 이벤트 처리기를 연결할 수 있지만 그렇게 되면 스크립트 소스와 섞여 코드가 복잡해 진다. 이럴 때 DOM에서 이벤트 처리기를 연결하면 HTML 태그와 스크립트 소스를 분리할 수 있다.

DOM 요소에 함수 직접 연결하기

함수 이름을 사용해 연결하기

DOM의 event 객체 알아보기

웹 문서에서 이벤트가 발생한 요소가 무엇인지, 어떤 이벤트가 발생했는지 등의 정보가 들어있다.

표 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() 메서드 사용하기

앞선 내용을 통해 이벤트 처리기는 한 요소에 하나의 이벤트 처리기만 연결할 수 있었다. 하지만 addEventListener() 메서드와 event 객체를 사용하면 한 요소에 여러 이벤트 처리기를 연결할 수 있는데 이에 대해 알아보자.

기본형 요소.addEventListerner(이벤트, 함수, 캡처 여부);

CSS 속성에 접근하기

자바스크립트를 잉요하면 스타일 속성값을 가져와서 그 값을 원하는 대로 수정할 수 있다. CSS 속성에 접근하기 위해 해당 스타일이 적용된 HTML 요소 다음에 예약어 style을 쓰고 속성을 적는다.

기본형 document.요소명.style.속성명

특징: 한 단어인 속성명은 그대로 사용해도 되지만 background-color, border-radius와 같이 하이픈으로 이어진 단어의 경우 backgroundColor와 같이 두 단어을 합쳐서 사용한다.

17-4 DOM에서 노드 추가•삭제하기

CSS의 display 속성을 활용하여 보이지 않던 내용을 클릭과 같은 이벤트로 보이게 할 수 있지만, DOM 트리에 새로운 노드를 추가하는 방법도 있다. 이때 주의할 점은, 노드를 추가하면 단순히 요소 노드뿐 아니라 텍스트와 속성 노드도 함께 추가해야 한다는 점이다.