김홍태

React, Next.js, Vue를 아무리 공부해도 코드가 추상적으로 느껴지고, 구조가 확실히 이해되지 않는다면, 그 근본 원인은 DOM에 대한 이해 부족일 수 있습니다. DOM은 모든 프론트엔드 프레임워크의 기반이며, 웹 페이지의 구조와 동작을 연결해주는 실체입니다.

이 강의는 단순한 선택자나 조작법을 넘어, HTML이 어떻게 DOM 객체로 바뀌고, 이 구조를 어떻게 선택하고 탐색하며, 조작할 수 있는지를 처음부터 차근차근 알려주는 DOM 완전 정복의 Part 1 입문 강의입니다.

HTML 태그는 구조일 뿐이고, 자바스크립트는 행동일 뿐이지만, 그 둘을 연결하는 핵심이 DOM입니다. 이 연결고리를 명확히 이해하면, 어떤 프레임워크를 쓰든 그 안의 진짜 구조와 흐름을 정확히 꿰뚫어볼 수 있게 됩니다.

nhcodingstudio

구조 탐색과 조작의 모든 것 - [DOM 완전 정복 Part 1]

이론과 실습 한 번에

이론 실습 모두

핵심원리

이해가 쏙쏙

입문

초급

중급이상

HTML/CSS

자바스크립트

JavaScript

리액트

React

Document Object Model

frontend

수업에 사용 될 예제 코드입니다. 수강 전에 반드시 다운로드해주세요!

🔹 Section 1: 왜 DOM을 배워야 하는가 – 동기와 배경

🔹 Section 2: DOM 구조 이해 – 구조와 API 분리해서 보기

🔹 Section 3: DOM 트리 구조와 핵심 개념

🔹 Section 4: DOM 요소 선택 방법 완전 정복

🔹 Section 5: 클래스와 구조 기반 탐색 심화

🔹 Section 6: DOM 요소 생성, 삽입, 삭제

🔹 Section 7: DOM 속성 제어와 클래스/스타일 조작

🔹 Section 8: DOM Node vs Element 정리