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.
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.
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.
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.