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

/

Front-end

Tương tác DOM

DOM là nền tảng và là yếu tố thiết yếu của các ứng dụng động. Chúng tôi sẽ hướng dẫn bạn cách sử dụng mọi sự kiện xảy ra và được tạo ra từ các đối tượng Element, Document và Window. Bạn sẽ học cách sử dụng và hoàn toàn làm chủ Web Component (Custom Element, Shadow DOM, Template). Bạn có thể hoàn thành khóa học "Hoàn thành DOM hoàn toàn: Cơ bản" đã mở để chấm dứt việc học về DOM.

(5.0) 1 đánh giá

285 học viên

  • tonextday
dom
javascript
자바스크립트
event
html
DOM
JavaScript
HTML/CSS

Dịch cái này sang tiếng Việt

  • Tất cả các sự kiện của Element, Document, Window

  • Thành phần web: Phần tử tùy chỉnh, Shadow DOM, <template>

  • Bảng kẹp, Kéo & Drop, Người quan sát đột biến

DOM + Thành phần Web
Bạn phải thay đổi những điều cơ bản để thấy được sự thay đổi.

Phiếu giảm giá
Giảm giá từ 77.000 won xuống còn 33.000 won.
Số phiếu giảm giá: https://inf.run/Btxsi

Sự kết thúc của DOM cho các ứng dụng động.

Để triển khai các ứng dụng động, lấy người dùng làm trung tâm, bạn cần nhận biết hành vi của người dùng. Điều này có thể được thực hiện bằng cách sử dụng bất kỳ sự kiện DOM nào xảy ra hoặc được kích hoạt bởi các đối tượng Element, Document và Window.

Tại sao bạn nên học toàn bộ Web Components ?

Thành phần Web là nền tảng của phát triển thành phần, kết hợp HTML, CSS, DOM và JavaScript. Hiểu được quy trình này sẽ mở rộng góc nhìn của bạn về phát triển ứng dụng động.

Để trình bày chủ đề một cách sâu sắc, rộng rãi và chi tiết, chúng tôi sẽ chia chủ đề thành ba bài giảng.

  • Bài giảng đầu tiên, "Kiến thức cơ bản về DOM", trình bày những kiến thức cơ bản về DOM và đối tượng Window.
  • Bài giảng này là bài giảng thứ hai, "Tương tác DOM".
  • Bài giảng thứ ba, "DOM: CSSOM", trình bày về xử lý DOM tập trung vào CSS.

Hiểu các công nghệ cơ bản mà không cần dựa vào các khuôn khổ/thư viện cụ thể

Bạn đang sử dụng các framework và thư viện nhưng lại thiếu các kỹ năng cơ bản? Nếu bạn có thể phát triển hoàn chỉnh các ứng dụng web động với mã nguồn gốc, việc học chúng sẽ không mất nhiều thời gian, ngay cả khi bạn không biết gì về các thư viện hoặc framework. Nội dung bạn học trong khóa học này cũng đóng vai trò là nền tảng cho các thư viện và framework này.

Bạn có thể học DOM dễ dàng và chuyên sâu hơn. Bạn là một nhà phát triển đang tìm cách phát triển các ứng dụng web động hay muốn hiểu rõ về các sự kiện? Khóa học này sẽ mang đến cho bạn một trải nghiệm mang tính đột phá về mặt cơ bản.

Các bài giảng DOM trước đây (khóa học tiên quyết được khuyến nghị)


Học DOM một cách toàn diện
Con đường sâu nhất và chính xác nhất .

Bao gồm hơn 95% thông số kỹ thuật DOM. Bạn có thể thêm dấu chấm vào DOM.
Rộng, sâu và chi tiết. Không tốn thời gian, tiền bạc hay công sức.

Mỗi khi xây dựng một khóa học, tôi luôn phải cân nhắc cách triển khai các yêu cầu. Để xác định cách triển khai, trước tiên tôi cần hiểu những gì được hỗ trợ (phương thức, thuộc tính, v.v.).

