Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Web Development

Everything About Structure Navigation and Manipulation - [Complete DOM Mastery Part 1]

No matter how much you study React, Next.js, or Vue, if the code feels abstract and the structure isn't clearly understood, the root cause might be a lack of understanding of DOM. DOM is the foundation of all frontend frameworks and the entity that connects the structure and behavior of web pages. This lecture goes beyond simple selectors or manipulation methods, teaching step-by-step from the very beginning how HTML transforms into DOM objects and how to select, traverse, and manipulate this structure. It is the Part 1 introductory lecture of 'Complete DOM Mastery'. HTML tags are just structure, and JavaScript is just behavior, but DOM is the core that connects the two. If you clearly understand this connection, you'll be able to precisely grasp the true structure and flow within any framework you use.

(5.0) 2 reviews

33 learners

  • nhcodingstudio
이론 실습 모두
핵심원리
이해가 쏙쏙
HTML/CSS
JavaScript
React
DOM
frontend

What you will learn!

  • The essence of what DOM is and why it exists

  • Actual structure and process of HTML becoming DOM objects

  • DOM Tree Traversal (Mastering Parent/Child/Sibling Nodes)

  • getElementById, querySelector, etc. selector method differences

  • HTMLCollection vs NodeList: Exact Difference

  • Static Element Manipulation (Add/Delete/Change, etc.)

  • Dynamic styling control with classList

  • Attribute vs. Property: Understanding Complete Separation

  • Practical patterns for element insertion, movement, traversal, etc.

  • Structure-based debugging and even rendering optimization perspectives

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

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

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

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

이 강의의 특징

📌 단순히 DOM API 사용법만 나열하지 않고, DOM의 내부 구조와 메커니즘을 시각적 예시와 함께 근본부터 설명합니다.

📌 Node, Element, childNodes, children헷갈리기 쉬운 속성들의 차이를 직접 콘솔 실습으로 비교하며 완벽히 이해하게 만듭니다.

📌 innerHTML, textContent, remove(), replaceChild()실무에서 자주 쓰이는 DOM 조작 메서드들을 정확한 상황별로 구분해 설명합니다.

📌 DOM 구조를 단순히 나열하는 것이 아니라, HTML이 DOM 객체가 되기까지의 과정 전체를 해부하듯 다룹니다.

📌 모든 개념이 직접 눈으로 확인할 수 있는 DevTools 실습과 함께 진행되어, 추상적인 개념도 직관적으로 이해할 수 있습니다.

📌 DOM과 자바스크립트의 관계, DOM은 브라우저가 제공하는 Web API라는 점을 명확히 구분하여 설명합니다.

📌 HTMLCollection vs NodeList, live vs static, 속성 vs property처럼 실전 오류를 유발하는 헷갈리는 차이들을 완전히 구분할 수 있게 도와줍니다.

📌 React, Next.js, Vue 같은 프레임워크를 학습하기 전, 진짜 웹 구조의 기반을 정확히 이해하도록 설계된 DOM 입문 필수 강의입니다.

이런 분들께 추천해요

HTML, CSS, JS 기초는 배웠지만 이제 본격적으로 웹 개발을 제대로 시작해보고 싶은 예비 프론트엔드 개발자

단순히 따라 치는 코드가 아니라, 웹 브라우저가 HTML을 어떻게 해석하고 구조화하는지를 ‘제대로’ 이해하고 싶은 분

React, Next.js, Vue 등을 공부 중이지만 컴포넌트 내부 동작이 왜 그렇게 돌아가는지 감이 안 오는 분

