DOM là gì?

JavaScript - JQuery    2020-09-02

DOM là chữ viết tắt của Document Object Model. Chúng ta sẽ tìm hiểu sơ bộ về DOM trong HTML.
Đây là một mô hình cấu trúc cây dùng quản lý các thành phần trong tài liệu HTML. Cấu trúc cây DOM rất đơn giản nếu bạn hình dung nó giống như 1 cái cây tre. Cây tre là gì thì lên rừng để hỏi nhé :D.
Trên 1 cái cây tre thì có gốc --> thân cây --> cành --> lá (chúng ta không nói chuyện mấy cái rễ cắm dưới đất nhé)

OK giờ nói chuyện DOM ngắn gọn một chút.
Trong trang html thì có thẻ gốc là <html>: tương ứng cái gốc cây
Trong thẻ html có các phần tử khác là: <head>, <body> ==> tương ứng với thân cây
Trong các head, body có các phần tử khác như form, p, div, style... ==> tương ứng với các cành
Trong các cành p, div, span... có các phần tử như <br> <hr>.... không chứa phần tử con ==> tương ứng các lá.

Các phần tử trong cây DOM được gọi là nốt (node). Các node này có quan hệ với nhau giống như trong gia đình gồm: cha, ông, anh, em, con, cháu...
Các node có cùng cha thì là anh em...
Các node không có con thì là node lá
Mỗi node là 1 đối tượng. Mà đối tượng có cái gì thì chỉ nói ngắn gọn là: có thuộc tính và phương thức.

Nghiên cứu DOM để làm gì? => Để chơi thôi!

Nếu bạn không chơi được với DOM thì bạn sẽ khó mà điều khiển tương tác được với trang web nhé.