Giống như loạt bài "Complete JavaScript" trước đây, khóa học này bao gồm hơn 95% đặc tả tương tác DOM. Bài giảng "Complete DOM: Basics" trước đây cũng không ngoại lệ. Việc bao quát khối lượng tài liệu lớn như vậy đòi hỏi một giảng viên có kỹ năng và kinh nghiệm phải đầu tư đáng kể thời gian và công sức để xây dựng một khóa học. Tuy nhiên, đây là trách nhiệm của giảng viên; người học cần có khả năng tiếp cận toàn bộ khóa học.

Phải mất hơn một năm để tạo ra phần thứ hai của khóa học "Hoàn thành DOM". Tôi đã có thể hoàn thành khóa học trong thời gian ngắn hơn nhiều nếu chỉ học 70% nội dung. Tuy nhiên, điều này chỉ thuận tiện cho giảng viên, trong khi học viên sẽ phải mất rất nhiều thời gian để hoàn thành 30% còn lại. Vấn đề là, tôi không biết 30% đó là gì.

Tôi tin rằng khóa học này đã được chuẩn bị trong một thời gian dài, tuân thủ nguyên tắc 95%, để giúp sinh viên có thể thấy toàn bộ DOM và mở rộng tư duy của họ về các ứng dụng động.

Danh sách kiểm tra
Cung cấp.

Để tránh bỏ sót bất kỳ thuộc tính hoặc phương thức nào của giao diện, tôi đã tạo một danh sách kiểm tra các thuộc tính và phương thức của giao diện như trong hình bên dưới.

Danh sách này có sẵn dưới dạng tệp PDF. Bạn có thể tải xuống và xem lại tài liệu từ bài học đầu tiên trong phần [Giao diện HTMLElement].

Thuộc tính, phương pháp bài giảng thứ tự danh sách khớp

Toàn bộ bài giảng
Một cái hoàn chỉnh
Đây là một kịch bản .

Toàn bộ chuỗi bài học là một kịch bản duy nhất. Vấn đề không phải là ghi nhớ các hàm, mà là cảm nhận bức tranh tổng thể. Bằng cách làm theo từng bước theo thứ tự, bạn sẽ tự nhiên nắm được toàn bộ câu chuyện. Vì không có sự trùng lặp nội dung, bạn sẽ không tốn công sức, thời gian hay tiền bạc. Bằng cách theo dõi các bài giảng, bạn sẽ tự nhiên nhìn thấy khu rừng, cây cối, cành lá và hoa lá, củng cố kiến thức cơ bản của mình.

Với bốn khóa học JavaScript này, bạn sẽ có được sự hiểu biết toàn diện về các công nghệ cơ bản tạo nên nền tảng của phát triển web. Chúng tôi sẽ trình bày chi tiết về các sự kiện, thuộc tính và phương thức, đồng thời tạo ra các kịch bản để minh họa mã nguồn xung quanh các sự kiện này.

Trong hơn 40 năm
Nó xuất phát từ kinh nghiệm.

Tôi đã dồn hết kinh nghiệm phát triển phần mềm trong hơn 40 năm vào bài giảng này, chia sẻ những khía cạnh cảm giác chỉ có thể cảm nhận được theo thời gian, những giác quan bản năng.

Kỹ năng thực tế
Bạn có thể nâng nó lên.

Khóa học DOM kết hợp HTML, CSS, DOM và JavaScript. Do đó, việc giải thích một sự kiện, thuộc tính hoặc phương thức đơn lẻ cần từ 10 đến 30 dòng mã. Tuy nhiên, việc lập trình trực tiếp mất nhiều thời gian và học viên phải chờ đợi.

Để tránh những vấn đề này, chúng tôi cung cấp mã nguồn được mã hóa sẵn và giải thích nó. Sau đó, bạn sẽ cần tự mình hoàn thành mã nguồn để xem toàn bộ và hiểu được luồng. Điều này sẽ giúp bạn phát triển kỹ năng bằng cách điều chỉnh mã nguồn khóa học cho phù hợp với môi trường phát triển của bạn khi phát triển các chương trình web. Khóa học cung cấp mã nguồn cơ bản cho cả phần đầu và phần cuối, cho phép bạn sử dụng để hoàn thành một phần mã nguồn.

