강의

멘토링

커뮤니티

Programming

/

Front-end

DOM Interaction

DOM is the essential foundation of dynamic applications. This course covers everything from the basics to the advanced application of all events occurring in and triggered by Element, Document, and Window objects. You will thoroughly learn and be able to utilize Web Components (Custom Element, Shadow DOM, Template). Together with the "DOM Mastery: Basics" course, you can bring your DOM expertise to completion.

(5.0) 2 reviews

287 learners

Level Basic

Course period Unlimited

  • tonextday
DOM
DOM
JavaScript
JavaScript
HTML/CSS
HTML/CSS
DOM
DOM
JavaScript
JavaScript
HTML/CSS
HTML/CSS

What you will gain after the course

  • All events for Element, Document, and Window

  • Web Components: Custom Element, Shadow DOM, <template>

  • Clipboard, Drag & Drop, Mutation Observer

DOM + Web Component
You must change your fundamental approach to see the flow.

The final word on DOM for dynamic applications.

To implement user-centric dynamic applications, you must be able to recognize user actions. This can be achieved through all DOM events that occur or are triggered within the Element, Document, and Window objects.

Why should you learn Web Components thoroughly?Lý do tại sao phải học Web Component một cách hoàn chỉnh?

Web Components are the foundation of component development, combining HTML, CSS, the DOM, and JavaScript. Understanding this flow is essential for expanding your perspective on dynamic application development.

To cover the topics in depth, breadth, and detail, the content is divided into three separate lectures.

  • The first lecture, "DOM Basics," covers the fundamentals of the DOM and the Window object.
  • This is the second lecture, "DOM Interaction."
  • The third lecture, "DOM: CSSOM," covers CSS-centric DOM processing.

Mastering core technologies without relying on specific frameworks or libraries

Have you been using frameworks and libraries but still find yourself craving a deeper understanding of the fundamental technologies? If you can fully develop dynamic web applications using vanilla coding, it won't take much time to learn libraries or frameworks, even if you don't know them yet. The concepts covered in this course also serve as the very foundation for those libraries and frameworks.

You can learn the DOM more easily and completely. Are you a developer looking to build dynamic web applications or someone who wants to know everything about events? I hope you experience a fundamental transformation through this course.

Previous DOM Lecture (Recommended Prerequisite Course)


The deepest and most accurate way
to fully master the DOM.

It covers more than 95% of the DOM specification. You can truly master the DOM once and for all.
It is wide, deep, and detailed. You won't waste your time, money, or effort.

Whenever I develop a course, I always contemplate how to implement the requirements. To decide on an implementation method, you must first know what is supported (methods, properties, etc.).

Just like the previous "JavaScript Complete Guide" series, this course also covers more than 95% of the DOM interaction specifications. The same applies to the previous "DOM Complete Guide: Basics" course. Covering the content so thoroughly requires a skilled and experienced instructor to invest a significant amount of time into creating the course. However, that is the instructor's responsibility, and the learner should be able to see the big picture.

It took over a year to create Part 2 of the "Mastering the DOM" course. If I had covered only about 70%, I could have finished it in a much shorter time. However, while that would have been easier for me as an instructor, learners would have had to spend a significant amount of time trying to fill in the remaining 30%. The problem is, they wouldn't even know what that 30% consists of.

I am confident that this course, which I have prepared over a long period while adhering to the "95% principle," will help learners see the full picture of the DOM and broaden their thinking regarding dynamic applications.

A checklist is
provided.

To ensure no properties or methods of the interface are missed, I have created a checklist of the interface's properties and methods, as shown in the image below.Để không bỏ sót các thuộc tính và phương thức của interface, tôi đã tạo một danh sách kiểm tra (check list) các thuộc tính và phương thức của interface như hình ảnh bên dưới.

This list is provided as a PDF file. You can download and check the materials in the first lesson of the [HTMLElement Interface] section.

Property and Method Lecture Order Matching List

The entire course
is one complete
scenario.

The entire series follows a single scenario. Rather than memorizing functions, it is designed to help you grasp the overall flow. By following along step-by-step, you will naturally learn the whole picture. Since there is no overlapping content, you won't waste effort, time, or money. As you follow the lectures, you will naturally see the forest, the trees, the branches, and the flowers, allowing you to build a solid and deep foundation.

With the four available JavaScript courses, you can completely master the foundational technologies that underpin web development. We cover every event, property, and method in great depth and breadth, while also exploring the preceding and following code by framing them within practical scenarios. Cùng với 4 khóa học JavaScript đã được mở, bạn có thể hoàn thiện một cách trọn vẹn các công nghệ nền tảng cốt lõi của phát triển web. Chúng tôi không chỉ khai thác sâu và rộng từng sự kiện (event), thuộc tính (property) và phương thức (method), mà còn xây dựng các kịch bản mã nguồn trước và sau khi chúng thực thi để cùng tìm hiểu. turnover_rate: 0.00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

