Chapter10 문서 객체 모델
01. 문서 객체 모델
1 문서 객체 모델 기본 용어
문서 객체 모델을 살펴보려면 먼저 몇 가지 용어를 알아야 합니다. 문서 객체(document object)와 노드(node)라는 용어를 간단한 HTML 페이지 코드를 보면서 이해해 봅시다.
[코드10-1]에서 h1이나 p는 태그인데, 이런 HTML 태그를 자바스크립트에서 사용할 수 있는 객체로 만든 것이 문서 객체입니다. 즉 HMTL에서 요소라고 하던 것을 자바스크립트에서는 문서 객체라고 합니다. 따라서 자바스크립트에서 문서 객체를 조작한다는 말은 결국 태그를 조작한다는 의미 입니다.
★코드 10-1 dom_basic.html
○결과값
자바스크립트를 사용해 문서 객체를 조작해서 태그를 추가·수정·제거할 수 있습니다. 즉, HTML 태그의 내용을 바꿀 수도 있고 출력되는 모양이나 색상을 동적으로 변경할 수도 있습니다.
"어떻게 자바스크립트에서 문서 객체를 조작할수있나용?"
이것이 이 장에서 배울 내용입니다. 일단은 계속해서 용어를 살펴보겠습니다. 웹 브라우저는 HMTL 페이지를 읽으면서 태그의 포함 관계에 따라 문서 객체를 트리 형태로 만듭니다. 예를 들어 [코드10-1]을 트리 형태로 나타내면 [그림10-1]과 같습니다. 트리의 각 요소가 노드고, 노드는 요소 노드(element node) 와 텍스트 노드(text node)로 구분합니다.
h1 태그와 script 태그처럼 요소를 생성하는 노드가 요소
[그림 10-1 노드]
h1처럼 텍스트노드를 가진 태그도 있지만, 다음과 같이 텍스트 노드를 갖지 않는 태그도 있다
<br>
<hr>
<img src="rintiantta.png">
2 웹 페이지 실행 순서
웹 브라우저는 웹 페이지를 실행할 떄는 먼저 HTML 파일을 분석한 후 화면에 표시합니다. 웹 페이지를 처음 실행할 때 HTML 태그로 적힌 문서 객체를 생성하는 것을 정적 생성이라고 하며, 웹 페이지를 실행 중에 자바스크립트를 사용해 문서 객체를 생성하는 것을 동적 생성이라고 합니다. 그리고 웹 브라우자가 HTML 파일을 분석하고 출력하는 방식을 문서 객체 모델(Document Object Model, DOM) 이라고 합니다. 문서 객체 모델은 웹 브라우저마다 미세한 차이가 있습니다. 그러나 웹 브라우저별로 다루면 너무 복잡하므로 최신 웹 브라우저(인터넷 익스플로러 8이하 제외)만 기준으로 하겠다.
★기본 예제 10-1 실행 순서에 따른 문서 객체 사용 오류
1. 문서 객체 사용 오류
웹 페이지 코드를[코드10-2]와 같이 작성한다고 합시다. 아직 배우지 않은 코드도 있지만 주석을 보면 기능을 짐작할 수 있으려나요?
★코드 10-2 dom_fault.html
○결과값
오류가..?
그런데 코드를 실행하면 오류가 발생합니다. null에서 style 이라는 속성을 읽을 수 없다는 의미입낟. 이는 웹 브라우저가 위쪽에서 아래ㅉ고으로 코드를 차근차근 실행하기 때문에 script 태그를 읽을 떄는 h1 태그와 h2 태그가 생성되어 있지 않아서 발생하는 문제입니다. 크롬 오류는 개발자 도구에서 확인가능
2. 해결 방법1 : script 태그 위치 옮기기
가장 간단한 해결 방법은 [코드10-3]과 같이 script태그를 h1 태그와 h2아래에 삽입하는 것입니다. 이경우 HTML 페이지가 방대해서 유지 보수하기 어렵습니다.
★코드 10-3 dom_correct.html
○결과값
3. 해결 방법2: 이벤트활용하기
다음 절에서 배울 이벤트 기능을 사용합니다. 이벤트가 무엇인지 잘 몰라도 '이러한 이유로 뒤에서 이벤트를 배우는구나'하고 생각하기 바랍니다.
★코드10-4 dom_event.html
○결과값
NOTE script 태그위치
script 태그를 head 태그 내부에 삽입하는 것과 body 태그 아래쪽에 삽입하는 것에 논쟁이 뜨겁다. head 태그 내부에 넣으면 코드를 보기 쉬워 유지 보수가 용이합니다. 반면 body 태그 아래에 넣으면 HTML 페이지가 빠르게 나타나는 것처럼 보일 수있습니다.
"왜 빨리 불러오는 것처럼 보이나요?"
예를 들어 [코드10-5]와 같이 head 태그 내부에 있다면 위쪽부터 script 태그를 차근차근 읽기 시작합니다. 각각의 외부 스크립트 파일 용량이 크거나 사용자의 인터넷 속도가 느리다면 흰 화면 상태로 몇 초 정도 있다 글자가 나타납니다.
★[코드10-5 reference_scriptFirst.html]
반면 script 태그를 [코드10-3]과 같이 body 태그의 맨 아래 쪽에 넣는다면 script 태그 실행 전에 화면이 먼주 구성됩니다. 따라사 사용자는 웹 페이지를 실행하자마자 빠르게 요소가 표시되는 것을 볼 수 있습니다. 가끔 스마트폰에서 웹 페이지로 접속하면 분명 화면은 모두 떳는데도 '로딩 중'이라는 메시지가 계속 나타날 떄가 있습니다. 이는 script 태그를 아래쪽에 삽입해 다른 요소를 모두 출력한 후에야 읽어서 발생하는 현상입니다. 현재는 AMD(Asynchronous Module Definition) 기술을 사용해 head 태그 내부에 script 태그를 입력해도 웹 페이지를 빠르게 표시할 수 있습니다
02. 문서 객체 선택
이미 존재하는 HTML 태그를 자바스크립트에서 문서 객체로 변환하는 것을 '문서객체를선택한다'고 표현한다.
문서 객체를 조작하려면 먼저 문서 객체를 선택해야 합니다.
문서 객체는 1개 또는 여러 개 선택할 수 있습니다. 문서 객체를 여러 개 선택하는 메서드를 사용하면 문서 객체가 배열 형태로 반환합니다.
표10-1 문서 객체를 선택하는 메서드
| 구분 | 메서드 | 설명 |
| 1개 선택 | document.getElementById(아이디) | 아이디로 1개 선택 |
| document.querySelector(선택자) | 선택자로 1개 선택 | |
| 여러 개 선택 | document.getElementsByName(이름) | name 속성으로 여러 개 선택 |
| document.getElementsByClassName(클래스) | class 속성으로 여러 개 선택 | |
| document.querySelectorAll(선택자) | 선택자로 여러 개 선택 |
각 메서드의 사용벙을 예제로 살펴보겠습니다.
NOTE 이전에 스타일시트를 다루면서 '스타일시트를 사용할 때는 id 속성이 중복되어도 문제가 없지만 자바스크립트에서는 문제가 생긴다'고 했습니다. 자바스크립트에서 id 속성을 중복했을 때 문제가 되는 부분이 바로 getElementByID()메서드 입니다.
★기본 예제 10-2 문서 객체 선택
1.getElementByid() 메서드를 사용해 문서 객체 1개 선택하기
[코드10-6]과 같이 같은 id 속성을 사용해 문서 객체를 선택하고 스타일과 내부 글자를 조작합니다.
★코드 10-6 select_id.html
( innerHTML : 태그내부를 의미하는 속성입니다)
○결과값
2.querySelector() 메서드를 사용해 문서 객체 1개 선택하기
id 속성 대신 선택자를 사용하는 점만 다르고 getElementById() 메서드와 사용 방법은 같습니다. 단 querySelector() 메서드는 문서 객체 하나를 선택하므로 이름이 같은 선택자가 여러 개라면 가장 먼저 등장하는 것을 선택합니다.
★코드10-7 select_query.html
○결과값
3. querySelectorAll() 메서드를 사용해 문서 객체 여러 개 선택하기
querySelectorAll() 메서드는 [코드10-8]과 같이 문서 객체를 여러 개 선택해 조작할 수 있습니다. 문서 객체 여러개를 어떤 속성으로 선택하느냐만 다르지 다른 메서드로 사용 방법은 모두 같습니다.
★코드 10-8 select_all.html
○결과값
03.문서객체 조작
현대적인 방법으로 만든 웹 페이지 소스 코드를 보면, HTML 태그에 어떤 내용도 입력~
유튭 코드들~
유뷰트가 SPA 사이트라서 처음에는 웹 페이지를 읽어 들일 떄 틀만 읽어 들이고, 이후에 자바스크립트 문서 객체를 조작해서 모든 내용을 집어넣기 때문입니다. SPA(Single Page Application)는 웹 페이지를 한 번만 읽어 들이고, 사용자가 조작할 때 웹 페이지 내용을 자바스크립트를 사용해 바꾸는 형태의 웹 페이지를 의미한다.
이렇게 하면 웹 페이지를 여러 번 요청하지 않아도 되어 서버 부담도 줄고, 사용자가 웹 페이지를 이동할 떄 새로 웹 페이지를 읽어 들이며 발생하는 깜빡임도 없어집니다. 현대에는 이러한 웹 페이지 개발을 위해 React, Vue 등 다양한 자바스크립트 프레임워크가 등장했습니다.
이러한 웹 페이지는 굉장히 양이 방대하고 어려우므로 책에서는 다루지 않고 기본적인 방법은 살펴보자
이번 절에서는 선택한 문서 객체의 글자, 스타일, 속성 등을 조작하는 방법을 알아보자
1. 글자조작
표10-2 글자속성
| 속성 | 설명 |
| textContent | 문서 객체 내부 글자를 순수 텍스트 형식으로 가져오도록 변경 |
| innerHTML | 문서 객체 내부 글자의 HTML 태그를 반영해 가져오도록 변경 |
★기본 예제 10-3 내부 글자 변경
[코드10-9] ①과 같이 textContent 속성을 사용해 문서 객체 내부의 글자를 변경하면 입력한 글자가 body 태그 내부에 바로 들어갑니다. 반면 ②와 같이 innerHTML 속성을 사용하면 textContent 속성과 달리 HTML 태그를 적용해 내부 글자를 변경합니다.
코드10-9 control_text.html
○결과값
①document.body.textContent =output;
②document.body.innerHTML = output;
NOTE 구 버전의 인터넷 익스플로러에서는 textContent 속성을 지원하지 않으므로 대개 innerHTML 속성을 사용합니다. 이때 HTML 태그로 사용하는 글자를 넣고 싶다면 글자 태그를 뱅면서 살펴본 등 특수 문자 사용
2. 스타일 조작
자바스크립트로 CSS 속성 값을 추가·제거·변경할 수 있습니다. 문서 객체의 style 속성을 변경하면 됩니다. 스타일시트에서 사용하던 스타일 속성 이름을그대로 입력하면 된다고 생각할 수 있습니다. 하지만 자바스크립트는 특수 문자 '-'을 식별자에 사용할 수 없으므로 ①처럼 입력하면 오류를 출력합니다. 따라서 -으로 연결된 속성은 ②처럼 -로 연결된 단어의 첫 글자를 대문자로 변경해야 합니다.
①번
var header = document.getElementById('header');
header.style.background-color = 'red';
②번
var header = document.getElementById('header');
header.style.backgroundColor = 'red';
이 방법으로 스타일 시트의 스타일 속성을 자바스크립트의 스타일 식별자로 변환하면 [표10-3]과 같습니다.
표 10-3 스타일 식별자 변환
| 스타일시트의 스타일 속성 | 자바스크립트의 스타일 식별자 |
| backgroind-image | backgroundImage |
| background-color | backgroundColor |
| box-sizing | boxSizing |
| list-style | listStyle |
NOTE 문자열을 사용한 스타일 속성 접근
문자열을 사용해 스타일 속성에 접근할 때는 다음 두 가지 방법을 모두 사용할 수 있습니다.
① document.body.style[ 'backgroundColor' ] = 'red';
② document.body.style[ 'background-color' ] = 'red';
★기본 예제 10-4 스타일조작
간단한 내용이므로 조금만 살펴보면 쉽게 이해할 수 있을 것입니다. [코드10-10]은 div 태그 256개가 위쪽에서 아래쪽으로 그레이디언트를 형성합니다.
코드10-10 control_style.html
○결과값
3. 속성 조작
문서 객체의 속성을 조작할 떄는 [표10-4]와 같은 메서드를 사용합니다.
표10-4 문서 객체의 속성 조작 메서드
| 메서드 | 설명 |
| setAttribute(속성이름, 속성 값) | 속성 지정 |
| getAttribute(속성이름) | 속성 추출 |
웹 표준에서 지정한 속성은 다음 방법으로 곧 바로 접근할 수도 있습니다. 웹 표준에서 지원하지만 웹 브라우저 웹 브라우저 제조사가 구현을 못했다면 접근할지 못할 수 도 있습니다.
image.src = 'rint.png';
alert(image.src)
웹 표준에서 지정하지 않은 속성에 접근할 때는 setAttrubute() 메서드와 getAttribute() 메서드를 사용합니다. 웹 표준에서 지정하지 않은 속성이 있다는 것에 의문지 생길 수 있습니다. 예를 들어 [그림10-2]는 jQueryMobile 코드의 일부입니다. 여기서 date-role은 웹 표준에서 지정하는 속성이 아닙니다. 문자열 'date-'로 시작하는 것을 사용자 지정 속성이라고 하는데, 반드시 속성 조작 메서드를 사용해서 접근해야 합니다.
그림10-2 jQuery Mobile 코드
★기본예제 10-5 문서 객체 속성조작
1. img 태그 속성 조작하기
[코드 10-11]은 img태그의 src 속성, width 속성,height 속성을 변경합니다. img 태그에는 id 속성을 제외한 다른 속성은 부여하지 않았습니다. 하지만 자바스크립트의 문서 객체 코드에서 src 속성 등을 지정하므로 출력 결과처럼 이미지가 나타납니다.
코드10-11 control_attrubute.html
○결과값
2. body 태그 속성 조작하기
[코드 10-12]는 body 태그에 data-custom 속성을 지정한 후 속성을 다시 추출해서 출력합니다. 웹 표준에서 지정하고 있지 않은 속성이므로 속성 조작 메서드를 사용합니다.
[코드 10-12 control_body.html]
○결과값
★기본예제 10-6 문서 객체를 사용한 시간 표시
지금까지 다룬 예제들이 정적이었다면, 문서 객체를 정리하는 의미로 1초 단위로 현재 시간을 표시하는 시계를 만들어 보겠습니다. 간단한 예제이지만, 애 문서 객체를 사용하는지 알 수 있습니다. setInterval() 함수를 사용해 1초마다 clock 문서 객체의 innerHTML 속성을 현재 시간으로 변경합니다. setInterval() 함수는 12장에서 자세히 배운다.
지금은 단위 시간마다 함수를 실행한다고 이해하면 됩니다.
코드 10-13 clock.html
○결과값
04. 이벤트
이벤트는 키보드를 누르거나 마우스를 클릭하는 것처럼 어떤 현상이 프로그램에 영향을 미치는 것을 의미합니다. 에빈트는 사용자가 직접 발생시킬 수도 있고 응용 프로그램에서 자체적으로 발생 시킬 수 있습니다. 자바스크립트는 다음 이벤트를 기본으로 지원합니다.
● 마우스 이벤트
● 키보드 이벤트
● HTML, 프레임 이벤트
● HTML, 입력 양식 이벤트
● 사용자 인터페이스 이벤트
● 구조 변화 이벤트
● 터치 이벤트
이벤트 용어를 정리하고 이벤트와 관련된 내용을 살펴보겠습니다. 지금까지 문서 객체를 조작하면서 다음 코드를 계속 사용 해왔습니다.
windon.onload = function() { };
코드에서 onload를 이벤트 속성 (event property)이라고 합니다. on을 제외한 load를 이벤트 이름(event name) 또는 이벤트 타입(event type)이라고 합니다. 그리고 이벤트 속성에 넣는 함수를 이벤트 리스너(event listener) 또는 이벤트 핸들러( event handler) 라고 합니다
이벤트 속성은 이름만 보아도 대충 어떤 이벤트인지 알 수 있으나 종류가 매우 다양합니다. 하지만 절대 외우려고 하지마세요 실무에서 통합 개발 환경을 사용하면 어떤 이벤트가 있는지 알 수 있습니다.
1 이벤트 연결
문서 객체에 이벤트를 연결하는 방식을 이벤트 모델(event model) 이라고 합니다. 이벤트 모델은
DOM 레베렝 따라서 구분할 수 있으며, 각각 두가지로 나뉩니다.
표10-5 이벤트 모델 종류(이벤트 연결 방식)
| 구분 | 종류 |
| DOM 레벨0 | ● 인라인 이벤트 모델 ● 고전 이벤트 모델 |
| DOM 레벨2 | ● 마이크로소프트 인터넷 익스플로러 이벤트 모델 ● 표준 이벤트 모델 |
DOM 레벨 0 의 이벤트 연결 방식은 쉬워서 널리 사용합니다. 하지만 이벤트를 중복해서 연결할 수 없다는 단점이 있습니다. 반면 DOM 레벨2의 이벤트 연결 방식은 이벤트를 중복해서 연결할 수 있지만, 웹 브라우저 종류에 따라 연결하는 방식이 달라 문제가 됩니다. 이는jQuery 라이브러리 등을 사용해 극복할 수 있습니다. 이번 절에서는 DOM 레벨 0에 해당하는 인라인 이벤트 모델과 고전 이벤트 모델만 간단히 살펴보겠다
인라인 이벤트 모델
인라인 이벤트 모델은 HTML 태그 내부에 자바스크립트 코드를 넣어 이벤트를 연결하는 방식입니다. 전 세계 추세로 보면 거의 사용하지 않지만, 국내에는 아직 사용하는 웹 사이트가 굉장히 많으므로 예제로 간단히 살펴보겠습니다.
★기본 예제 10-7 이벤트 연결
1. 인라인 이벤트 모델 사용하기
button 태그 내부에 onclick 속성을 사용해 자바스크립트코드를 입력하고 실행합니다 그러면 button 태그에 해당하는 <버튼>을 누를 때 경고 창을 출력합니다.
코드 10 -14 event_inline.html
○결과값
2. script 태그에 인라인 이벤트 모델 사용하기
인라인 코드 내부에서 세미콜론으로 문장을 구분하면 어러 행을 입력할 수 있지만 너무 지저분합니다. 그래서 인라인 이벤트 모델을 사용할 때는 [코드10-15]와 같이 script 태그 내부에 함수를 선언한 후 인라인 이벤트 속성 내부에서 해당 함수를 실행하는 형태
코드 10- 15 event_inlineWithScript.html
script의 buttonClick란 이름의 함수를 만들고 onclick이벤트시 buttonClick 함수 가 실행되도록
○결과값
버튼 클릭시 onclick 이벤트로 script내부의 buttonClick() 함수가 실행
고전 이벤트 모델
고전 이벤트 모델은 과거에 표준으로 정의되어 많이 사용했던 이벤트모델입니다. 이름은 고전이지만 현대에도 많이 사용되는 방식입니다. 인라인 이벤트 모델을 확실하게 이해했다면 고전 이벤트 모델도 쉽게 파악할 수 있을 것입니다.
이전 절에서 문서 객체 속성을 조작했는데 HTML 표준에 속한 속성을 모두 이렇게 사용할 수 있으므로 이벤트 속성도 같은 방버븡로 사용합니다.
★기본 예제 10-8 고전 이벤트 모델
문서 객체의 이벤트 속성에 함수를 지정해 [코드10-15]를 고전 이벤트 모델로 변경할 수 있습니다. 이때 지정된 함수를 이벤트 핸들러 또는 이벤트 리스너라고 합니다. 실행 결과는 [코드10-14]와 같습니다. 어려운 내용이 아니므로 수ㅏㅂ게 이해할 수 있을 것입니다.
코드10-16 event_tradition.html
○결과값
버튼 클릭시
NOTE 이벤트 발생 객체
이벤트 리스너 내부에서 this 키워드를 사용하면 이벤트를 발생한 자기 자신을 의미합니다. 따라서 [코드10-17]과 같이 이벤트 리스너와 내부에서 this 키워드의 textContent 속성을 사용하면 자기 자신의 글자를 변경합니다. 코드를 실행하면 버튼을 클릭할 때마다 하트이 하나씩 추가되는 것을 확인할 수 있다.
코드 10-17 reference_eventOrigin.html
○결과값
버튼 클릭시 클릭한 수만큼 하트 추가됨
2. 이벤트 사용
현실 세계에서는 사건(이벤트)이 발생하면 누가, 언제, 어디서, 무엇을, 어떻게 오ㅔ에 해당하는 정보를 알 수 있습니다. 이벤트가 발생하면 웹 브라우저는 이벤트 정보가 담긴 이벤트객체를 만들어 이벤트 리스너에 전달합니다. 따라서 이벤트 객체를 사용하면 이벤트와 관련한 정보를 알아낼 수 있습니다.
★기본 예제 10-18 이벤트 정보
[코드10-18]을 보면 이벤트 리스너의 첫 번째 매개변수로 이벤트 객체가 들어옵니다
코드 10-18 event_object.html
○결과값
HTML 태그에는 기본적으로 몇 가지 이벤트가 있습니다. 예를 들어 a 태그를 클릭하면 href속성에 입력한 위치로 이동하고 form 태그로 생성한 <제출> 버튼을 누르면 자동으로 입력양식을 제출합니다. 이처럼 특정 태그가 가진 기본적인 이벤트를 기본이벤트(default event) 라고 합니다.가끔 기본 이벤트를 막아야 할 떄가 있습니다. 예를들면 회원가입 페이지에서 <확인> 버튼을 누르면 우선 사용자가 정확하게 정보를 입력했는지 확인한 후 이동해야 합니다. 이름과 정보를 입력하지 않은 상태에서는 다음 페이지로 이동하면 안됩니다. 이러한 상황에서는 HTML 태그가 가지는 기본 이벤트를 제거해야 합니다.
★기본 예제 10-10 기본 이벤트제거
고전 이벤트 모델에서 기본 이벤트를 제거하려면 이벤트 리스너의 반환 값을 false로 입력합니다. [코드10-19]와 같이 a 태그의 click 이벤트 리스너 반환 값에 false를 입력합니다. 코드를 실행하고 a 태그에 해당하는 '버튼' 링크를 클릭해보세요. 연결된 웹 페이지로 이동하지 않습니다. 이러한 기본 이벤트 제거는 a 태그와 form 태그에 자주 사용합니다.
코드 10-19 event_default.html
○결과값
버튼을 클릭해도 이동이 안됨
이장에 내용은 여기까지.. 실행 결과를 살펴보면 웹 브라우저에 따라 조금씩 결과가다르다. 다음장에서 배우는 jQuery 라이브러리가 등장했습니다 jQuery는 자바스크립트 라이브러리로 자바스크립트를 더욱 손쉽게 활용할 수 있게 합니다. 일부 미세하게 처리해야 하는 부분을 제외하면 jQuery 라이브러리를 사용해 모든 웹 브라우저에서 같은 형태로 웹 페이지를 표시할 수 있습니다.
는 그냥 한번씩 예제 복습삼아 했는데 외워지진않고 그냥 아 그렇구나... 사실 따라치는느낌이 강하고 코드 읽어보고 이게 이런것이 작동하겠구나 정도만... 느끼는데 다 읽어지진 않았던것 같다. ㅎㅇㅌ