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

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.

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?

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.

- 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ấ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ể: 

+ 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.

- 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 đó.

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

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,...

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. 

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

+ 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.