💾 Môi trường thực hành và tài liệu học tập

  • Bạn có thể chạy mã khóa học như hiện tại trên bất kỳ trình duyệt hiện đại nào. Khóa học được tạo bằng Windows và Google Chrome phiên bản 100.
  • Chúng tôi cung cấp tệp PDF liệt kê các giao diện, thuộc tính và phương thức làm tài liệu bài giảng. Bạn có thể tải xuống từ bài học đầu tiên trong Phần 2.

Hỏi & Đáp 💬

H. Có một bài giảng có tựa đề " Toàn tập về DOM: Cơ bản ". Tôi có cần phải học bài giảng đó trước không?

Bạn có thể tham gia khóa học mà không cần nghe, nhưng chúng tôi khuyến khích bạn nên tham gia vì bài giảng này không đề cập đến các khái niệm DOM cơ bản. Bạn có thể không hiểu hết bài giảng hoặc thấy nội dung rời rạc. Vì bài giảng sử dụng thuật ngữ được chỉ định trong tài liệu hướng dẫn, một số thuật ngữ có thể khác với các thuật ngữ thông dụng.

H. Tôi cần biết điều gì trước khi tham dự buổi thuyết trình?

Bạn nên biết những kiến thức cơ bản về HTML và JavaScript. CSS không được đề cập đến nên bạn không cần phải biết.

H. Tôi là người mới bắt đầu và chưa biết gì về DOM. Tôi có thể tham gia khóa học này không?

Có một số thuật ngữ và khái niệm được sử dụng trong DOM. Những thuật ngữ và khái niệm này được đề cập trong bài "DOM Complete: Basics", vì vậy hãy xem bài giảng đó trước.

H. Nếu tôi học 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 bạn biết HTML, CSS và JavaScript, bạn có thể phát triển.


Thật tốt khi cùng nhau lắng nghe
Kiểm tra các bài giảng liên quan .

Bộ truyện JavaScript của Kim Young-bo

Truy cập JavaScript Roadmap (giảm giá 40%)

Bộ truyện DOM của Kim Young-bo

Truy cập DOM Roadmap (giảm giá 40%)

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Các nhà phát triển muốn tìm hiểu về các ứng dụng web động

  • Các nhà phát triển muốn tìm hiểu mọi thứ về sự kiện

  • Các nhà phát triển muốn triển khai 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

  • DOM cơ bản

Xin chào
Đây là

9,630

Học viên

392

Đánh giá

337

Trả lời

4.8

Xếp hạng

12

Các khóa học

소프트웨어 개발을 좋아하는 개발자입니다.

메일: tonextday@gmail.com

동영상: 12개
Rust 비기너 강좌 제작중, 2025.09 오픈 예정

클린업 자바스크립트: 점프업
클린업 자바스크립트: 베이스 빌드업
자바스크립트 비기너, 자바스크립트 중고급
모던 자바스크립트(ES6+) 기본, 모던 자바스크립트(ES6+) 심화
DOM 기본, DOM 인터랙션
React 비기너, React 완전 끝내기
요구분석 구현 방법
자바스크립트 머신러닝 TensorFlow.js

저서: 9권
몰입! 자바스크립트
ECMAScript 6
HTML5
DOM 스크립팅
자바스크립트 정규표현식
요구분석을 위한 Event Process 모델링
머신러닝 TensorFlow.js,
Ajax 활용, prototype.js 완전분석  
9권 중에서 8권은 국내 최초 저자입니다.
특히, "머신러닝 TensorFlow.js JavaScript"는 출판하는 시점에 amazon.com에 관련된 책이 없었습니다.

 

 

Chương trình giảng dạy

Tất cả

131 bài giảng ∙ (21giờ 3phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

1 đánh giá

5.0

1 đánh giá

  • mandala52469358님의 프로필 이미지
    mandala52469358

    Đánh giá 9

    Đánh giá trung bình 5.0

    5

    31% đã tham gia

    DOMを詳しく知れて良いです。

    1.611.840 ₫

    Khóa học khác của tonextday

    Hãy khám phá các khóa học khác của giảng viên!

    Khóa học tương tự

    Khám phá các khóa học khác trong cùng lĩnh vực!