Quay lại

DOM là gì? Những thông tin cơ bản về DOM bạn cần biết

Tác giả: Phương Anh Nguyễn - 05/10/2020

Nếu bạn đã biết đến Javascript, HTML,...thì DOM có lẽ là thuật ngữ không còn quá xa lạ với các bạn. Thế nhưng với rất nhiều người DOM thực sự là một từ mới đối với họ. Vậy DOM là gì? Ứng dụng của DOM trong công nghệ thông tin ra sao? Cùng tìm hiểu về DOM qua bài viết dưới đây nhé!

Việc làm IT phần mềm

1. Trả lời câu hỏi “DOM là gì?”

Thuật ngữ DOM được hiểu là một mô hình gồm các đối tượng khác nhau trong bộ tài liệu HTML. Đây là thuật ngữ viết tắt của cụm từ tiếng Anh “Document Object Model”. 

Thực tế, DOM được hiểu là một giao diện được sử dụng trong việc lập trình các ứng dụng hay được biết đến là một API dành cho những loại văn bản, tài liệu HTML và XML. Nhiệm vụ chính của DOM chính là quy định các cấu trúc của những loại văn bản này. Thông qua đó giúp các lập trình viên có thể dễ dàng quản lý hơn rất nhiều.

DOM là gì?
DOM là gì?

Giải thích một cách đơn giản thì trong mỗi văn bản HTML thì sẽ bao gồm những thuộc tính khác nhau và có sự phân cấp một cách khá rõ ràng, sự phân cấp này có thể hiểu như mối quan hệ cha và con, được thể hiện dưới dạng của những văn bản HTML khác. Những thuộc tính và sự phân cấp này diễn ra trong HTML có thể gọi là selector. Và bộ phận có nhiệm vụ, trách nhiệm chính xử lý các vấn đề liên quan như đổi thuộc tính, định dạng cấu trúc hay bất kỳ việc gì khác thì sẽ do chính DOM đảm nhận.

Minh chứng rõ ràng nhất chính là việc trong một cấu trúc cụ thể thì hầu hết document sẽ có nhiệm vụ quản lý tất cả các thẻ HTML. Ở dưới thẻ HTML sẽ là sự phân nhánh của các tài liệu khác gồm nhánh body và head. Trong nhưng nhánh này lại có những nhánh nhỏ khác. Điều này cho thấy rằng với Javascript thì nếu như muốn thực hiện được các thao tác liên quan đến thẻ HTML thì trước tiên chúng ta cần phải thực hiện các thao tác với document.

Tuyển lập trình viên Javascript

2. Chức năng và sự phân cấp của DOM như thế nào?

Trong Javascript thì DOM có chức năng như thế nào và việc phân chia các cấp độ của mô hình này ra sao?

Chức năng và cấp độ của DOM
Chức năng và cấp độ của DOM

2.1. Chức năng của DOM trong Javascript

Việc sử dụng DOM là điều rất cần thiết với các lập trình viên hiện nay. Thông qua mô hình này, lập trình viên có thể tạo ra được nhiều điều hơn thế với các tài liệu HTML trong Javascript.

- Có thể thực hiện việc thay đổi tất cả các phần tử của thẻ HTML có ở trong trang.

- Có thể thực hiện việc thay đổi tất cả những thuộc tính của các thẻ HTML trong trang.

- Có thể thực hiện việc thay đổi tất cả các kiểu dáng, phong cách của CSS ở trong trang.

- Có thể thực hiện việc loại bỏ các thuộc tính và yếu tố HTML ở bên trong trang.

- Có thể thực hiện việc thêm mới các thuộc tính và những yếu tố HTML có trong trang.

Chức năng của DOM
Chức năng của DOM

- Có thể thực hiện và tạo ra các phản ứng với tất cả các sự thay đổi của HTML có ở bên trong trang. 

- Có thể thực hiện việc tạo ra các sự kiện mới của HTML ở trong trang.

