39장 DOM

1. DOM 개념

• DOM: HTML 문서를 객체(트리 구조)로 표현한 API (문서 = 트리 구조)
• HTML 요소는 요소 노드, 어트리뷰트 노드, 텍스트 노드로 구성됨
• DOM API의 시작점: document

2. 노드 종류 및 상속 구조

노드 타입	설명
문서 노드	최상위 노드 (document)
요소 노드	HTML 태그 (div, ul 등)
텍스트 노드	태그 내부 문자열
어트리뷰트 노드	class="foo" 같은 속성 노드

상속 구조 (예: input 요소) Object → EventTarget → Node → Element → HTMLElement → HTMLInputElement

3. 요소 노드 취득 방법

메서드	설명	반환 타입
getElementById(id)	ID로 단일 요소	Element or null
getElementsByTagName(tag)	태그명으로 다수	HTMLCollection
getElementsByClassName(class)	클래스명으로 다수	HTMLCollection
querySelector(selector)	CSS 선택자, 단일	Element or null
querySelectorAll(selector)	CSS 선택자, 다수	NodeList

-> HTMLCollection은 live, NodeList는 static -> matches()로 셀렉터 일치 여부 확인

4. 노드 탐색

목적	프로퍼티
부모 노드	parentNode
자식 노드	childNodes, children
형제 노드	nextSibling, previousSibling
요소만 탐색	firstElementChild, nextElementSibling 등

5. 노드 정보 확인

프로퍼티	설명	예시
nodeType	노드 타입 숫자	1(요소), 3(텍스트), 9(문서)
nodeName	노드 이름	"DIV", "#text" 등

6. 텍스트 조작

속성	대상	특징
nodeValue	텍스트 노드	텍스트 전용
textContent	요소 전체	HTML 무시하고 텍스트만
innerText	요소 전체	CSS 영향 받음 (비추천)

7. DOM 조작

동작	메서드
삽입 (마크업)	innerHTML, insertAdjacentHTML()
삽입 (노드)	createElement, appendChild, insertBefore
복사	`cloneNode(true
교체	replaceChild(new, old)
삭제	removeChild(child)
효율적 삽입	DocumentFragment 사용

8. 어트리뷰트 vs 프로퍼티

구분	설명	접근 방법
어트리뷰트	초기 HTML 속성	get/setAttribute()
프로퍼티	현재 상태	element.value, element.id 등

data-속성은 dataset 사용 (dataset.userId, camelCase로 변환)

9. 스타일 조작

대상	설명
element.style	인라인 스타일 직접 조작
className	클래스 문자열 전체 조작
classList	클래스 리스트 조작 (add, remove, toggle, replace)
getComputedStyle()	계산된 스타일 조회 (CSS 전체)

정리

• DOM은 HTML을 트리 구조의 객체로 표현
• 노드는 다양한 타입으로 구분되며, 상속 구조로 DOM API를 제공
• DOM 탐색/조작/스타일/어트리뷰트 처리 등은 대부분 document, element를 통해 가능
• 효율성과 보안(XSS) 고려해 적절한 메서드 선택 필요

42장 비동기 프로그래밍

1. 동기 vs 비동기 처리

동기(Synchronous)

• 코드가 순차적으로 실행
• 하나의 작업이 끝날 때까지 다음 작업 대기 → 블로킹 발생
• 예: 함수 호출, 반복문 등

sleep(foo, 3000); // 3초 기다림
bar();            // 블로킹되어 나중에 실행

비동기 (Asynchronous)

• 블로킹 없이 다음 코드 실행
• 실행 순서는 예측 불가
• 이벤트, 타이머, 네트워크 요청 등에서 사용

setTimeout(foo, 3000); // 대기 중
bar();                 // 먼저 실행됨

대표 비동기 API : setTimeout, setInterval, fetch, Promise, async/await

콜백 패턴의 한계

• 콜백 중첩 -> 콜백 지옥
• 에러 처리 어려움
• 가독성이 떨어져 유지보수 어려움 -> 해결: Promise, async/await

2. 이벤트 루프와 태스크 큐

자바스크립트 구조

구성 요소	설명
콜 스택	함수 실행 순서 관리
힙(Heap)	객체 저장
Web API	비동기 작업 위임 (ex. setTimeout)
태스크 큐	비동기 콜백 함수 대기 공간
마이크로태스크 큐	Promise의 then, catch 대기 공간 (우선 순위 ↑)

이벤트 루프 동작 순서

1. 콜스택이 비어있는지 확인
2. 마이크로 태스크 큐 우선 처리
3. 태스크 큐(FIFO)에서 콜백을 꺼내 콜 스택에 푸시 -> 실행

예시

setTimeout(() => console.log("timeout"), 0);
Promise.resolve().then(() => console.log("promise"));
console.log("sync");

실행 순서

• sync
• promise # 마이크로태스크 큐 우선
• timeout # 태스크 큐 나중

정리

항목	동기 처리	비동기 처리
특징	순차 실행, 블로킹	병렬처럼 처리, 논블로킹
문제	지연 발생	순서 불확실
API	없음	setTimeout, Promise, async/await 등
처리 방식	콜 스택만 사용	이벤트 루프 + 태스크 큐