들어가며

머리말과 저자목록

Notion 링크, PDF 파일 및 QR 코드

Chapter 1. 개요

1. DOM이란 무엇일까요?

1.1. DOM의 정의

1.2. DOM의 탄생배경

2. 렌더링 과정에서의 DOM

2.1. 렌더링의 의미

2.2. HTML 요소와 DOM의 상관관계

3. HTML을 조작할 수 있게 하는 API

3.1. DOM을 통한 HTML 요소 접근 및 조작

3.2. 요소 접근 및 조작 예시

Reference

Chapter 2. 트리

1. 노드

1.1. 노드의 개념

1.2. 노드의 유형

1.2.1. 문서 노드(Document node)

1.2.2. 요소 노드(Element node)

1.2.3. 어트리뷰트 노드(Attribute node)

1.2.4. 텍스트 노드(Text node)

1.2.5. 노드 유형 식별

2. DOM 트리

2.1. DOM 트리의 개념

2.1.1. 트리 자료구조

2.2. DOM과 BOM

2.3. 트리 구조 실습

3. 노드 취득 / 컬렉션 객체

3.1. DOM 구조에 접근하기

3.2. 요소 노드를 취득하는 방법

3.2.1. ID로 HTML 요소 찾기

3.2.2 태그 이름으로 HTML 요소 찾기

3.2.3 Class로 HTML 요소 찾기

3.2.4. CSS 선택자로 HTML 요소 찾기

3.3. DOM 컬렉션

3.3.1. 특징

3.3.2. HTMLCollection

3.3.3. NodeList

4. 노드 탐색

4.1. 노드 탐색의 개념

4.1.1. 노드 탐색의 필요성

4.1.2. 공백 텍스트 노드

4.2. 노드 탐색 프로퍼티

4.2.1 부모 노드 탐색

4.2.2. 자식 노드 탐색

4.2.3. 형제 노드 탐색

5. 노드 조작

5.1. DOM 조작

5.2. 요소 노드의 텍스트 조작 (요소의 내용을 가져오기/수정하기)

5.2.1. nodeValue

5.2.2. textContent

5.2.3. textContent와 유사한 innerText

5.3. HTML 콘텐츠 추가/제거

5.3.1. innerHTML

5.3.2. DOM 직접 조작하기

5.3.2.1. 노드 생성/추가

5.3.2.2. 노드 삽입 및 이동

5.3.2.3. 노드 복제

5.3.2.4. 노드 교체 및 제거

Chapter 3. 이벤트

1. 이벤트의 개념

1.1. 이벤트란?

2. 이벤트 타입

2.1. 이벤트의 타입의 정의

2.2. 키보드 이벤트

2.2.1 키 이벤트의 발생순서

2.3. 마우스 이벤트

2.3.1. Click

2.3.2. dbclick

2.3.3. mousedown / mouseup

2.3.4. mousemove

2.3.5. mouseover/mouseout

2.3.6. contextmenu

2.2.7 마우스 이벤트의 발생순서

2.3.8. 드래그 앤 드롭

2.3.8.1. dragstart / drag

2.4. 포커스 이벤트

2.5. 폼 이벤트

3. 이벤트 핸들러

3.1. 이벤트 핸들러의 정의

3.2. 이벤트 핸들러 활용하기

3.2.1. HTML 요소의 속성으로 등록하는 방법

3.2.2. DOM 요소의 프로퍼티로 등록하는 방법

3.2.3. addEventListener 메서드를 이용해 등록하는 방법

3.3. addEventListener

4. 이벤트 객체

5. 이벤트 전파

6. 이벤트 위임

Reference

Chapter 4. 브라우저 렌더링

1. 브라우저 동작 원리를 알아야 하는 이유