Có thể nhận thấy, chức năng chính của DOM chính là việc sử dụng dùng để thực hiện việc truy xuất các văn bản, tài liệu dạng HTML, XML. Mô hình này sẽ được thể hiện ở dưới dạng cây cấu trúc các dữ liệu và thường tồn tại một cách độc lập với hệ điều hành. Vì vậy, các lập trình viên sẽ phải dựa theo các kỹ thuật lập trình cụ thể để thực hiện việc lập trình hướng các đối tượng cụ thể để mô tả các tài liệu, văn bản đó.

2.2. Các cấp độ của DOM trong Javascript 

Thực tế thì các mô hình, phiên bản của DOM được sắp xếp theo các cấp độ hay các bậc cụ thể. Tính tới thời điểm hiện tại thì hầu hết, trên các bản thiết kế chi tiết về kỹ thuật thì DOM hiện đang được đặt ở cấp độ 2. Tuy nhiên, với một vài bản thiết kế chi tiết cụ thể khác, với từng trường hợp riêng biệt thì việc khuyến khích sử dụng OM cấp độ 3 của World Wide Web Consortium hay viết tắt là W3C là điều cần thiết. 

Các cấp độ
Các cấp độ

- Cấp độ 0: 

Đây là cấp độ bao gồm mọi chi tiết về DOM được quy định bởi từng nhà phát triển riêng biệt tạo nên nó. Cấp độ này tồn tại trước khi DOM có cấp độ 1 được ra đời. Tuy nhiên, một điều cần lưu ý đó chính là cấp độ 0 là một bản mô tả kỹ thuật chi tiết chính thức nhất của W3C hơn là một sự tham khảo được sử dụng trước khi việc chuẩn hóa được diễn ra.

- Cấp độ 1:

Là cách dùng để thực hiện việc duyệt qua các tài liệu theo dạng cấu trúc cây của DOM, bao gồm các tài liệu, văn bản HTML và XML. Bên cạnh đó là việc thực hiện các thao tác liên quan đến phần nội dung như việc thêm vào các thành phần,... Trong trường hợp này thì những thành phần riêng của văn bản HTML cũng sẽ được thêm vào.

- Cấp độ 2:

Cấp độ này cho phép các nhiệm vụ thực hiện việc hỗ trợ không gian cho XML, các khung nhìn có chứa các bộ lọc và đặc biệt chính là các sự kiện của DOM.

- Cấp độ 3: 

Cấp độ 3 chính là cấp độ được tạo ra nhằm mục đích nâng cao các khả năng của DOM trong Javascript. Ở cấp độ này sẽ bao gồm có 6 bản mô tả kỹ thuật khác nhau được thể hiện một cách chi tiết và đầy đủ nhất. Cụ thể: 

3 cấp độ cơ bản
3 cấp độ cơ bản

+ DOM level 3 core

+ DOM level 3 load and save

+ DOM level 3 Xpath

+ DOM level 3 views and formatting 

+ DOM level 3 requirements

+ DOM level 3 validation

3. DOM có những thể loại nào trong Javascript?

Thực tế cho thấy, việc xử lý cũng như làm việc với các đối tượng của HTML thực sự rất phức tạp cũng như việc quá đa dạng. Vì vậy, việc cung cấp thiết thực nhất mà Javascript cần thực hiện chính là tạo ra các phương thức khác nhau để có thể đáp ứng được nhiệm vụ với từng đối tượng và thành phần riêng biệt.

Các thể loại DOM
Các thể loại DOM

- Loại DOM document: 

Đây là loại DOM có nhiệm vụ thực hiện lưu trữ tất cả các thành phần tài liệu của website.

- Loại DOM element:

DOM này có chức năng thực hiện nhiệm vụ liên quan đến việc truy xuất tới các thẻ HTML khác nhau. Điều này được thực hiện thông qua các thuộc tính bao gồm tên lớp, ID và tên của thẻ,...

- Loại DOM HTML:

Nhiệm vụ chính của loại DOM này chính là việc thay đổi các thuộc tính, nội dung hay giá trị của các thẻ HTML.

- Loại DOM CSS:

Dùng để thực hiện việc thay đổi các định dạng sẵn có của CSS trong các thẻ HTML.

- Loại DOM Event:

Thực hiện việc gắn các sự kiện cụ thể vào các loại thẻ HTML.