It comes from over 40 years of
experience.

I have poured into this lecture over 40 years of software development experience, the intuitive insights that can only be felt with the passage of time, and the expertise that has become second nature.

You can build true skills.
本物の実力
養うことができます。
Bạn có thể nâng cao thực lực thực sự
.

The DOM lecture is structured with HTML, CSS, DOM, and JavaScript all interconnected. Because of this, explaining a single event, property, or method requires writing 10 to 30 lines of code. However, live coding takes a long time and forces learners to wait.

To prevent these issues, pre-written code is presented and explained. After that, you must complete the coding yourself to see the full picture and understand the flow. This will improve your ability to adapt lecture code to your own development environment when building web programs. Since the lecture provides the surrounding boilerplate code, you will be able to use it to complete the specific code segments.

💾 Practice Environment and Learning Materials

  • You can run the course code as-is in modern browsers. The course was created in a Windows environment using Google Chrome version 100.
  • PDF files containing lists of interfaces, properties, and methods are provided as course materials. You can download them from the first lesson of Section 2.

Q&A 💬

Q. I see there is a "Mastering the DOM: Basics" course; do I need to take that one first?

You can take this course without having finished it, but it is recommended since this course does not cover basic DOM concepts. You might not fully understand the lectures or find it difficult to follow the flow. Additionally, because we use terminology as written in the official specifications, some terms may differ from those commonly known.

Q. Is there anything I need to know before taking the course?

You should know the basics of HTML and JavaScript. Since CSS is not covered, you do not need to know it.

Q. I'm a beginner who is new to the DOM. Can I take this course?

There are specific terms and concepts used in the DOM. These are covered in "DOM Complete Guide: Basics," so please take that course first.

Q. If I learn the DOM, can I develop web programs without using frameworks or libraries?

You can develop if you know HTML, CSS, and JavaScript.


Check out these
related courses that are great to take together.

Youngbo Kim's JavaScript Series

Go to JavaScript Roadmap (40% discount)

Youngbo Kim's DOM Series

Go to DOM Roadmap (40% discount)

Recommended for
these people

Who is this course right for?

  • Developers looking to learn dynamic web applications

  • A developer seeking to learn everything about events

  • Developers striving to implement user-centered UI/UX

Need to know before starting?

  • JavaScript Developer

  • DOM Basics

Hello
This is

9,737

Learners

407

Reviews

337

Answers

4.8

Rating

13

Courses

I am a developer who loves software development.

Email: tonextday@gmail.com

Videos: 11
Rust Build-up: Building a Solid Foundation

Cleanup JavaScript: Jump-up
Cleanup JavaScript: Base Build-up
JavaScript Beginner
JavaScript Intermediate/Advanced
Modern JavaScript (ES6+) Basics
Modern JavaScript (ES6+) Advanced
DOM Basics
DOM Interaction
React Beginner, Complete React
Requirements Analysis Implementation Methods
JavaScript Machine Learning TensorFlow.js

Books: 9 Volumes
Immersion! JavaScript
ECMAScript 6
HTML5
DOM Scripting
JavaScript Regular Expressions
Event Process Modeling for Requirements Analysis
Machine Learning TensorFlow.js,
Ajax Utilization, Complete Analysis of prototype.js
I am the first domestic author for 8 out of these 9 books.
In particular, there were no books related to "Machine Learning TensorFlow.js" on amazon.com at the time of its publication.

Among the 9 books I've authored, including "x Utilization" and "Complete Analysis of prototype.js," 8 are the first of their kind by a domestic author. In particular, when "Machine Learning TensorFlow.js" was published, there were no related books available on amazon.com.

Among the 9 books I have authored, including "x Utilization" and "Complete Analysis of prototype.js," 8 were the first of their kind by a domestic author. In particular, when "Machine Learning TensorFlow.js" was published, there were no related books available on amazon.com.

Curriculum

All

131 lectures ∙ (21hr 3min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

2 reviews

5.0

2 reviews

  • solideo님의 프로필 이미지
    solideo

    Reviews 7

    Average Rating 5.0

    5

    100% enrolled

    • mandala52469358님의 프로필 이미지
      mandala52469358

      Reviews 9

      Average Rating 5.0

      5

      31% enrolled

      Good to learn about DOM in detail.

      $17.60

      tonextday's other courses

      Check out other courses by the instructor!

      Similar courses

      Explore other courses in the same field!