Là một Nhà phát triển web mới bắt đầu, bạn sẽ nghe thấy nhiều thuật ngữ xung quanh và bạn có thể không chắc điều gì là quan trọng trong nghiên cứu của mình. Một trong những thuật ngữ mà bạn có thể đã nghe là DOM, đây là một khái niệm quan trọng để các Nhà phát triển web tìm hiểu. Trong thực tế, nó có thể là quan trọng nhất
Nhưng DOM đại diện cho cái gì?
Trong bài viết này và video bên dưới, chúng ta sẽ xem DOM là gì, nó trông như thế nào, nó được sử dụng như thế nào và tại sao bạn nên quan tâm
DOM là gì?
DOM là từ viết tắt của Mô hình đối tượng tài liệu. Đó là cách một trình duyệt web đại diện cho một trang web bên trong
DOM xác định nội dung nào sẽ có trên một trang và cách mỗi phần tử của nội dung liên quan đến các phần tử khác. Hãy nhìn vào từng từ của từ viết tắt
Tài liệu
Chúng ta có thể coi tài liệu là một cách để cấu trúc thông tin, bao gồm các bài báo, sách và bài báo khoa học. Đối với Nhà phát triển web, tài liệu là tên của trang web và họ coi DOM là mô hình cho tất cả nội dung trên trang web. DOM gọi công cụ này là các đối tượng
Mục tiêu
"Nội dung" trên các trang web là các đối tượng và đôi khi được gọi là phần tử hoặc nút. Dưới đây là một số đối tượng bạn có thể bắt gặp trên một trang web
- Nội dung. Các đối tượng rõ ràng nhất trên một trang web là nội dung. Chúng có thể bao gồm các từ, video, hình ảnh, v.v.
- Các nguyên tố cấu trúc. Chúng bao gồm div, vùng chứa và phần. Bạn có thể không nhìn thấy các phần tử này, nhưng bạn thấy cách chúng ảnh hưởng đến các phần tử hiển thị vì chúng tổ chức các phần tử đó trên trang web
- Thuộc tính. Mọi phần tử trên trang web đều có thuộc tính. Chúng bao gồm các lớp, kiểu và kích cỡ, ví dụ:. Đây là các đối tượng trong DOM, nhưng chúng không phải là các phần tử như phần tử nội dung và cấu trúc
Mô hình
Một mô hình là một đại diện của một cái gì đó và nó giúp chúng ta hiểu cách một cái gì đó được kết hợp với nhau. Có nhiều mô hình cho nhiều thứ cần được hiểu, phân tích và sử dụng phổ biến
Một ví dụ về một mô hình đang được sử dụng là hướng dẫn. Bản thiết kế, sơ đồ tầng và hướng dẫn của IKEA đều là những ví dụ về loại mô hình này. Chúng hiển thị đối tượng được mô hình hóa với đủ chi tiết để có thể tạo lại
Một ví dụ khác về mô hình là mô tả. Loại mô hình này được sử dụng để đơn giản hóa các ý tưởng lớn hoặc các hệ thống phức tạp để chúng có thể hiểu dễ dàng hơn. Những loại mô hình này giúp chúng ta hiểu những thứ như thiên hà của chúng ta
DOM là một mô hình cho các trang web. Nó hoạt động như một tập hợp các hướng dẫn cho trình duyệt web
DOM trông như thế nào?
DOM được biểu diễn dưới dạng một kiểu cấu trúc dữ liệu được gọi là cây. Mọi đối tượng trong DOM được phân cấp dưới một đối tượng khác và bất kỳ đối tượng nào cũng có thể có nhiều con nhưng chỉ có một cha
Mỗi đối tượng DOM “sở hữu” các phần tử con của nó. Nếu bạn xóa một đối tượng khỏi DOM, tất cả các phần tử con của nó cũng sẽ bị xóa cùng với nó
Bản thân DOM là kỹ thuật số, vì vậy nó thực sự không "trông" giống bất cứ thứ gì, nhưng nó có thể được biểu diễn theo một số cách khác nhau. Những biểu diễn này có thể giúp chúng ta hình dung DOM là gì
đồ thị cây
Một cách để biểu diễn DOM là biểu đồ hình cây. Biểu đồ cây hiển thị mối quan hệ giữa các đối tượng cha và con, với các đường giữa chúng biểu thị mối quan hệ của chúng
Lấy cây phả hệ làm ví dụ. Ở trên cùng, bạn sẽ có ông bà của bạn. Sau đó, bên dưới, bạn sẽ có cha mẹ và anh chị em của họ, tiếp theo là bạn, anh chị em của bạn và anh em họ của bạn
Tương tự, nút gốc — nút ở trên cùng của biểu đồ hình cây — của một trang web sẽ là phần tử HTML. Bên dưới, bạn sẽ có các yếu tố đầu và cơ thể. Bên dưới phần tử nội dung, bạn có thể tìm thấy các phần tử đầu trang, chính và chân trang. Bên dưới phần tử tiêu đề, bạn có thể tìm thấy các phần tử img, nav và h1
HTML
Cách phổ biến nhất để biểu diễn DOM là bằng HTML. Bạn có thể xem HTML của trang web bằng cách mở công cụ dành cho nhà phát triển trong trình duyệt của mình hoặc bằng cách nhấp chuột phải vào một phần tử và chọn “Kiểm tra phần tử”. Đây là một ví dụ về HTML
...
Example Site
...
...
...
Thoạt đầu, danh sách các thành phần này có thể không giống cấu trúc cây, nhưng mọi vết lõm trong trình kiểm tra trình duyệt hoặc trong ví dụ trên giống như một mức dọc trong biểu đồ cây
Các phần tử HTML bao bọc các phần tử khác là phần tử con của nó. Phần tử img là con của phần tử header, là con của phần tử body, là con của phần tử HTML
Mặc dù đây là cách phổ biến nhất để biểu diễn DOM, nhưng bản thân HTML không phải là DOM — nó chỉ đại diện cho nó
Mã nguồn
Có nhiều cách để tạo tài liệu hơn là sử dụng HTML. Bạn có thể sử dụng ngôn ngữ lập trình back-end như PHP để tạo HTML khi tải trang web. Bạn có thể sử dụng JavaScript để sửa đổi các thành phần trong trang web một cách linh hoạt. Hoặc, bạn có thể sử dụng khung giao diện người dùng như React để tạo các trang web hoàn chỉnh mà không cần viết bất kỳ HTML nào
Kết xuất trang web
Chúng tôi cũng có thể xem DOM trong trang web được hiển thị khi trình duyệt chuyển đổi nó thành thứ mà chúng tôi có thể thấy trong trình duyệt
Tóm lại, DOM là một tập hợp các hướng dẫn về cách xây dựng một trang web cụ thể. DOM cho trình duyệt biết cách hiển thị nội dung của trang web và chúng tôi có thể chỉnh sửa DOM thông qua mã nguồn
Là một thành phần quan trọng của quá trình phát triển web, bạn sẽ cần hiểu về DOM nếu muốn trở thành Kỹ sư Front-End, Kỹ sư Back-End hoặc Kỹ sư Full-Stack. Để tìm hiểu thêm về cách xây dựng trang web, hãy xem các khóa học của chúng tôi về phát triển web
Các khóa học & hướng dẫn về phát triển web. học viện mật mã
Phát triển web là thực hành phát triển các trang web và ứng dụng web sống trên internet. Cho dù bạn quan tâm đến front-end, back-end hay full-stack, các khóa học phát triển web của chúng tôi sẽ giúp bạn đạt được điều đó