TÌM HIỂU DOM TRONG JAVASCRIPT

DOM là yếu tố quan trọng nhất trong lập trình web. Đơn giản là vì DOM cho bạn sức mạnh thay đổi mọi thứ của trang web như thêm, xóa, sửa toàn bộ nội dung cũng như hiển thị mà khách hàng nhìn thấy trên màn hình để mang lại trải nghiệm tốt nhất.

ĐỊNH NGHĨA DOM

DOM (Document Object Model –  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….

DOM coi các phần tử khai báo trong tài liệu thành các đối tượng (object), phương thức (property) và thuộc tính (attribute) để 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.

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.

CÂY CẤU TRÚC DOM

Các nút trong DOM

Đố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).

  • Root Element: Nút gốc – chính là khai báo nội dung tài liệu HTML, thường được biểu diễn bởi thẻ <html>.
  • Element: Nút phần tử – biểu diễn cho 1 phần tử trong tài liệu HTML. ví dụ: head, body, a, h1, p,….
  • Text: Nút văn bản –  là đoạn kí tự trong tài liệu HTML, bên giữa 1 cặp thẻ HTML (thẻ đóng và thẻ mở) đều là 1 nút văn bản. Đó có thể là tên trang web trong cặp thẻ <title> </title>, Văn bản trong cặp thẻ <h1></h1>, hay một đoạn văn trong cặp thẻ <p></p>.
  • Attribute: Nút thuộc tính – là thuộc tính của các thẻ trong tài liệu html. ví dụ: nút thuộc tính của thẻ a là: href, title, class,…
  • Comment: Nút chú thích – là các đoạn chú thích trong tài liệu HTML

Quan hệ nút trong DOM

  • Root Element: luôn là nút xuất hiện đầu tiên trong tài liệu. Ở trong 1 tài liệu HTML thì chính là thẻ <html>.
  • Tất cả các nút khác không phải là root document thì đều chỉ có duy nhất 1 nút cha (parent).
  • Một nút có thể có: một nút con, nhiều nút con hoặc không có con nào.
  • Nút cùng 1 nút cha được gọi là các nút anh em (siblings). ví dụ: head và body là nút anh em và có cùng 1 chat là nút html.
  • Trong các nút anh em( siblings) thì nút đầu tiên được gọi là firstChild và nút cuối cùng là lastChild.

Ta hãy cùng xem ví dụ cây cấu trúc DOM bên dưới:

  • 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ó 3 con, trong đó <h1> là con cả và thẻ <p> thứ 2 là con út.
  • Nút phần tử <a> có 2 con, trong đó có 1 nút văn bản và 1 nút thuộc tính.

 

CÁC THAO TÁC THÔNG DỤNG VỚI DOM

Thông qua thao tác với DOM bạn có thể thay đổi hiển thị cũng như nội dung bằng việc thêm, xóa, sửa các thành phần trong tài liệu.

Thuộc tính và phương thức thường gặp

Bạn có thể xem danh sách đầy đủ ở W3Schools.

Thuộc tính Ý nghĩa
id Định danh – là duy nhất cho mỗi phần tử nên thường được dùng để truy xuất DOM trực tiếp và nhanh chóng.
className Tên lớp – Cũng dùng để truy xuất trực tiếp như id, nhưng 1 className có thể dùng cho nhiều phần tử.
tagName Tên thẻ HTML.
innerHTML Trả về mã HTML bên trong phần tử hiện tại. Đoạn mã HTML này là chuỗi kí tự chứa tất cả phần tử bên trong, bao gồm các nút phần tử và nút văn bản.
outerHTML Trả về mã HTML của phần tử hiện tại. Nói cách khác, outerHTML = tagName + innerHTML.
textContent Trả về 1 chuỗi kí tự chứa nội dung của tất cả nút văn bản bên trong phần tử hiện tại.
attributes Tập các thuộc tính như id, name, class, href, title…
style Tập các thiết lập định dạng của phần tử hiện tại.
value Lấy giá trị của thành phần được chọn thành một biến.
Phương thức Ý nghĩa
getElementById(id) Tham chiếu đến 1 nút duy nhất có thuộc tính id giống với id cần tìm.
getElementsByTagName(tagname) Tham chiếu đến tất cả các nút có thuộc tính tagName giống với tên thẻ cần tìm, hay hiểu đơn giản hơn là tìm tất cả các phần tử DOM mang thẻ HTML cùng loại. Nếu muốn truy xuất đến toàn bộ thẻ trong tài liệu HTML thì hãy sử dụng document.getElementsByTagName('*').
getElementsByName(name) Tham chiếu đến tất cả các nút có thuộc tính name cần tìm.
getAttribute(attributeName) Lấy giá trị của thuộc tính.
setAttribute(attributeName, value) Sửa giá trị của thuộc tính.
appendChild(node) Thêm 1 nút con vào nút hiện tại.
removeChild(node) Xóa 1 nút con khỏi nút hiện tại.

Mặt khác, các phần tử DOM đều là các nút trên cây cấu trúc DOM. Chúng sở hữu thêm các thuộc tính quan hệ để biểu diễn sự phụ thuộc giữa các nút với nhau. Nhờ các thuộc tính quan hệ này, chúng ta có thể truy xuất DOM gián tiếp dựa trên quan hệ và vị trí của các phần tử.

Thuộc tính quan hệ Ý nghĩa
parentNode Nút cha
childNodes Các nút con
firstChild Nút con đầu tiên
lastChild Nút con cuối cùng
nextSibling Nút anh em liền kề sau
previousSibling Nút anh em liền kề trước

Truy xuất DOM

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

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 để bạn truy xuất trực tiếp được hỗ trợ ở mọi trình duyệt:

  • document.getElementById('id_cần_tìm')
  • document.getElementsByTagName('div')
  • document.getElementsByName('tên_cần_tìm')

Các trình duyệt hiện đại sau này (IE8+) có hỗ trợ thêm các phương thức truy xuất mạnh mẽ và linh hoạt hơn nhiều, thậm chí hỗ trợ truy xuất theo vùng chọn CSS phức tạp như vùng chọn jQuery (một thư viện Javascript mạnh và đáng dùng để tối ưu hóa hiệu quả công việc cũng như tiết kiệm thời gian).

  • document.querySelector('#id p.class'): truy xuất đến vùng chọn và trả về kết quả tham chiếu đầu tiên.
  • document.querySelectorAll('#id p[class^=test]'): tương tự querySelector nhưng trả về mảng các tham chiếu.
  • document.getElementsByName('class1 class2'): tham chiếu đến tất cả các nút có thuộc tính className chứa tất cả các tên lớp cần tìm.

Tạo thêm hoặc di chuyển DOM với appendChild

Như bạn đã biết, mọi nút trên cây cấu trúc DOM đều bắt nguồn sâu xa từ nút gốc và bắt buộc phải có 1 nút cha. Do đó, về bản chất, khi 1 DOM mới được tạo ra, nó cô đơn 1 mình và không thể sử dụng được như các phần tử DOM thông thường. Chỉ sau khi bạn tìm 1 nút khác trên cây DOM để làm cha đứa bé (sử dụng nút_cha.appendChild(nút_con)) thì quá trình tạo thêm DOM hoàn tất. Nếu bạn đã sẵn sàng để tạo vài em bé thì hãy cùng nhau tạo vài nút mới với 2 phương thức sau:

  • document.createElement(tên_thẻ_html): tạo 1 nút phần tử từ nút gốc.
  • document.createTextNode(chuỗi_kí_tự): tạo 1 nút văn bản từ nút gốc.

Một lưu ý khi tạo thêm DOM: nút mới được tạo sẽ vẫn có các thuộc tính và phương thức như 1 nút DOM thực thụ. Tuy nhiên, các thuộc tính của nút mới sẽ ở trạng thái rỗng hoặc mặc định, nên bạn sẽ phải thiết lập thêm các thuộc tính cần thiết.

var babyDom = document.createElement('div');
babyDom.id = 'Whatsapp';
babyDom.class = 'OTP-Messenger';
 
var fatherDom = document.getElementById('Facebook');
// Facebook tậu ứng dụng nhắn tin Whatsapp
fatherDom.appendChild(babyDom);

Phương thức appendChild còn được sử dụng để tổ chức “tái định cư” cho các nút DOM. Nếu như 1 nút DOM đang có 1 nút cha, nhưng lại được 1 nút cha khác “nhận nuôi” thông qua appendChild thì nó sẽ cắt đút quan hệ với nút cha cũ để về bên gia đình mới.

var child = document.getElementById('Motorola');
var oldFather = document.getElementById('Google');
// Google mua Motorola
oldFather.appendChild(child);

var newFather = document.getElementById('Lenovo');
// Lenovo mua lại Motorola
fatherDom.appendChild(child);

Loại bỏ DOM với removeChild

Khi loại bỏ DOM, nút cha sẽ sử dụng phương thức removeChild() để từ mặt 1 hoặc nhiều nút con.

// Cách 1: Loại bỏ 1 nút con khi biết nút cha và nút con
var google = document.getElementById('Google');
var motorola = document.getElementById('Motorola');
google.removeChild(motorola);

// Cách 2: Loại bỏ 1 nút con khi chỉ biết nút con
var whatsapp = document.getElementById('Whatsapp');
if (whatsapp.parentNode) {
whatsapp.parentNode.removeChild(whatsapp);
}

// Cách 3: Loại bỏ toàn bộ nút con
var body = document.getElementsByTagName('body')[0];
while (body.firstChild) {
body.removeChild(body.firstChild);
}

DOM EVENT

