Nội dung

36.16 Dự Án Thực Tế với JavaScript DOM Tạo Gallery Ảnh - Pokemon by JS

Trong video này, tôi sẽ hướng dẫn các bạn cách sử dụng JavaScript để thao tác với DOM (Document Object Model) thông qua ba ví dụ thực tế. Mục tiêu là giúp các bạn nắm vững cách tạo, chỉnh sửa và thêm các phần tử HTML vào trang web một cách linh hoạt và hiệu quả. Chúng ta sẽ bắt đầu với việc chọn một phần tử cha trong HTML bằng phương thức `getElementById`. Đây là bước đầu tiên để xác định nơi mà chúng ta sẽ thêm các phần tử con mới vào. Trong ví dụ đầu tiên, tôi sẽ hướng dẫn các bạn cách tạo một phần tử hình ảnh (`img`) mới bằng phương thức `createElement`, sau đó thiết lập thuộc tính `src` của nó để trỏ đến một đường dẫn hình ảnh cụ thể. Cuối cùng, chúng ta sẽ sử dụng phương thức `appendChild` để thêm phần tử hình ảnh này vào phần tử cha đã chọn ban đầu. Tiếp theo, trong ví dụ thứ hai, chúng ta sẽ nâng cao kỹ năng bằng cách tạo và thêm một loạt 150 hình ảnh vào phần tử cha. Chúng ta sẽ sử dụng vòng lặp `for` để lặp qua các số từ 1 đến 150, tạo ra các phần tử hình ảnh mới trong mỗi lần lặp, thiết lập thuộc tính `src` của chúng để trỏ đến các hình ảnh khác nhau, và thêm chúng vào phần tử cha. Cuối cùng, ở ví dụ thứ ba, tôi sẽ giới thiệu cách tạo một cấu trúc phức tạp hơn bằng cách sử dụng các khối `div` để chứa mỗi hình ảnh cùng với một thẻ `span` hiển thị số thứ tự của hình ảnh. Chúng ta sẽ tiếp tục sử dụng vòng lặp `for` để lặp qua các số từ 1 đến 150, nhưng lần này, mỗi lần lặp sẽ tạo ra một khối `div` mới. Sau đó, chúng ta sẽ thêm phần tử hình ảnh và thẻ `span` vào trong khối `div` này trước khi thêm toàn bộ khối `div` vào phần tử cha. Mục tiêu của video là giúp các bạn hiểu rõ hơn về cách thao tác với DOM, sử dụng các phương thức của JavaScript để tạo và thêm các phần tử HTML vào trang web. Qua đó, các bạn sẽ thấy được sức mạnh và tính linh hoạt của JavaScript trong việc xây dựng và quản lý giao diện người dùng trên web.