Sức mạnh của DOM trong một website

CHUYỆN NGHỀNo Comments

You Are Here:Sức mạnh của DOM trong một website

Đố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.Trước khi đi vào tìm hiểu về DOM, bạn cần có khái niệm về HTML/CSS, cũng như những kiến thức cơ bản về Javascript.

1. DOM là gì ?

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.

Ngoài ra, DOM giúp thao tác dữ liệu theo mô hình hướng đối tượng. Các phần tử bên trong 1 tài liệu có cấu trúc được định nghĩa thành các đối tượngphương thức và thuộc tính để có thể truy xuất dễ dàng mà vẫn đảm bảo tính cấu trúc: mỗi phần tử là một đối tượng, sở hữu các thuộc tính và các phương thức để làm việc với các thuộc tính đó như thêm, xóa, sửa, cập nhật. Bên cạnh đó, bạn cũng có thể thêm bớt các phần tử tùy thích, giúp cho nội dung và cấu trúc của trang web luôn cập nhật động.

Hmm hơi khó hiểu nhỉ .Hiểu đơn giản thì DOM chính là những phần tử biểu diễn cấu trúc dữ liệu của một trang web. Hãy xem xét một ví dụ đơn giản sau:

Đây là cấu trúc đơn giản của một trang web.

Ở đây, mỗi hình vuông cùng với nội dung bên trong nó chính là DOM.

 

 

 

 

Webpage = DOM + Javascript

Đây không hẳn là công thức tuyệt đối, vì ngoài Javascript, ta có thể tương tác với DOM bằng PHP, Python… Tuy nhiên, Javascript đã theo suốt lịch sử phát triển của DOM, nên sử dụng DOM Javascript để bắt đầu phát triển web là một lựa chọn tốt.

2. CÂY CẤU TRÚC DOM

2.1 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ẻ <h1>, hay một đoạn văn trong thẻ <p>.
  • Ngoài ra còn có nút thuộc tính (attribute node) và nút chú thích (comment node).

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

OK, chúng ta cùng nhìn lại 1 chút về cấu trúc của một webiste:

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

Ở hình vẽ trên chúng ta có thể thấy :

  • Nút gốc là <html>
  • 2 nút anh em <head> và <body> là anh em vì đều là nút con của <html>.
  • Nút <body> có 2 con trong đó <a> là con cả và <h1> là con út.

3. Cách sử dụng DOM

3.1 Thao tác với DOM

Vd: Tôi muốn lấy địa chỉ hiện tại của website <script> var myDomain = document.domain; </script>

Vd: Tôi muốn lấy 1 Selector bằng Id <script> var myDomain = document.getElementById("intro"); </script>

Vd: Tôi muốn lấy 1 Selector bằng Tag name <script> var myDomain = document. getElementsByTagName ("p"); </script>

Với HTML DOM chúng ta cũng có thể xử lý các sự kiện trên website như:

  • Khi người dùng clicks vào mouse
  • Khi website được tải
  • Khi hình ảnh được tải
  • Khi mouse di chuyển trên các thẻ
  • Khi các input được thay đổi
  • Khi HTML form được submitted
  • Khi gõ các phím

Vd: Tôi muốn thay đổi nội dung khi click vào thẻ h1 <h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>

3.2 Truy xuất DOM

3.2.1 Truy xuất gián tiếp

Thao tác truy xuất các nút gián tiếp theo vị trí trên DOM còn được gọi là duyệt DOM. Mỗi nút trên DOM đều có 6 thuộc tính quan hệ để giúp bạn truy xuất gián tiếp theo vị trí của node:

  • Node.parentNode: Tham chiếu đến node cha hiện tại, và node cha này là duy nhất cho mỗi node. Do đó nếu bạn muốn tìm nguồn gốc sâu xa của một node, bạn phải nối thuộc tính nhiều lần. Ví dụ: – Node.parentNode.parentNOde
  • Node.childNodes: Tham chiếu đến các node con trực tiếp của node hiện tại, và kết quả là một mảng các đối tượng. Lưu ý rằng, các node con không bị phân biệt bởi loại node, nên kết quả trả về có thể bao gồm nhiều loại node khác nhau.
  • Node.firstChild: Tham chiếu đến node con đầu tiên của node hiện tại, tương đương với việc gọi Node.childNode[0]
  • Node.lastChild: Tham chiếu đến node con cuối cùng của node hiện tại. Tương đương với việc gọi Node.childNodes[Element.childNodes.length – 1] Node.nextSibling: Tham chiếu đến node anh em nằm liền kề sau với node hiện tại.
  • Node.previousSibling: Tham chiếu đến node anh em nằm liền kề node hiện tại

Xem hình dưới để nắm rõ hơn:

3.2.2 Truy xuất trực tiếp

Truy xuất trực tiếp sẽ nhanh hơn, và đơn giản hơn khi bạn không cần phải biết nhiều về quan hệ và vị trí của nút. Có 3 phương thức dùng để truy suất trực tiếp được hỗ trợ bởi mọi trình duyệt

  • document.getElementById(‘id_cần_tìm’)
  • document.getElementByTagName(‘div’)
  • document.getElementByName(‘tên_cần_tìm’)

4.Công cụ hỗ trợ

Khi làm việc với DOM, bạn không cần tìm kiếm công cụ nào khác. Bất cứ khi nào bạn muốn, hãy cứ bấm phím F12 ở trình duyệt của bạn. Thật vậy, không công cụ nào tốt và hiểu DOM bằng chính trình duyệt của bạn cả. Các trình duyệt đã trải qua nhiều năm phát triển, từ lúc DOM chưa được đặt ra chuẩn chung và mạnh ai nấy tạo ra phiên bản DOM cho riêng mình. Khi W3C DOM ra đời, trình duyệt đã cải tiến rất nhiều và bổ sung công cụ Debugger mạnh mẽ để làm việc với DOM cũng như HTML/CSS/Javascript. Bạn có thể dễ dàng sử dụng các công cụ này khi bấm phím F12 hoặc nhấp phải chuột vào 1 điểm trên trang web và chọn Inspect element(Kiểm tra phần tử).

5. Lời kết

Như vậy chúng ta đã cùng nhau tìm hiểu các khái niệm cơ bản về DOM và cách thao tác DOM. Mặc dù đó chỉ là những kiến thức bề mặt, nhưng bạn cũng có thể thấy DOM quan trọng và lợi hại như thế nào. Kiến thức về DOM cũng giúp bạn rất nhiều nếu bạn muốn học Reactjs hay Vuejs.

Tham khảo tại : Viblo , thachpham.com.

 

 

About the author:

Top