Hướng dẫn dom javascript
Javascript là một ngôn ngữ được sử dụng trong các trình duyệt Browser nên nó đóng một vai trò khá quan trọng trong các ứng dụng website. Và nhiệm vụ của Javascript là thao tác với các tài liệu HTML kết hợp với các cú pháp riêng của nó để tạo nên sự ảo diệu của trang web. Để thao tác được với các thẻ HTML thì nó phải thông qua một cơ chế ta gọi là DOM. Show Vậy trong bài viết này chúng ta cùng tìm hiểu DOM là gì và cách thao tác với DOM bằng Js nhé! DOM là gì?DOM là viết tắt của chữ Document Object Model, dịch tạm ra là mô hình các đối tượng trong tài liệu HTML. Như các bạn biết trong mỗi thẻ HTML sẽ có những thuộc tính (Properties) và có phân cấp cha - con với các thẻ HTML khác. Sự phân cấp và các thuộc tính của thẻ HTML này ta gọi là selector và trong DOM sẽ có nhiệm vụ xử lý các vấn đề như đổi thuộc tính của thẻ, đổi cấu trúc HTML của thẻ,... DOM được dùng để truy xuất các tài liệu dạng HTML và XML, có dạng một cây cấu trúc dữ liệu, và thông thường mô hình DOM độc lập với hệ điều hành và dựa theo kỹ thuật lập trình hướng đối tượng để mô tả tài liệu. Bạn có thể tham khảo hình vẽ dưới đây để hiểu rõ hơn về DOM.
Chúng ta có thể thấy tất cả các thẻ HTML sẽ được quản lý trong đối tượng document, thẻ cao nhất là thẻ html, tiếp theo là phân nhánh body và head. Bên trong head thì có những thẻ như style, title, ... và bên trong body thì là vô số các thẻ HTML khác. Như vậy trong Javascript, để thao tác với các thẻ HTML ta phải thông qua đối tượng document, để cho nóng thì các bạn xem ví dụ bên dưới trước khi tìm hiểu tiếp nhé :D
Trong ví dụ này mình có sử dụng một đoạn code xử lý javascript như sau:
Và đoạn code này có ý nghĩa rằng tìm thẻ có Với DOM, JavaScript được tất cả sức mạnh cần thiết để tạo ra HTML động:
HTML DOM là gì?HTML DOM là một chuẩn mô hình object và programming interface cho HTML. nó định nghĩa:
HTML DOM là một tiêu chuẩn cho phép bạn thực hiện những công việc thao tác với bất kì một trang web: get, change, add, or delete các thành phần của HTML. Cây cấu trúc DOMNútĐối với HTML DOM, cấu trúc dạng cây gọi là DOM Tree có nghĩa là mọi thành phần đều được xem là 1 nút (node), được biểu diễn trên 1 cây . Các phần tử khác nhau sẽ được phân loại nút khác nhau nhưng quan trọng nhất là 3 loại: nút gốc (document node), nút phần tử (element node), nút văn bản (text node).
Quan hệ giữa các nút
Ta hãy cùng xem ví dụ cây cấu trúc DOM bên dưới:
Thao tác với DOMViệc thao tác với DOM cho bạn sức mạnh “thay đổi thế giới”, vì mọi nội dung đều có thể được cập nhật động thông qua các thuộc tính và phương thức của DOM. Tất tần tật từ thay đổi định dạng chữ, nội dung chữ đến thay đổi cấu trúc các nút và cả thêm nút mới, bạn đều có thể làm được. Do đó, để sáng tạo nội dung tốt, bạn cần hiểu rõ cách thao tác DOM và ý nghĩa của từng thuộc tính, phương thức. Các Thuộc tính và Phương thức thường gặpThuộc tính:
Phương thức:
Mặt khác, các phần tử DOM đều là các nút trên cây cấu trúc DOM. Chúng sở hữu thêm các thuộc tính quan hệ để biểu diễn sự phụ thuộc giữa các nút với nhau. Nhờ các thuộc tính quan hệ này, chúng ta có thể truy xuất DOM gián tiếp dựa trên quan hệ và vị trí của các phần tử: Thuộc tính quan hệ:
Bạn có thể xem danh sách đầy đủ ở W3SCHOOLS Truy xuất DOMTruy xuất gián tiếp:Mỗi nút trên cây DOM đều có 6 thuộc tính quan hệ để giúp bạn truy xuất gián tiếp theo vị trí của nút:
Truy xuất trực tiếp:Truy xuất trực tiếp sẽ nhanh hơn, và đơn giản hơn khi bạn không cần phải biết nhiều về quan hệ và vị trí của nút. Có 3 phương thức để bạn truy xuất trực tiếp được hỗ trợ ở mọi trình duyệt:
Tạo mới, thêm, xoá, thay thế phần tử HTML bằng JSTạo một phần tử HTMLChúng ta có thể tạo mới 1 phần tử HTML bằng các cách sau:
Ví dụ trên sẽ tạo ra 1 nút text, nhưng nó chưa hiển thị cho đến khi bạn gắn phần tử đó vào HTML document để nó là phần tử con của một phần tử nào đó, có một số cách để gắn phần tử tạo ra từ Javascript vào DOM HTML.
Ví dụ dưới đây sẽ tạo ra một phần tử đoạn văn p sau đó chèn nó vào phần tử div đang có sẵn trong DOM HTML
Xóa phần tử HTMLĐể loại bỏ phần tử HTML, bạn chọn phần tử cha rồi sử dụng phương thức
Ví dụ trên sẽ xóa bỏ phần tử đoạn văn thứ nhất Bạn có thể sử dụng thủ thuật lấy thuộc tính
Thay thế phần tử HTMLĐể thay thể một phần tử bằng một phần tử
khác dùng cú pháp
Tạm kếtNhư vậy chúng ta đã cùng nhau tìm hiểu các khái niệm cơ bản về DOM và cách thao tác DOM. Mặc dù đó chỉ là những kiến thức bề mặt, nhưng bạn cũng có thể thấy DOM quan trọng và lợi hại như thế nào. Nếu các bạn thấy bài viết hữu ích hãy rate 5* và share cho mọi người tham khảo! Hãy để lại comment để mình có thể hoàn thiện bản thân hơn trong tương lai. Cám ơn các bạn! |