DOM là nền tảng và là yếu tố thiết yếu của các ứng dụng động. Khóa học bao quát tất cả các sự kiện phát sinh hoặc được tạo ra từ các đối tượng Element, Document, Window, từ cơ bản đến nâng cao. Bạn có thể học và vận dụng hoàn toàn Web Component (Custom Element, Shadow DOM, Template). Cùng với khóa học "Chinh phục DOM hoàn toàn: Cơ bản" đã ra mắt, bạn có thể hoàn thiện trọn vẹn kiến thức về DOM.
287 học viên
Độ khó Cơ bản
Thời gian Không giới hạn
Tất cả sự kiện của Element, Document, Window
Web Components: Custom Element, Shadow DOM, <template>
Clipboard, Drag & Drop, Mutation Observer
thoughtful
DOM + Web Component
Phải thay đổi từ gốc rễ mới có thể thấy được dòng chảy.
Để triển khai các ứng dụng động hướng đến người dùng, bạn cần phải nhận diện được hành vi của họ. Bạn có thể thực hiện điều này thông qua tất cả các sự kiện DOM phát sinh hoặc được tạo ra từ các đối tượng Element, Document và Window.
Web Component là nền tảng của việc phát triển component kết hợp giữa HTML, CSS, DOM và JavaScript. Việc nắm vững luồng tư duy này sẽ giúp bạn mở rộng khả năng tư duy trong phát triển ứng dụng động.
Để có thể truyền tải nội dung một cách sâu rộng và chi tiết, khóa học được chia thành 3 bài giảng riêng biệt.
thoughtful Bạn đang sử dụng các framework và thư viện, nhưng liệu bạn có đang khao khát những kiến thức nền tảng cốt lõi không? Nếu bạn có thể phát triển hoàn chỉnh một chương trình web động bằng Vanilla Coding, thì ngay cả khi chưa biết về các thư viện hay framework, bạn cũng sẽ không mất nhiều thời gian để học chúng. Những nội dung được học trong bài giảng này chính là nền tảng của các thư viện và framework đó.
Bạn có thể học DOM một cách dễ dàng và trọn vẹn hơn. Bạn là nhà phát triển muốn xây dựng các ứng dụng web động, hay là người muốn hiểu tường tận về Event? Hy vọng bạn sẽ có một trải nghiệm thay đổi từ gốc rễ thông qua khóa học này.
Nội dung bao quát hơn 95% thông số kỹ thuật của DOM. Bạn có thể nắm trọn kiến thức về DOM.
Rộng (Wide), Sâu (Deep) và Chi tiết (Detail). Không lãng phí thời gian, chi phí và công sức.
Mỗi khi xây dựng bài giảng, tôi luôn trăn trở về phương pháp triển khai các yêu cầu. Để quyết định phương pháp triển khai, trước tiên chúng ta cần phải biết những gì được hỗ trợ (phương thức, thuộc tính, v.v.).
Giống như series "JavaScript hoàn tất" trước đó, khóa học lần này cũng bao quát hơn 95% thông số kỹ thuật về tương tác DOM. Khóa học "DOM hoàn tất: Cơ bản" vừa qua cũng tương tự như vậy. Để bao quát nội dung một cách hoàn chỉnh như thế này, người hướng dẫn có năng lực và kinh nghiệm phải dành rất nhiều thời gian để xây dựng bài giảng. Tuy nhiên, đó là việc của người hướng dẫn, còn người học thì cần phải có cái nhìn toàn diện.
Tôi đã mất hơn một năm để hoàn thành phần 2 của khóa học "Chinh phục hoàn toàn DOM". Nếu chỉ khai thác khoảng 70% nội dung, tôi đã có thể hoàn thành khóa học trong thời gian ngắn hơn nhiều. Tuy nhiên, nếu làm vậy thì chỉ thuận tiện cho phía người dạy, còn người học sẽ phải tốn rất nhiều thời gian và công sức để tự lấp đầy 30% còn lại. Vấn đề nằm ở chỗ, người học thậm chí còn không biết 30% còn thiếu đó cụ thể là những gì.
Tôi tự tin rằng đây là bài giảng đã được chuẩn bị trong một thời gian dài, luôn tuân thủ nguyên tắc 95% để giúp người học có cái nhìn toàn cảnh về DOM và mở rộng tư duy về các ứng dụng động.
thoughtful Để 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.
Danh sách này được cung cấp dưới dạng tệp PDF. Bạn có thể tải tài liệu xuống và kiểm tra trong bài học đầu tiên của phần [HTMLElement Interface].
Toàn bộ series là một kịch bản duy nhất. Thay vì học thuộc lòng các tính năng, khóa học được thiết kế để bạn nắm bắt được cảm giác tổng thể. Nếu bạn theo dõi từng bước theo thứ tự, bạn sẽ học được toàn bộ nội dung một cách tự nhiên. Nội dung không bị trùng lặp nên bạn sẽ không lãng phí công sức, thời gian và chi phí. Theo sát lộ trình bài giảng, bạn sẽ có cái nhìn bao quát từ rừng, cây, cành cho đến hoa, từ đó củng cố nền tảng cơ bản một cách vững chắc.
thoughtful mini base 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
Tôi đã đưa vào bài giảng kinh nghiệm phát triển phần mềm hơn 40 năm qua, những cảm nhận tinh tế chỉ có thể thấu hiểu theo thời gian, và cả những kỹ năng đã trở thành bản năng tự nhiên.
Bài giảng về DOM là sự kết hợp giữa HTML, CSS, DOM và JavaScript. Do đó, để giải thích về một sự kiện (event), thuộc tính (property) hay phương thức (method), cần phải viết từ 10 đến 30 dòng mã. Tuy nhiên, nếu thực hiện coding trực tiếp (live coding) sẽ mất nhiều thời gian và người học phải chờ đợi.
Để ngăn chặn vấn đề này, tôi sẽ trình bày và giải thích các đoạn mã đã được soạn sẵn. Sau đó, bạn phải tự mình hoàn thành phần lập trình thì mới có thể nhìn thấy toàn bộ và nắm bắt được luồng xử lý. Kỹ năng của bạn sẽ được cải thiện để có thể áp dụng mã nguồn bài giảng phù hợp với môi trường phát triển khi lập trình web. Trong bài giảng, tôi cung cấp các đoạn mã cơ bản trước và sau, vì vậy bạn có thể tận dụng chúng để hoàn thiện các phần mã còn lại.
💾 Môi trường thực hành và tài liệu học tập
H. Tôi thấy có khóa học "Nắm trọn DOM: Cơ bản", tôi có cần phải học khóa đó trước không?
Bạn có thể tham gia khóa học mà không cần nghe trước, tuy nhiên vì khóa học này không đề cập đến các khái niệm DOM cơ bản nên tôi khuyên bạn nên nghe trước. Bạn có thể không hiểu hoàn toàn bài giảng hoặc nội dung có thể không được kết nối mạch lạc. Do khóa học sử dụng các thuật ngữ được viết trong đặc tả kỹ thuật (spec) nên có thể có một số thuật ngữ khác với những gì thường được biết đến.
Q. Có nội dung nào tôi cần biết trước khi nghe bài giảng không?
Bạn cần biết cơ bản về HTML và JavaScript. Vì khóa học không đề cập đến CSS nên bạn không cần biết về nó cũng được.
Q. Tôi là người mới bắt đầu tiếp xúc với DOM lần đầu thì có thể theo học khóa này được không?
Có những thuật ngữ và khái niệm được sử dụng trong DOM. Những nội dung này được đề cập trong khóa học "DOM hoàn toàn kết thúc: Cơ bản", vì vậy vui lòng nghe khóa học đó trước.
Q. Nếu học về DOM, tôi có thể phát triển chương trình web mà không cần sử dụng framework/thư viện không?
Nếu biết HTML, CSS và JavaScript, bạn có thể phát triển được.
Khóa học này dành cho ai?
Nhà phát triển muốn học về ứng dụng web động
Nhà phát triển muốn học hỏi mọi thứ về sự kiện (event)
Nhà phát triển mong muốn hiện thực hóa UI/UX lấy người dùng làm trung tâm
Cần biết trước khi bắt đầu?
Nhà phát triển JavaScript
Cơ bản về DOM
9,737
Học viên
407
Đánh giá
337
Trả lời
4.8
Xếp hạng
13
Các khóa học
Tôi là một nhà phát triển yêu thích việc phát triển phần mềm.
Email: tonextday@gmail.com
Video: 11
Rust Build-up: Xây dựng nền tảng hoàn chỉnh
Clean-up JavaScript: Jump-up
Clean-up JavaScript: Base Build-up
JavaScript cho người mới bắt đầu
JavaScript trung và cao cấp
JavaScript hiện đại (ES6+) cơ bản
JavaScript hiện đại (ES6+) chuyên sâu
DOM cơ bản
Tương tác DOM
React cho người mới bắt đầu, Hoàn tất React
Phương pháp triển khai phân tích yêu cầu
JavaScript Machine Learning TensorFlow.js
Sách đã xuất bản: 9 cuốn
Đắm mình cùng JavaScript!
ECMAScript 6
HTML5
DOM Scripting
Biểu thức chính quy JavaScript
Mô hình hóa Event Process để phân tích yêu cầu
Machine Learning TensorFlow.js,
Ứng dụng Ajax, Phân tích hoàn chỉnh prototype.js
Trong số 9 cuốn sách, có 8 cuốn tôi là tác giả đầu tiên tại Hàn Quốc.
Đặc biệt, cuốn "Machine Learning TensorFlow.js" tại thời điểm xuất bản chưa có sách liên quan trên amazon.com.
Trong số 9 cuốn sách như "Ứng dụng x", "Phân tích chi tiết prototype.js", có 8 cuốn tôi là tác giả đầu tiên tại Hàn Quốc. Đặc biệt, cuốn "Machine Learning TensorFlow.js" tại thời điểm xuất bản chưa hề có sách liên quan trên amazon.com.
Trong số 9 cuốn sách về ứng dụng x và phân tích chuyên sâu prototype.js, có 8 cuốn là tác giả đầu tiên tại Hàn Quốc. Đặc biệt, cuốn "Machine Learning TensorFlow.js" tại thời điểm xuất bản chưa hề có sách liên quan trên amazon.com.
Tất cả
131 bài giảng ∙ (21giờ 3phút)
Tài liệu khóa học:
Tất cả
2 đánh giá
5.0
2 đánh giá
Đánh giá 7
∙
Đánh giá trung bình 5.0
Đánh giá 9
∙
Đánh giá trung bình 5.0
469.624 ₫
Hãy khám phá các khóa học khác của giảng viên!
Khám phá các khóa học khác trong cùng lĩnh vực!
![Tất cả về khám phá và thao tác cấu trúc - [Chinh phục hoàn toàn DOM Part 1]강의 썸네일](https://cdn.inflearn.com/public/files/courses/338045/cover/01k1cvnt514nzd42eadka09p64?f=avif&w=420)
![[Code Factory] [Cơ bản] Khóa học hoàn chỉnh về NestJS REST API Backend - NestJS Core강의 썸네일](https://cdn.inflearn.com/public/courses/331985/cover/f0501069-2139-4112-aafa-a9b3a2932860/331985-eng.png?f=avif&w=420)
![Sử dụng Bootstrap để tạo trang web phản hồi [Phần khái niệm cơ bản] Bootcamp강의 썸네일](https://cdn.inflearn.com/public/courses/333092/cover/5a3043a4-fc2d-4b25-9096-306c8f707b5b/333092.jpg?f=avif&w=420)
![[Tiêu chuẩn ra đề 2026] Hướng dẫn hoàn hảo kỳ thi thực hành Kỹ năng phát triển thiết kế web강의 썸네일](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
