DOM cơ bản dành cho nhà phát triển cơ bản là người mới sử dụng JavaScript

Tram Ho

—Document Object Model —

Mở bài

Ai cũng biết nhiệm vụ của Javascript là thao tác với các html nhắm mục đích tạo ra các thứ vi diệu mượt mắt tăng tính trải nghiệm người dùng . (màu mè)

Vậy làm thế nào để Javascript – 1 ngôn ngữ lập trình khác ( hay PHP, Python,… các ngôn ngữ thông dịch có thể thao tác với HTML). Phải có một cái gì làm cầu nối chứ.

Câu trả lời là thông qua cơ chế tên là DOM.

Vậy cơ chế DOM là như thế nào nhòoo?

DOM là một mô hình (Model) các đối tượng trong file html Document của trang web, các phần tư bên trong 1 document được định nghĩa thành các Object có phương thức và thuộc tính giúp truy xuất dễ dàng các ngóc ngách trong html Document. =>> Bummchiuu merge 3 keyword mình bôi đậm là ta có khái niệm Document Object Model.

DOM được diễn giải tương tự như 1 cây (tree):

  • 1 document có root ( là <html> ) hay còn gọi là nút gốc.
  • Có các nhánh phân cấp là các thẻ ( <head>, <body>, <a>,…) hay còn gọi là các nút phần tử.
  • Trong mỗi thẻ (mỗi nút phần tử) lại phân cấp:
    • Attribute ( là thuộc tính của thẻ) hay còn gọi là nút thuộc tính
    • Text (là nội dung văn bản trong thẻ) hay còn gọi là nút văn bản.
    • Các comment code được viết trong thẻ nào thì được tính là nút chút thích của thẻ ( nút phần tử đó). Nhìn hình cho dễ hiểu nhé.

Thuộc tính và phương thức của DOM

DOM về cơ bản là object mà là object thì sẽ có thuộc tính và phương thức thôi ( theo oop là vậy)

Các thuộc tính và phương thức của DOM thì bạn hãy đọc qua nó để biết nó có những gì và lưu lại doc khi nào cần thì tìm chứ trong phạm vi bài viết mình sẽ không liệt kê hết ra làm dài bài quá. https://www.w3schools.com/jsref/dom_obj_all.asp

Mục đích sử dụng DOM cũng như mục đích chính mà có sự ra đời của DOM như đã nói ở trên là để giúp ngôn ngữ lập trình thông dịch của chúng ta có thể truy xuất đến các phần tử HTML. Vậy truy xuất DOM như thế nào?

Sử dụng các phương thức DOM đã có sẵn để truy xuất các phần tử HTML( là các nút trong cây DOM). Các phương thức DOM có nhiệm vụ riêng biệt và được chia ra các nhóm sau cho dễ quản lý và sử dụng:

  • DOM document: có nhiệm vụ lưu trữ toàn bộ các thành phần trong tài liệu của website
  • DOM element: có nhiệm vụ truy xuất tới thẻ HTML nào đó thông qua các thuộc tính như tên class, id, name của thẻ HTML
  • DOM HTML: có nhiệm vụ thay đổi giá trị nội dung và giá trị thuộc tính của các thẻ HTML
  • DOM CSS: có nhiệm vụ thay đổi các định dạng CSS của thẻ HTML
  • DOM Event: có nhiệm vụ gán các sự kiện như onclick(), onload() vào các thẻ HTML
  • DOM Listener: có nhiệm vụ lắng nghe các sự kiện tác động lên thẻ HTML đó
  • DOM Navigation dùng để quản lý, thao tác với các thẻ HTML, thể hiện mối quan hệ cha – con của các thẻ HTML
  • DOM Node, Nodelist: có nhiệm vụ thao tác với HTML thông qua đối tượng (Object)

Virtual DOM

DOM thật DOM ảo. oh mannn DOM bình thường còn chưa kịp hiểu. Vậy như nào là DOM real DOM fake.

“Mai” mình sẽ tiếp tục..

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo