들어가며
머리말과 저자목록
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
3.3.1. addEventListener로 이벤트 등록하기
3.3.2. removeEventListener로 이벤트 제거하기
4. 이벤트 객체
4.1. 이벤트 객체란?
4.2. 이벤트 객체 콘솔에 출력해보기
4.3. 이벤트 객체의 종류
4.3.1. 공통 메서드
4.3.2. 공통 프로퍼티
4.4. 이벤트 객체 사용하기
4.4.1. 마우스 이벤트의 프로퍼티
4.4.2. 키보드 이벤트의 프로퍼티
4.4.3. 마우스 이벤트 객체를 이용한 예제 실습
4.4.4. 키보드 이벤트 객체를 이용한 예제 실습1
4.4.5. 키보드 이벤트 객체를 이용한 예제 실습2
5. 이벤트 전파
5.1. 이벤트 전파의 정의
5.2. 이벤트 타깃
5.3. 캡처링
5.3.1. 이벤트 캡처링 이용하기
5.4. 이벤트 버블링
5.4.1. 이벤트 버블링 이용하기
5.4.2. 버블링이 불가능한 이벤트 종류
5.5. 이벤트 전파 막기
5.5.1. e.stopPropagation()
5.5.2. e.stopImmediatePropagation()
5.5.3. e.preventDefault()
6. 이벤트 위임
6.1. 이벤트 위임
6.2. 이벤트 위임의 작동 방식
6.3. 이벤트 위임 사용 시 유의사항
6.4. 이벤트 위임 사용 예시
Reference
Chapter 4. 브라우저 렌더링
1. 브라우저 동작 원리를 알아야 하는 이유
2. 브라우저 동작 원리
2.1. 브라우저의 구조
2.1.1. 브라우저란?
2.1.2. 브라우저의 구성 요소
2.1.2.1. 사용자 인터페이스 (User Interface)
2.1.2.2. 브라우저 엔진 (Browser engine)
2.1.2.3. 렌더링 엔진 (Rendering engine)
2.1.2.4. 네트워킹 (Networking)
2.1.2.5. UI 백엔드 (UI Backend)
2.1.2.6. 자바스크립트 인터프리터 (JavaScript Interpreter)
2.1.2.7. 자료 저장소 (Data Persistence)
2.2. 브라우저와 서버의 통신 과정
2.2.1. 브라우저와 서버의 통신 과정 - HTTP 요청과 응답
2.2.2. 클라이언트 사이드 렌더링, 서버 사이드 렌더링
2.2.2.1. CSR(Client Side Rendering)
2.2.2.2. SSR (Server Side Rendering)
3. 브라우저 렌더링 과정
3.1. 파싱(Parsing)
3.2. HTML 파싱 - DOM(Document Object Model)
3.3. CSS 파싱 - CSSOM(CSS Object Model)
3.4. 자바스크립트 파싱과 실행
3.4.1. 자바스크립트 파싱과 CSS 파싱의 차이
3.4.2. 자바스크립트 파싱 과정
3.4.2.1. 자바스크립트 파싱 과정
3.4.2.2. 파싱 결과로 생성된 AST, 도대체 무엇일까?
3.4.2.3. AST 생성해보기
3.4.3. 자바스크립트 실행 방법
3.5. 렌더 트리
3.5.1. 렌더 트리란?
3.5.2 렌더 트리 형성 과정
3.6. 레이아웃과 페인트
3.6.1. 레이아웃
3.6.2. 페인트
3.6.3. 개발자 도구에서 레이어 확인하기
3.7. 컴포지션
4. 브라우저 렌더링 과정 최적화 방법
4.1. <script> 태그의 async, defer 속성
4.1.1. 스크립트 실행 과정
4.1.2. Async와 Defer
4.2. 리플로우, 리페인트 최적화
4.2.1. 리플로우, 리페인트란?
4.2.1.1. 리플로우
4.2.1.2. 리페인트
4.2.2. 리플로우, 리페인트 발생 확인하기
4.2.2.1. 리플로우 발생 확인하기
4.2.2.2. 리페인트 발생 확인하기
4.2.3. 리플로우, 리페인트 최적화 방법
4.2.3.1. 불필요한 DOM 요소 없애기
4.2.3.2. 애니메이션이 적용된 요소에 절대 위치나 고정 위치 사용하기
4.2.3.3. transform 사용하기
4.3. 가상 DOM
4.3.1. MPA와 SPA
4.3.2. 가상 DOM
Reference
Chapter 5. 실무 응용
1. 캐러셀 만들기
1.1. 캐러셀이란?
1.2. 실습 준비하기
1.3. UI 구성하기
1.4. 기능 구현하기
1.5. 최종 코드
2. 마치며