수강 후에는

  • HTML을 보면 자동으로 DOM 구조가 떠오름

  • useRef, document API를 쓸 때 블랙박스 없이 원리부터 이해

  • 어떤 프레임워크를 쓰더라도 DOM을 정확히 이해하며 조작 가능

  • React 컴포넌트 내부 구조와 render 방식에 대한 감이 생김

  • 디버깅 시 console.dir과 트리 구조 해석이 자유로움

  • DOM 트리를 탐색하면서 필요한 부분만 효율적으로 접근 가능

  • 사용자 입력과 DOM 속성의 상호작용을 명확히 이해


  • 직접 DOM을 조작해 동적인 UI를 만들 수 있음

  • 프레임워크 없이도 미니 프로젝트를 구현할 수 있는 기초 완성

  • 렌더링 구조나 hydration 오류의 원인을 구조적으로 파악할 수 있음

이런 내용을 배워요.

HTML만으로는 부족했던 이유

정적인 구조만 존재하던 시절, 왜 DOM이라는 개념이 필요하게 되었는지를 시대적 흐름과 함께 이해합니다.

DOM이란 무엇이고 어떻게 만들어지는가

브라우저는 HTML을 어떻게 파싱해서 객체로 바꾸는지, DOM 트리가 어떻게 구성되는지 처음부터 끝까지 흐름을 파악합니다.

구조와 API는 구분해서 봐야 한다
DOM은 구조이자 동시에 인터페이스입니다. 트리 구조와 조작 메서드를 분리해 바라보는 시각을 훈련합니다.

DOM 요소 선택의 모든 방법들
getElementById, querySelector, querySelectorAll 등 실무에서 쓰이는 모든 DOM 선택 방법의 원리와 차이점을 명확히 정리합니다.

Node vs Element의 진짜 차이
많은 초보자가 헷갈리는 childNodes, children, firstChild, firstElementChild의 차이를 노드 타입까지 포함해 정확히 분석합니다.

HTMLCollection과 NodeList의 구조적 차이
비슷해 보이지만 동작이 전혀 다른 이 두 객체의 반환 방식, 실시간 반영 여부, 반복문 호환성까지 명확히 비교합니다.

요소 생성, 삽입, 제거, 교체의 모든 방식

appendChild, prepend, remove, replaceChild 등 요소 추가/삭제/교체의 모든 방법과 그 동작 방식을 실제 코드와 함께 배웁니다.

innerHTML vs textContent의 성능과 보안
단순 문자열 출력이 아닌, XSS 공격 가능성과 성능 차이까지 함께 고려한 안전한 DOM 출력 방식을 학습합니다.


수강 전 참고 사항

선수 지식 및 유의사항

  • HTMLJavaScript의 기초 문법만 알고 있다면 누구나 수강 가능

  • React, Next.js 사용자라면 지금의 혼란을 해결하는 전환점이 될 수 있음

  • 이 강의는 단순히 문법을 암기하는 과정이 아닙니다.

  • DOM이 왜 그렇게 동작하는지를 구조적으로 이해하는 데 집중합니다.

  • 실습을 위해 브라우저 개발자 도구(DevTools)를 적극 활용합니다

  • CSS가 주가 아닌, 구조 탐색과 조작 중심의 강의입니다

  • 다음 Part 2 강의에서 DOM 이벤트와 동적 UI로 이어집니다

학습 자료

  • 모든 강의에는 각 회차별 교본 형식의 학습 자료가 제공됩니다.

  • 각 강의 주제에 맞는 실습 코드와 연습문제 파일이 함께 제공되어, 직접 따라하며 체득할 수 있습니다.

  • 별도의 선행 라이브러리 지식은 필요 없으며, 브라우저와 코드 편집기 사용법만 알면 수강이 가능합니다.

  • 강의는 단계적으로 구성되어 있어 DOM을 처음 접하는 분도 점진적으로 구조와 조작 방식을 익힐 수 있습니다.

Recommended for
these people