- Loại DOM Listener:

Thực hiện nhiệm vụ lắng nghe các sự kiện đã tác động lên các thẻ HTML đó.

8 loại
8 loại

- Loại DOM navigation:

Loại DOM này có nhiệm vụ chính là để quản lý và thực hiện các thao tác thể hiện được mối quan hệ cha - con giữa các thẻ HTML.

- Loại DOM node, nodelist:

Nhiệm vụ chính của loại DOM này trong Javascript chính là việc được sử dụng để thực hiện các thao tác cụ thể thông qua đối tượng Object.

Trên đây chính là 8 loại DOM cụ thể được các lập trình viên sử dụng trong Javascript sử dụng hiện nay để thực hiện các thao tác cụ thể. 

Việc làm IT phần mềm tại Hồ Chí Minh

4. Cây cấu trúc trong DOM được thể hiện ra sao?

Thông thường, trong DOM, các cấu trúc được thể hiện dưới dạng cây và được biểu hiện thông qua bởi các nút.

Cây cấu trúc trong dom
Cây cấu trúc trong dom

Trong HTML DOM thì cấu trúc dạng cây này được gọi là DOM tree, mỗi thành phần trong cấu trúc này sẽ được biểu hiện là một nút. Những thành phần hay phần tử khác nhau sẽ được biểu hiện bởi các loại nút khác nhau. Hiện tại, sẽ có 3 loại nút cơ bản được sử dụng là nút gốc, nút phần tử và loại nút văn bản.

- Nút gốc: Hay còn gọi là Document node. Đây là loại nút mà dạng thể hiện của nó sẽ là <html>, là một phần tử của thẻ HTML.

- Nút phần tử: Còn được biết đến qua cái tên là Element node. Dùng để biểu thị cho 2 phần tử HTML nào đó.

- Nút văn bản: Một tên gọi khác của nút này chính là Text node. Thực tế đó là mỗi một đoạn bất kỳ trong văn bản HTML nào đó hay ở bên trong của một thẻ HTML sẽ là một nút văn bản được hiển thị. Những nút văn bản này có thể là tên của một trang web, tên của một đề mục,...

Bên cạnh 3 nút trên thì còn có các nút khác được sử dụng để biểu thị trong cây cấu trúc của DOM. Tuy nhiên, các nút này thường ít và không được sử dụng một cách thường xuyên. Những nút đó có thể là nút thuộc tính - attribute node, nút chú thích - comment node,...

Mối quan hệ
Mối quan hệ

Vậy, trong một cây cấu trúc như vậy thì quan hệ giữa các nút sẽ được biểu hiện như thế nào? Mối quan hệ giữa các nút này có thể được thể diễn giải như sau:

Thông thường, nút gốc hay root node sẽ luôn là nút được xuất hiện đầu tiên. Tất cả những nút còn lại đều sẽ không phải là nút gốc và chỉ có 1 nút là nút cha duy nhất (còn gọi là nút parent).

Một nút ở trong cây cấu trúc có thể sẽ có các trường hợp xảy ra như có rất nhiều nút con khác nhau hoặc là không có bất kỳ một nút con nào. Và những nút anh em ấy sẽ có cùng một nút cha, nút anh em còn có thể gọi là siblings. Sibling đầu tiên sẽ được gọi là anh cả - first child và nút em út - last child thì sẽ là nút cuối cùng.

5. Những thuộc tính và phương thức cơ bản của DOM

DOM trong Javascript sẽ có những thuộc tính và phương thức thường gặp nào? Với DOM thì việc thực hiện truy xuất sẽ là điều thường gặp và dễ thấy nhất trong Javascript. Thông thường sẽ có 2 cách thực hiện việc truy xuất là truy xuất trực tiếp và truy xuất gián tiếp. 

Phương thức cơ bản
Phương thức cơ bản

- Thực hiện truy xuất trực tiếp:

Với truy xuất trực tiếp, việc diễn ra quá trình sẽ có tốc độ sẽ nhanh hơn, đơn giản hơn rất nhiều. Bởi khi thực hiện theo cách này bạn sẽ không phải hiểu biết quá nhiều hay quá kỹ về mối quan hệ hay vị trí giữa các nút. 

