Hôm trước có một số bạn hỏi mình về JS và có nhờ mình đưua chút tư liệu và chút hướng đi trong việc tìm hiểu nó.

Với phương châm của mình thì gốc gác vấn đề là trọng tâm nay mình xin gửi bài viết nhỏ đầu tiên nói về những điều cơ bản của DOM - Document Object Model. Bài viết có sự tổng hợp của nhiều nguồn khác nhau( thachpham.com, w3school... )  nên đôi lúc một số câu trùng lắp. Và kiến thức bản thân mình còn yếu nên có lẽ đâu đó một số thứ mình nghiệm ra chưa hẳn đúng, hi vọng nhận được góp ý Smile

Đối với lập trình web, kiến thức về DOM và khả năng thao tác DOM thành thạo là hai yếu tố quan trọng nhất. Đơn giản là vì DOM cho bạn sức mạnh thay đổi mọi thứ của trang web, khi mà mọi nội dung đều có thể được thêm bớt xóa sửa để mang lại trải nghiệm và nội dung tốt nhất. 

À lưu ý nhé, cái này trước khi đọc nên tìm hiểu một số cú pháp cơ bản của Js và html để có thể thực hành luôn càng tốt. 

Định Nghĩa DOM 

Mô hình Đối tượng Tài liệu là một giao diện lập trình độc lập nền tảng và độc lập ngôn ngữ. Nó cho phép các chương trình, các mã lập trình truy xuất động và cập nhật nội dung, cấu trúc cũng như định dạng của tài liệu.

DOM là tên gọi tắt của (Document Object Model – tạm dịch Mô hình Đối tượng Tài liệu), là một chuẩn được định nghĩa bởi W3C dùng để truy xuất và thao tác trên các tài liệu có cấu trúc dạng HTML hay XML bằng các ngôn ngữ lập trình thông dịch (scripting language) như Javascript, PHP, Python.


Cây cấu trúc DOM


Nút


Đối với HTML DOM, 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ấu trúc dạng cây gọi là DOM Tree. 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).


  • Nút gốc: chính là tài liệu HTML, thường được biểu diễn bởi thẻ <html>.
  • Nút phần tử: biểu diễn cho 1 phần tử HTML.
  • Nút văn bản: mỗi đoạn kí tự trong tài liệu HTML, bên trong 1 thẻ HTML đều là 1 nút văn bản. Đó có thể là tên trang web trong thẻ <title>, tên đề mục trong thẻ

    , hay một đoạn văn trong thẻ

    .


Ngoài ra còn có nút thuộc tính (attribute node) và nút chú thích (comment node).


Quan hệ giữa các nút


  • Nút gốc (document) luôn là nút đầu tiên.
  • Tất cả các nút không phải là nút gốc đều chỉ có 1 nút cha (parent).
  • Một nút có thể có một hoặc nhiều con, nhưng cũng có thể không có con nào.
  • Những nút có cùng nút cha được gọi là các nút anh em (siblings).

Trong các nút anh em, nút đầu tiên được gọi là con cả (firstChild) và nút cuối cùng là con út (lastChild).


Thao tác với DOM


Việ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.


Khoan đã nhé. Dừng ở đây lại. Mình đang thắc mắc DOM có phải là một cái cây không nhỉ và nó đọc từ trên xuống đúng không. 

Ai trả lời giúp mình câu hỏi này đi. Bài viết sẽ được tiếp tục :D