Who is this course right for?

  • For those who have just started web development but find the connection between HTML and JS difficult

  • For those who want to learn how web pages truly work, beyond just making them.

  • React/Next.js learners constantly stuck on useRef, DOM manipulation

  • People desiring powerful UIs with just Vanilla JS, no frameworks.

  • Knows HTML, but JavaScript DOM feels daunting.

  • Those who just repeat console.dir when debugging, failing to grasp the structure.

  • Frontend junior eager to master DOM's internals

  • Those who want to write the framework's abstracted code "with understanding"

  • Genuinely curious what querySelectorAll returns

  • Those unfamiliar with class adding/removing and element inserting/deleting

  • Wanting the insight to design HTML structure.

  • Those who wish to perform DOM structure-based event delegation/optimization in practice.

Need to know before starting?

  • It's good to know the basic HTML tag structure.

  • Understanding JavaScript variables, functions, and conditionals is sufficient.

  • If you can use Chrome Developer Tools (DevTools), it's better.

Hello
This is

147

Learners

6

Reviews

4.3

Rating

9

Courses

안녕하세요, 우리동네코딩 스튜디오에 오신 것을 환영합니다!

우리동네코딩 스튜디오는 카네기 멜론, 워싱턴, 토론토, 워터루 등 북미의 주요 대학에서 컴퓨터공학을 전공하고, Google, Microsoft, Meta 등 글로벌 IT 기업에서 실무 경험을 쌓은 개발자들이 함께 만든 교육 그룹입니다.

처음에는 미국과 캐나다의 컴퓨터공학 전공자들끼리 함께 공부하며 성장하고자 만든 스터디 모임에서 시작되었습니다. 각기 다른 대학, 다른 시간대에 있었지만 함께 문제를 해결하고 서로에게 배운 그 시간은 매우 특별했고, 자연스럽게 이런 생각이 들었습니다.

“우리가 공부하던 이 방식, 그대로 다른 사람에게도 전하면 어떨까?”

그 물음이 바로 우리동네코딩 스튜디오의 출발점이었습니다.

현재는 약 30명의 현직 개발자와 컴퓨터공학 전공 대학생들이 각자의 전문 분야를 맡아, 입문부터 실전까지 아우르는 커리큘럼을 직접 설계하고 강의합니다. 단순한 지식 전달을 넘어, 진짜 개발자의 시선으로 배우고 함께 성장할 수 있는 환경을 제공합니다.

“진짜 개발자는, 진짜 개발자에게 배워야 합니다.”

저희는 웹 개발의 전 과정을 처음부터 끝까지 체계적으로 다루되, 이론에 머무르지 않고 실습과 실전 중심의 피드백을 통해 실력을 키워드립니다.
수강생 한 사람, 한 사람의 성장을 함께 고민하고 이끌어가는 것이 우리의 철학입니다.

🎯 우리의 철학은 분명합니다.
"진정한 배움은 실천에서 오고, 성장은 함께할 때 완성된다."

개발을 처음 시작하는 입문자부터, 실무 능력을 키우고 싶은 취업 준비생, 진로를 탐색 중인 청소년까지.
우리동네코딩 스튜디오는 모두의 출발점이자, 함께 걷는 든든한 동반자가 되고자 합니다.

이제, 혼자 고민하지 마세요.
우리동네코딩 스튜디오가 여러분의 성장을 함께하겠습니다.


Welcome to Neighborhood Coding Studio!

Neighborhood Coding Studio was founded by a team of developers who studied computer science at top North American universities such as Carnegie Mellon, the University of Washington, the University of Toronto, and the University of Waterloo, and went on to gain hands-on experience at global tech companies like Google, Microsoft, and Meta.

It all began as a study group formed by computer science students across the U.S. and Canada, created to grow together by sharing knowledge, solving problems, and learning from one another.
Though we were attending different schools in different time zones, the experience was so meaningful that it led us to one simple thought:

“What if we shared this way of learning with others?”

That thought became the foundation of Neighborhood Coding Studio.

Today, we are a team of around 30 active developers and computer science students, each taking responsibility for their area of expertise—designing and delivering a curriculum that spans from foundational knowledge to real-world development.
We’re not just here to teach—we’re here to help you see through the lens of real developers and grow together.