Ở cách thức này thì bạn sẽ có thể có 3 cách để thực hiện. 

- Thực hiện truy xuất gián tiếp:

Cách truy xuất gián tiếp này sẽ được thực hiện thông qua việc dựa trên các thuộc tính và vị trí của các nút ở trong cây cấu trúc của DOM. Ở đây, các nút sẽ có  thuộc tính cơ bản để hỗ trợ thực hiện các điều này. Bao gồm:

+ Thuộc tính Node.parentNode: Thực hiện việc tham chiếu đến tận nút cha của nút hiện tại. Đây là nút cha duy nhất, vì thế bạn cần xâu chuỗi để có thể tìm sâu xa được nguồn gốc ban đầu.

+ Thuộc tính Node.childNodes: Thực hiện việc tham chiếu đến các con của nút hiện tại. Kết quả nhận lại chính là 1 mảng gồm các đối tượng khác nhau, bởi vì các nút con không bị phân biệt về mặt đối tượng.

Trực tiếp và gián tiếp
Trực tiếp và gián tiếp

+ Thuộc tính Node.firstChild: Thực hiện việc tham chiếu đến nút con đầu tiên.

+ Thuộc tính Node.lastChild: Thực hiện việc tham chiếu đến nút con cuối cùng. 

+ Thuộc tính Node.nextsibling: Thực hiện việc tham chiếu đến nút anh em có vị trí nằm liền kề ngay sau nút trực tiếp.

+ Thuộc tính Node.previousSibling: Thực hiện việc tham chiếu đến nút anh em có vị trí nằm liền kề ngay trước nút trực tiếp.

Kiếm việc làm

Nhìn chung, DOM đón vai trò rất quan trọng hiện nay với các lập trình viên trong Javascript. Hy vọng rằng với những thông tin trên thì các bạn đã hiểu được DOM là gì cũng như các khái niệm cơ bản về các vấn đề liên quan tới đó. Qua đó, có thể tiếp nhận thêm nguồn tri thức cần thiết, bổ ích cho mình.

Angularjs là gì? Ưu - nhược điểm, một số lệnh cơ bản của framework

Đối với những người chuyên về IT, hay chuyên về tin học ứng dụng, thì có lẽ đã khá quen thuộc về thuật ngữ Angularjs, nhưng không phải ai cũng hiểu rõ về nó. Vậy nên, trong bài viết này sẽ giới thiệu cũng như đưa ra những câu trả lời đầy đủ nhất cho Angularjs là gì? Cùng tìm hiểu ngay sau đây nhé!

Angularjs là gì?

Chia sẻ:

Từ khóa liên quan

Chuyên mục

