Bạn có biết rằng chúng ta có thể sử dụng JavaScript để điều khiển nội dung trên trang web không? Có vẻ thú vị phải không? Chúng ta hãy hiểu mô hình đối tượng tài liệu là gì. DOM trong JavaScript theo cách sau:
- DOM trong JavaScript là gì?
- Các hành động của DOM trong JavaScript
- Truy vấn DOM
- Lắng nghe sự kiện
- Tương tác với các biểu mẫu
- Tạo phần tử HTML
- Thêm CSS
DOM trong JavaScript là gì?
Mô hình Đối tượng Tài liệu hoặc DOM được tạo bởi trình duyệt khi một trang web được tải. Ở dạng đồ họa, nó giống như một cây các phần tử còn được gọi là các nút, được sử dụng để đại diện cho mọi phần tử đơn lẻ trên trang.
Tất cả DOM của trang web của chúng tôi đều nằm bên trong đối tượng tài liệu. Theo chương trình, mô hình này cho phép chúng tôi đọc hoặc thậm chí thay đổi nội dung trang của chúng tôi thông qua . Thật tuyệt phải không?
con rối vs đầu bếp vs ansible
Các hành động của DOM trong JavaScript
Một số hành động mà chúng tôi có thể thực hiện với mô hình này là:
Thay đổi / Loại bỏ các phần tử HTML trong DOM / trên trang.
Thay đổi và thêm kiểu CSS vào các phần tử
Đọc và thay đổi các thuộc tính (href, src, alt), v.v.
Tạo các phần tử mới và chèn chúng vào DOM / page.
cách sử dụng goto trong python
Đính kèm trình nghe sự kiện vào các phần tử (nhấp, nhấn phím, gửi)
Truy vấn DOM bằng JavaScript
Lấy một phần tử HTML hoặc nắm giữ nó để thêm / thay đổi hoặc nội dung được gọi là truy vấn.
Mã HTML:
Javascript và DOM h1 {font-size: 60px}Mã JavaScript:
var title = document.getElementById ('title') // màu cgangin thành red title.style.color = 'red' var body = document.getElementById ('body') // thay đổi màu nền thành body.style xanh lam nhạt. backgroundColor = 'lightblue'Chúng tôi đã thay đổi màu văn bản của tiêu đề từ đen sang đỏ bằng JavaScript. Chúng tôi đã đạt được điều này bằng cách sử dụng .Phong cách tài sản sau đó đã thay đổi giá trị của màu sắc bằng mạng lưới .
Bây giờ, hãy thay đổi màu nền của phần tử body thành xanh nhạt .
cuối cùng vs cuối cùng vs cuối cùng
Với điều này, chúng ta sẽ kết thúc bài viết DOM trong JavaScript này. Tôi hy vọng bạn đã hiểu cách hoạt động của Mô hình đối tượng tài liệu và cách triển khai cùng một DOM trong JavaScript.
Bây giờ bạn đã biết về DOM trong JavaScript, hãy xem của Edureka. Đào tạo Chứng chỉ Phát triển Web sẽ giúp bạn học cách tạo các trang web ấn tượng bằng cách sử dụng HTML5, CSS3, Twitter Bootstrap 3, jQuery và Google API và triển khai nó cho Amazon Simple Storage Service (S3).
Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần nhận xét của “DOM trong JavaScript” và chúng tôi sẽ liên hệ lại với bạn.