추가 적립 안내

『DOM을 깨우치다』는 DOM 라이브러리 없이 문서 개체 모델에 대한 스크립트를 작성하여 HTML을 효율적으로 조작하는 방법을 소개한다. 최신 브라우저에 기본적으로 존재하는개념들과 코드를 사용하여 DOM 스크립트에서 jQuery가 수행하고 있는 역할을 이해하고 오버헤드를 줄여하 하는 모바일 장치 등 사용법을 배우게 될 것이다.

모던 웹을 위한 자바스크립트와 DOM에 대한 고찰

“더글라스 크락포드(Douglas Crockford)는 저서인 『자바스크립트 핵심 가이드』에서 JavaScript 언어의 내부를 이해하기 위한 지도를 제공했었다. 이제 코디 린들리(Cody Lindley)가 Document Object Model에 대한 지침을 우리에게 내놓았다.”
- 제레미 키스(Jeremy Keith): Clearleft.com의 설립자이자 기술 이사이며, 『DOM 스크립트』의 저자

이 책을 통해 DOM 라이브러리 없이 문서 개체 모델(Document Object Model, DOM)에 대한 스크립트를 작성하여 HTML을 보다 효율적으로 조작하는 방법을 배우게 된다. 『실전 jQuery 쿡북』의 저자인 코디 린들리는 따라하기 스타일의 예제 코드를 사용하여 다양한 노드 개체가 어떻게 동작하는지 보여주면서 최신 DOM 개념을 살펴볼 수 있게 해준다.

지난 세월 동안 개발자들은 사용을 간편하게 해주는 프레임워크들 때문에 DOM을 묻어 둬왔다. 이 책
은 이러한 도구들로부터 초점을 돌려서 최신 브라우저에 기본적으로 존재하는 개념들과 코드를 사용하고 있다. DOM 스크립트에서 jQuery가 수행하고 있는 역할을 이해하고, 오버헤드를 줄여야 하는 모바일 장치 및 특정 브라우저용 애플리케이션에서 DOM을 직접 사용하는 방법을 배우게 된다.

이 책에서 다루는 내용

- JavaScript 노드 개체들과 DOM 간의 관계를 이해한다.
- document, element, text, DocumentFragment 개체의 속성 및 메서드를 배운다.
- 노드 선택, 지오메트리, 인라인 스타일을 깊이 살펴본다.
- HTML 문서에 CSS 스타일 시트를 추가하고 CSSStyleRule 개체를 사용한다.
- 서로 다른 코드 패턴을 사용하여 DOM 이벤트를 설정한다.
- jQuery와 유사한 최신 브라우저용 DOM 라이브러리인 dom.js에 대한 저자의 비전을 배운다.

독자 대상
초중급

Live code 링크 다운로드 http://www.bjpublic.co.kr (도서자료 → 소스코드 다운로드)

출판사 리뷰

이 책은 DOM스크립팅이나 JavaScript에 대한 포괄적인 참고서가 아니다. 하지만 라이브러리/프레임워크를 사용하지 않으면서 HTML DOM에 대해 가장 철저하게 다룬 책이라 할 수 있다. 이 주제를 다룬 책이 없었던 점에는 이유가 있다. 대부분의 기술 저자들은 이 주제에 대해 논쟁하는 것을 꺼려하는데, 과거 브라우저들 간에 DOM사양을 구현한 것이 서로 달랐기 때문이다.

이 책의 목적상, 최신의 DOM을 소개하기 위해 브라우저 API의 혼란이나 사라져가는 브라우저 간의 차이점에 대해 다루는 것을 피하려고 한다. 현재에 초점을 맞추기 위해 보기 흉한 것들은 회피하겠다는 것이다. 어쨌든 우리에게는 브라우저의 추한 문제들을 처리하기 위한 jQuery와 같은 해결책이 있는데다, 더 이상 사용되지 않고 앞으로 사라질 브라우저들을 다뤄야 할 때는 절대적으로 jQuery와 같은 것을 활용해야 한다.

DOM스크립팅과 관련하여 있는 그대로만 사용하도록 권장하지는 않지만, DOM스크립트를 작성할 때 항상 DOM라이브러리가 있어야 하는 것은 아니라는 점을 개발자들이 깨닫기 바란다. 또한 단일 환경(예: 단일 브라우저, 모바일 브라우저, PhoneGap과 같은 것을 통한 HTML+CSS+JavaScript와 네이티브 연동)에서 JavaScript 코드를 작성하게 될 운 좋은 이들도 그 대상이다. 이 책에서 배워야 할 점은 이상적인 상황에서는 굳이 DOM라이브러리가 필요하지 않다는 것이다. 예를 들어, WebKit모바일 브라우저에만 배포하는 경우에는 경량화된 DOM스크립팅을 사용하면 된다.

이 책의 독자 대상
이 책에서는 두 가지 유형의 개발자를 염두에 두었다. 두 유형 모두 JavaScript, HTML, CSS에 대해 중급~고급의 지식을 이미 가지고 있다고 가정했다. 첫 번째 유형은 JavaScript나 jQuery를 잘 다루지만, jQuery와 같은 라이브러리의 목적과 가치에 대해서는 이해하려고 해본 적이 없는 개발자다. 이 책에서 지식을 얻고 나면, 해당 개발자는 DOM스크립트로 작성할 때 jQuery가 제공해주는 가치에 대해 완전하게 이해할 수 있게 될 것이다. 가치뿐만 아니라, jQuery가 DOM을 어떻게 추상화했는지와 jQuery가 그 간극을 어디서 어떻게 채우고 있는지를 알게 된다. 두 번째 유형의 개발자는 최신 브라우저에서만 구동되거나, 여러 개의 OS및 장치로 배포(예: PhoneGap)될 네이티브 코드로 포팅될 예정이고 라이브러리 사용 시의 오버헤드(예: 크기)를 피해야 하는 상황에서 HTML문서에 대한 스크립트를 작성해야 하는 사람들이다.

이 책은 다른 프로그래밍 서적과는 다르다
이 책은 장황한 설명이나 통째로 만들어진 프로그램 대신, 작고 독립되어 즉시 실행이 가능한 코드를 선호하는 스타일로 작성되었다. 기술적인 정보는 최대한 단어를 줄이고, 적절한 분량의 실행 가능한 코드와 생각을 표현하는 데 필요한 주석을 함께 사용하면 가장 잘 다룰 수 있다. 이 책의 스타일은 짧은 단어들로 명확하게 정의된 생각을 제시하고, 실제 코드로 보충하였다. 이 때문에 먼저 이 개념을 받아들여서 코드를 실행하고 분석해봐야 한다. 그러고 나면 해당 개념을 기술하는 데 사용된 단어들에 대해 정신적인 모델을 형성하는 토대가 될 것이다. 뿐만 아니라, 이 책의 형태는 개념을 구조상 가장 작은 형태로 분할하여 각각을 독립된 맥락으로 살펴볼 수 있도록 노력하였다. 이러한 모든 사항은 이 책이 방대한 주제에 대해 장황한 설명과 깊이 있게 다루는 책은 아님을 의미한다. 일반적인 것보다 훨씬 간단명료하고 간결한 설명서라고 보면 되겠다.

1장. 노드 개요
1.1 문서 개체 모델(Document Object Model, DOM으로 알려짐)은 자바스크립트 Node 개체의 계층화된 트리다
1.2 노드 개체 유형
1.3 Node 개체로부터 상속받은 하위 노드 개체
1.4 노드를 다루기 위한 속성 및 메서드
1.5 노드의 유형과 이름 식별하기
1.6 노드 값 가져오기
1.7 JavaScript 메서드를 사용해서 Element 및 Text 노드를 생성하기
1.8 JavaScript 문자열을 사용하여 DOM에 Element 및 Text 노드를 생성 및 추가하기
1.9 DOM 트리의 일부를 JavaScript 문자열로 추출하기
1.10 appendChild() 및 insertBefore()를 사용하여 노드 개체를 DOM에 추가하기
1.11 removeChild() 및 replaceChild()를 사용하여 노드를 제거하거나 바꾸기
1.12 cloneNode()를 사용하여 노드를 복제하기
1.13 노드 컬렉션(NodeList와 HTMLCollection)에 대한 이해
1.14 직계 자식 노드 전부에 대한 리스트/컬렉션 얻기
1.15 NodeList나 HTMLCollection을 JavaScript 배열로 변환
1.16 DOM 내의 노드 탐색
1.17 contains()와 compareDocumentPosition()으로 DOM 트리 내의 Node 위치를 확인하기
1.18 두 노드가 동일한지 판단하기