Bí quyết viết CV- Tâm sự Nghề nghiệp- Cẩm Nang Tìm Việc- Kỹ Năng Tuyển Dụng- Cẩm nang khởi nghiệp- Kinh nghiệm ứng tuyển việc làm- Kỹ năng ứng xử văn phòng- Quyền lợi người lao động- Bí quyết đào tạo nhân lực- Bí quyết lãnh đạo- Bí quyết làm việc hiệu quả- Bí quyết viết đơn xin nghỉ phép- Bí quyết viết thư xin thôi việc- Cách viết đơn xin việc- Bí quyết thành công trong công việc- Bí quyết tăng lương- Bí quyết tìm việc dành cho sinh viên- Kỹ năng đàm phán lương- Kỹ năng phỏng vấn- Kỹ năng quản trị doanh nghiệp- Kinh nghiệm tìm việc làm tại Hà Nội- Kinh nghiệm tìm việc làm tại Đà Nẵng- Mẹo viết hồ sơ xin việc- Mẹo viết thư xin việc- Chia sẻ kinh nghiệm ngành Kinh doanh - Bán hàng- Định hướng nghề nghiệp- Top việc làm hấp dẫn- Tư vấn nghề nghiệp lao động phổ thông- Tư vấn việc làm Hành chính văn phòng- Tư vấn việc làm ngành Báo chí- Tư vấn tìm việc làm thêm- Tư vấn việc làm ngành Bất động sản- Tư vấn việc làm ngành Công nghệ thông tin- Tư vấn việc làm ngành Du lịch- Tư vấn việc làm ngành Kế toán- Tư vấn việc làm ngành Kỹ thuật- Tư vấn việc làm ngành Sư phạm- Tư vấn việc làm ngành Luật- Tư vấn việc làm thẩm định- Tư vấn việc làm vị trí Content- Tư vấn việc làm ngành Nhà hàng - Khách sạn- Tư vấn việc làm quản lý- Kỹ năng văn phòng- Nghề truyền thống- Các vấn đề về lương- Tư vấn tìm việc làm thời vụ- Cách viết Sơ yếu lý lịch- Cách gửi hồ sơ xin việc- Biểu mẫu phục vụ công việc- Tin tức tổng hợp- Ý tưởng kinh doanh- Chia sẻ kinh nghiệm ngành Marketing- Kinh nghiệm tìm việc làm tại Bình Dương- Kinh nghiệm tìm việc làm tại Hồ Chí Minh- Mẹo viết Thư cảm ơn- Góc Công Sở- Câu chuyện nghề nghiệp- Hoạt động đoàn thể- Tư vấn việc làm Biên - Phiên dịch- Tư vấn việc làm Ngành Nhân Sự- Tư vấn việc làm Ngành Xuất Nhập Khẩu - Logistics- Tư vấn việc làm Ngành Tài Chính - Ngân Hàng- Tư vấn việc làm Ngành Xây Dựng- Tư vấn việc làm Ngành Thiết kế - Mỹ thuật- Tư vấn việc làm Ngành Vận tải - Lái xe- Quản trị nhân lực - Quản trị sản xuất- Cẩm nang kinh doanh- Tư vấn việc làm Ngành Thiết kế - Nội thất- Mô tả công việc ngành Kinh doanh- Mô tả công việc ngành Bán hàng- Mô tả công việc Tư vấn - Chăm sóc khách hàng- Mô tả công việc ngành Tài chính - Ngân hàng- Mô tả công việc ngành Kế toán - Kiểm toán- Mô tả công việc ngành Marketing - PR- Mô tả công việc ngành Nhân sự- Mô tả công việc ngành IT - Công nghệ thông tin- Mô tả công việc ngành Sản xuất- Mô tả công việc ngành Giao nhận - Vận tải- Mô tả công việc Kho vận - Vật tư- Mô tả công việc ngành Xuất nhập khẩu – Logistics- Mô tả công việc ngành Du lịch - Nhà hàng - Khách sạn- Mô tả công việc ngành Hàng không- Mô tả công việc ngành Xây dựng- Mô tả công việc ngành Y tế - Dược- Mô tả công việc Lao động phổ thông- Mô tả công việc ngành Kỹ thuật- Mô tả công việc Nhà nghiên cứu- Mô tả công việc ngành Cơ khí - Chế tạo- Mô tả công việc bộ phận Quản lý hành chính- Mô tả công việc Biên - Phiên dịch- Mô tả công việc ngành Thiết kế- Mô tả công việc ngành Báo chí - Truyền hình- Mô tả công việc ngành Nghệ thuật - Điện ảnh- Mô tả công việc ngành Spa – Làm đẹp – Thể lực- Mô tả công việc ngành Giáo dục - Đào tạo- Mô tả công việc Thực tập sinh - Intern- Mô tả công việc ngành Freelancer- Mô tả công việc Công chức - Viên chức- Mô tả công việc ngành Luật - Pháp lý- Tư vấn việc làm Chăm Sóc Khách Hàng - Tư vấn việc làm Vật Tư - Kho Vận- Hồ sơ doanh nhân- Việc làm theo phường- Danh sách các hoàng đế nổi tiếng- Tài liệu gia sư- Vĩ Nhân Thời Xưa- Chấm Công- Danh mục văn thư lưu trữ- Tài Sản Doanh Nghiệp- Xem thêm gợi ý Xem thêm gợi ý
Liên hệ qua zalo Liên hệ qua skype