머리말과 저자목록
Notion 링크, PDF 파일 및 QR 코드
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
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. 노드 교체 및 제거
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
1. 브라우저 동작 원리를 알아야 하는 이유