2장. Document 노드
2.1 document 노드 개요
2.2 HTMLDocument의 속성 및 메서드(상속된 것 포함)
2.3 일반적인 HTML 문서 정보 얻기 (제목, url, referrer, 최종 수정일, 호환 모드)
2.4 document 자식 노드
2.5 document는 , , , 에 대한 바로가기를 제공한다
2.6 document.implementation.hasFeature()를 사용하여 DOM 사양/기능 탐지하기
2.7 문서 내에서 포커스를 가지고 있거나 활성 상태인 노드에 대한 참조를 얻기
2.8 문서 혹은 문서 내의 특정 노드가 포커스를 가지고 있는지 판별하기
2.9 document.defaultView는 최상위/전역 개체에 대한 바로가기다
2.10 Element에서 ownerDocument를 사용하여 Document에 대한 참조 얻기

3장. Element 노드
3.1 HTML*Element 개체 개요
3.2 HTML*Element 개체의 속성 및 메서드(상속받은 것 포함)
3.3 Element 생성
3.4 Element의 태그 이름 얻기
3.5 Element의 Attribute 및 값에 대한 리스트/컬렉션 얻기
3.6 Element의 Attribute 값 획득?설정?제거
3.7 Element가 특정 attribute를 가지고 있는지 확인하기
3.8 Class Attribute 값 리스트 얻기
3.9 Class attribute에 하위 값 추가 및 제거하기
3.10 Class attribute 값 토글
3.11 Class attribute 값이 특정 값을 가지고 있는지 판별하기
3.12 data-* attribute를 가져오고 설정하기

4장. Element 노드 선택
4.1 특정 Element 노드 선택하기
4.2 Element 노드 리스트 선택 및 생성하기
4.3 직계 자식 Element 노드를 모두 선택하기
4.4 컨텍스트 기반 Element 선택
4.5 사전에 구성된 Element 노드 선택/리스트
4.6 선택될 Element를 검증하기 위해 matchesSelector()를 사용하기

5장. Element 노드 지오메트리와 스크롤링 지오메트리
5.1 Element 노드 크기, 오프셋, 스크롤링 개요
5.2 offsetParent를 기준으로 element의 offsetTop 및 offsetLeft 값을 가져오기
5.3 getBoundingClientRect()를 사용하여 뷰포트를 기준으로 element의 Top, Right, Bottom, Left 테두리 오프셋을 얻기
5.4 뷰포트에서 element의 크기(테두리 + 패딩 + 내용) 얻기
5.5 뷰포트에서 테두리를 제외한 element의 크기(패딩 + 내용) 얻기
5.6 elementFromPoint()를 사용하여 뷰포트의 특정 지점에서 최상단 element 얻기
5.7 scrollHeight와 scrollWidth를 사용하여 스크롤될 element의 크기를 얻기
5.8 scrollTop과 scrollLeft를 사용하여 top 및 left로부터 스크롤될 픽셀을 가져오거나 설정하기
5.9 scrollIntoView()를 사용하여 element를 View로 스크롤하기

6장. Element 노드 인라인 스타일
6.1 style attribute(element 인라인 CSS 속성이라고도 함) 개요
6.2 개별 인라인 CSS 속성 가져오기?설정?제거
6.3 모든 인라인 CSS 속성 가져오기?설정?제거
6.4 getComputedStyle()을 사용하여 element의 계산된
스타일(계층화된 것을 포함한 실제 스타일) 가져오기
6.5 class및id attribute를 사용하여 element의 CSS속성을 적용 및 제거하기