Sự kiện và các hàm xử lý sự kiện DOM là một phần quan trọng của Javascript. Sự kiện sẽ xảy ra khi có sự tương tác từ người dùng (như sự kiện onclick khi người dùng nhấn chuột , onmousemove khi chuột di chuyển..) hoặc từ chính trang web (sự kiện onload khi một phần tử DOM nào đó đã được tải xong hay khi cửa sổ bị thay đổi kích thước). Bạn có thể tham khảo thêm danh sách sự kiện rút gọn ở W3Schools hoặc danh sách đầy đủ của Mozilla.

Sử dụng sự kiện và hàm xử lý sự kiện

Cách 1: Chèn trực tiếp vào thẻ HTML
<!DOCTYPE html>
<html>

<head>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0Afunction%20buttonClick(url)%20%7B%0Awindow.location%20%3D%20url%3B%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</head>

<body>
<!-- Gán hàm buttonClick() để theo dõi sự kiện onclick. Khi người dùng nhấn vào 1 trong 2 nút bên dưới, sự kiện onclick sẽ xảy ra. Hàm buttonClick() được gọi và nhận tham số là 1 đường dẫn. --><button onclick="buttonClick('https://webvietnam.org')">Visit webvietnam.org</button> <button onclick="buttonClick('http://www.fb.com')">Visit Facebook</button> </body>

</html>

Cách này nhanh chóng và dễ sử dụng với hầu hết lập trình viên, nhưng sẽ phức tạp hóa code, không tiện khi xây dựng các ứng dụng lớn. Do đó, mình khuyến khích bạn nên sử dụng 2 cách bên dưới hơn.

Cách 2: Chèn vào thuộc tính sự kiện của DOM
<!DOCTYPE html>
<html>

<head>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0Afunction%20xulySuKien()%20%7B%0A%20var%20button1%20%3D%20document.getElementById('button1')%3B%0A%20var%20button2%20%3D%20document.getElementById('button2')%3B%0A%20button1.url%20%3D%20%22https%3A%2F%2Fwebvietnam.org%22%3B%0A%20button2.url%20%3D%20%22http%3A%2F%2Fwww.fb.com%22%3B%20%2F*%20T%C6%B0%C6%A1ng%20t%E1%BB%B1%20c%C3%A1ch%201%20g%C3%A1n%20h%C3%A0m%20buttonClick()%20cho%20s%E1%BB%B1%20ki%E1%BB%87n%20onclick%2C%20nh%C6%B0ng%20s%E1%BB%AD%20d%E1%BB%A5ng%20thu%E1%BB%99c%20t%C3%ADnh%20.onclick%20*%2F%0A%20button1.onclick%20%3D%20buttonClick%3B%0A%20button2.onclick%20%3D%20buttonClick%3B%0A%0A%20function%20buttonClick()%20%7B%0A%20%20window.location%20%3D%20this.url%3B%0A%20%7D%0A%7D%0Awindow.onload%20%3D%20xulySuKien%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</head>

<body> <button id="button1">Visit webvietnam.org</button> <button id="button2">Visit Facebook</button> </body>

</html>

Lưu ý là, sau khi toàn bộ các phần tử DOM đã được xử lý thì sự kiện onload sẽ xảy ra, dẫn đến việc gọi hàm xulySuKien().

Cách 3: Dùng phương thức addEventListener()
<!DOCTYPE html>
<html>

<head>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0Afunction%20xulySuKien()%20%7B%0Avar%20button1%20%3D%20document.getElementById('button1')%3B%0Avar%20button2%20%3D%20document.getElementById('button2')%3B%0Abutton1.url%20%3D%20%22https%3A%2F%2Fwebvietnam.org%22%3B%0Abutton2.url%20%3D%20%22http%3A%2F%2Fwww.fb.com%22%3B%20%2F*%20G%C3%A1n%20h%C3%A0m%20buttonClick()%20cho%20s%E1%BB%B1%20ki%E1%BB%87n%20click%20b%E1%BA%B1ng%20ph%C6%B0%C6%A1ng%20th%E1%BB%A9c%20addEventListener()%20*%2F%0Abutton1.addEventListener('click'%2C%20buttonClick%2C%20false)%3B%0Abutton2.addEventListener('click'%2C%20buttonClick%2C%20false)%3B%0A%0Afunction%20buttonClick()%20%7B%0Awindow.location%20%3D%20this.url%3B%0A%7D%0A%7D%0Awindow.onload%20%3D%20xulySuKien%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</head>

<body> <button id="button1">Visit webvietnam.org</button> <button id="button2">Visit Facebook</button> </body>

</html>

Phương thức addEventListener() đang được sử dụng rộng rãi cho các trình duyệt hiện đại từ sau 2012 (IE9+, từ IE8 trở về trước sử dụng phương thức attachEvent()). Nếu bạn quan tâm đến chất lượng code, hoặc muốn xây dựng theo mô hình hướng đối tượng (OOP) thì nên sử dụng cách này.

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

Nguồn: https://thachpham.com/web-development/javascript/dom-trong-javascript-can-ban.html
Rate this post
Theo dõi
Thông báo của
guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận
0
Rất thích suy nghĩ của bạn, hãy bình luận.x