“To become a real developer, you must learn from real developers.”

Our courses take you through the entire web development journey—from start to finish—focused on hands-on practice, real-world projects, and practical feedback.
We care deeply about each learner’s growth and are committed to supporting your path every step of the way.

🎯 Our philosophy is simple but powerful:
"True learning comes from doing, and true growth happens together."

Whether you're just getting started, preparing for your first job, or exploring your future in tech,
Neighborhood Coding Studio is here to be your launchpad—and your trusted companion on the journey.

You don’t have to do it alone.
Let Neighborhood Coding Studio walk with you toward your future in development.

Curriculum

All

27 lectures ∙ (2hr 34min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

2 reviews

5.0

2 reviews

  • Hewbie님의 프로필 이미지
    Hewbie

    Reviews 22

    Average Rating 4.0

    5

    100% enrolled

    • nhcodingstudio
      Instructor

      감사합니다, Hewbie님! 귀한 평가를 남겨주셔서 정말 큰 힘이 됩니다. 이런 피드백이 있기에 저도 더 열정적으로 강의를 준비하고, 더 나은 콘텐츠를 만들 수 있습니다. 앞으로도 좋은 컨텐츠를 더욱 많이, 더욱 알차게 준비해서 찾아뵙겠습니다. 혹시 아직 [DOM 완전 정복 Part 2] – 이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 강의를 안 들어보셨다면, Part 1에서 배운 내용을 자연스럽게 확장할 수 있도록 부담 없이 이어서 들으시기를 권장드립니다. 그리고 현재 8월 말에는 [DOM 완전 정복 Part 3] – Critical Rendering Path 완벽 분석과 실전 최적화 강의가 출시될 예정이니, 브라우저 렌더링 성능과 최적화까지 완벽하게 마스터하실 수 있을 것입니다. 😊 그리고 언제든지 궁금한 점이 생기시거나, 개발 관련해서 도움이 필요하실 때는 아래 오픈채팅방을 자유롭게 이용해 주세요. 같이 공부하시는 분들과 소통도 가능하고, 저도 자주 들러서 함께 고민 나누고 있습니다! 📮 오픈채팅방: [https://open.kakao.com/o/gC10Fnoh] 개발 여정을 언제나 진심으로 응원합니다. 다음 강의에서 꼭 다시 뵐 수 있기를 바라요! 🚀

  • ryne LEE님의 프로필 이미지
    ryne LEE

    Reviews 5

    Average Rating 4.8

    5

    19% enrolled

    처음 들으면 개념이 이해가 가지 않지만, 계속해서 반복적으로 강조하고 그림으로 보여주기 때문에 이해하기 어렵지 않았습니다! 다음 강의도 볼 의향이 있어요.

    • nhcodingstudio
      Instructor

      ryne LEE 님, 소중한 피드백 정말 감사합니다! 🙏 처음엔 생소했던 개념도 반복과 시각화를 통해 잘 따라와 주셨다니, 정말 뿌듯하고 보람을 느낍니다. 열심히 준비한 강의가 이렇게 전달되었다는 사실에 큰 힘이 되네요. DOM 완전 정복 Part 2는 빠르면 일주일 내에 업로드될 예정입니다! Part 1에서 배운 개념들을 바탕으로 실제 UI 인터랙션과 이벤트 처리를 본격적으로 다루게 되니 많은 기대 부탁드립니다 😊 그리고 언제든지 궁금한 점이 생기시거나, 개발 관련해서 도움이 필요하실 때는 아래 오픈채팅방을 자유롭게 이용해 주세요. 같이 공부하시는 분들과 소통도 가능하고, 저도 자주 들러서 함께 고민 나누고 있습니다! 📮 오픈채팅방: [https://open.kakao.com/o/gC10Fnoh] 개발 여정을 언제나 진심으로 응원합니다. 다음 강의에서 꼭 다시 뵐 수 있기를 바라요! 🚀

$23.10

nhcodingstudio's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!