7장. Text 노드
7.1 Text 개체 개요
7.2 Text 개체 및 속성
7.3 공백도 Text 노드를 생성한다
7.4 Text 노드 생성 및 삽입하기
7.5 .data나 nodeValue로 text 노드 값 가져오기
7.6 appendData(), deleteData(), insertData(), replaceData(), subStringData()로 text 노드 조작하기
7.7복수의 형제 텍스트 노드가 발생하는 경우
7.8 textContent를 사용하여 마크업이 제거된 모든 자식 텍스트 노드를 반환하기
7.9 textContent와 innerText 간의 차이
7.10 normalize()를 사용하여 형제 텍스트 노드들을 단일 텍스트 노드로 결합하기
7.11 splitText()를 사용하여 텍스트 노드를 분할하기

8장. DocumentFragment 노드
8.1 DocumentFragment 개체 개요
8.2 createDocumentFragment()를 사용하여 DocumentFragment를 생성하기
8.3 DocumentFragment를 라이브 DOM에 추가하기
8.4 DocumentFragment에서 innerHTML 사용하기
8.5 복제를 사용하여 Fragment의 노드를 메모리상에서 유지하기

9장. CSS 스타일시트와 CSS 규칙
9.1 CSS 스타일시트 개요
9.2 DOM 내의 모든 스타일시트(CSSStylesheet 개체)에 접근
9.3 CSSStyleSheet의 속성 및 메서드
9.4 CSSStyleRule 개요
9.5 CSSStyleRule의 속성 및 메서드
9.6 cssRules를 사용하여 스타일시트 내의 CSS 규칙 목록을 가져오기
9.7 insertRule()과 deleteRule()을 사용하여 스타일시트에 CSS 규칙을 삽입하고 삭제하기
9.8 .style 속성을 사용하여 CSSStyleRule의 값을 편집하기
9.9 새로운 인라인 CSS 스타일시트 생성하기
9.10 HTML 문서에 외부 스타일시트를 프로그래밍적으로 추가하기
9.11 .disabled속성을 사용하여 스타일시트를 사용 가능/불가능하게 함

10장. DOM에서의 JavaScript
10.1 JavaScript 삽입 및 실행 개요
10.2 기본적으로 JavaScript는 동기 방식으로 해석됨
10.3 외부 JavaScript의 다운로드 및 실행을 지연시키기 위해 defer를 사용하기
10.4 async를 사용하여 외부 JavaScript 다운로드 및 실행을 비동기로 수행하기
10.5 외부 JavaScript의 비동기 다운로드 및 해석을 강제화하기 위한 동적 [script] element의 사용하기
10.6 비동기 [script]가 로드되는 시점을 알 수 있도록 onload 콜백을 사용하기
10.7 DOM 조작 시 HTML에서 [script]의 위치에 주의
10.8 DOM 내의 [script] 목록 가져오기

11장. DOM 이벤트
11.1 DOM 이벤트 개요
11.2 DOM 이벤트 유형
11.3 이벤트 흐름
11.4 element 노드, window 개체, document 개체에 이벤트 수신기를 추가하기
11.5 이벤트 수신기 제거하기
11.6 이벤트 개체에서 이벤트 속성 얻기
11.7 addEventListener() 사용 시 this의 값
11.8 이벤트가 호출된 노드나 개체가 아닌 이벤트의 대상을 참조
11.9 preventDefault()를 사용하여 기본 브라우저 이벤트를 취소하기
11.10 stopPropagation()을 사용하여 이벤트 흐름을 중지시키기
11.11 stopImmediatePropagation()을 사용하여 동일한 대상의 이벤트 흐름뿐만 아니라 다른 유사 이벤트도 중지시키기
11.12 사용자 정의 이벤트
11.13 마우스 이벤트 시뮬레이션/트리거링
11.14 이벤트 위임

12장. dom.js 만들기: 최신 브라우저용 jQuery 유사 DOM 라이브러리
12.1 dom.js 개요
12.2 고유 범위 만들기
12.3 dom()과 GetOrMakeDom()을 생성하고 dom()과 GetOrMakeDom.prototype을 전역으로 노출시키기
12.4 dom()에 전달되는 선택적인 Context 매개변수 생성하기
12.5 params를 기반으로 DOM 노드 참조를 가진 개체를 채워 반환
12.6 each() 메서드를 생성하고 체인화된 메서드로 만들기
12.7 html(), append(), text() 메서드 만들기
12.8 dom.js 테스트
12.9 요약 및 dom.js를 계속 진행하기