DOM là gì? DOM và JavaScript có mối quan hệ như thế nào?

JavaScrpit là 1 ngôn ngữ lập trình có nhiều chức năng, trong đấy bao gồm việc thao tác có những tài liệu HTML. Tuy nhiên, để JavaScript làm cho được điều này buộc phải thông qua 1 cơ chế gọi là DOM. Vậy DOM là gì? DOM và JavaScript có mối quan hệ như thế nào? Quý khách hãy cùng Tino Group tìm hiểu chi tiết qua bài biết dưới đây nhé!

DOM là gì?

Định nghĩa DOM

DOM là viết tắt của Doc Object Mannequin, tạm dịch: Mô hình Đối tượng Tài liệu, đây là 1 là 1 API lập trình cho những tài liệu HTML và XML. DOM xác định cấu trúc logic của những tài liệu và bí quyết 1 tài liệu được truy cập và thao tác.

Sở hữu DOM, những lập trình viên được phép tạo và xây dựng tài liệu, điều hướng cấu trúc của chúng, đồng thời có thể thêm, sửa đổi hoặc xóa những phần tử và nội dung. Hiểu đơn giản, bất kỳ thứ gì được tìm thấy trong tài liệu HTML hoặc XML đều có thể được truy cập, thay đổi, xóa hoặc thêm bằng bí quyết dùng DOM.

Trang internet là 1 loại tài liệu. Tài liệu này có thể được hiển thị trong cửa sổ trình thông qua hoặc dưới dạng nguồn HTML. DOM là 1 đại diện hướng đối tượng của trang internet, có thể được sửa đổi bằng ngôn ngữ lập trình như JavaScript.

Những tiêu chuẩn DOM W3C và WHATWG DOM được triển khai trong gần như những trình thông qua tiên tiến.

DOM và JavaScript

Mối quan hệ giữa DOM và JavaScript

DOM ko buộc phải là 1 ngôn ngữ lập trình, nhưng trường hợp ko có API này, ngôn ngữ JavaScript sẽ ko có bất kỳ mô hình hoặc khái niệm nào về những trang internet, tài liệu HTML, tài liệu XML và những phần thành phần của chúng (dí dụ: những phần tử). Mọi phần tử trong tài liệu là 1 phần của DOM cho tài liệu đấy, vì vậy đa số chúng đều có thể được truy cập và thao tác bằng bí quyết dùng DOM và 1 ngôn ngữ như JavaScript.

Xem Thêm  Thông tin chi tiết về dự án DIA & DIA Coin

Sở hữu DOM, JavaScript sẽ mô tả được đa số những tính năng cần thiết để tạo ra HTML động như:

  • Có thể thay đổi gần như những phần tử HTML và thuộc tính của chúng trong trang
  • Có thể thay đổi đa số những fashion CSS trong trang
  • Có thể loại bỏ những khía cạnh HTML cũng như thuộc tính của chúng ở hiện tại
  • Có thể phản ứng có đa số những sự kiện HTML hiện có trong trang và đồng thời tạo ra những sự kiện HTML mới

Những loại DOM nào có trong JavaScript?

Việc JavaScript xử lý và làm cho việc có những phần tử HTML tương đối phức tạp và đa dạng. Do đấy, xét về tính chất, DOM được chia làm cho 8 loại khác nhau gồm:

  • DOM doc: có vai trò lưu trữ đa số những thành phần trong tài liệu của trang internet
  • DOM aspect: có nhiệm vụ truy xuất tới thẻ HTML bất kỳ thông qua những thuộc tính như tên class, id, title của thẻ HTML
  • DOM HTML: có chức năng thay đổi giá trị nội dung và giá trị thuộc tính của những thẻ HTML
  • DOM CSS: có nhiệm vụ thay đổi những định dạng CSS trong thẻ HTML
  • DOM Occasion: dùng để gán những sự kiện như onclick(), onload() vào những thẻ HTML
  • DOM Listener: có chức năng xác định và theo dõi những sự kiện tác động lên thẻ HTML đấy
  • DOM Navigation: dùng để quản lý và thao tác có những thẻ HTML.
  • DOM Node, Nodelist: có chức năng thao tác có HTML thông qua những đối tượng (Object)

Cấu trúc của DOM

Node

Trong DOM, mọi thành phần tượng trưng cho 1 nút (node) và được biểu diễn trên cùng 1 cây. Những phần tử khác nhau sẽ là 1 loại nút khác nhau, trong đấy 3 loại quan yếu nhất là: nút gốc (doc node), nút phần tử (aspect node), nút văn bản (textual content node).

  • Doc node: là tài liệu HTML và được biểu diễn bởi thẻ <html>.
  • Factor node: đại diện cho 1 phần tử HTML.
  • Textual content node: mỗi đoạn ký tự trong tài liệu HTML, bên trong 1 thẻ HTML đều được xem là 1 nút văn bản. Chúng có thể là tên trang internet trong thẻ <title>, tên đề mục trong thẻ <h1> hoặc 1 đoạn văn trong thẻ <p>.
Xem Thêm  BSCex là gì? AMA cùng đội ngũ dự án BSCex

Mối quan hệ giữa những nút

  • Nút gốc luôn là nút trước tiên và ở trên cùng trong sơ đồ cây.
  • Toàn bộ những nút khác ko buộc phải là nút gốc đều chỉ có 1 nút cha duy nhất
  • 1 nút có thể chứa 1 hoặc nhiều con bên dưới, nhưng cũng có thể ko có con nào.
  • Những nút được tạo ra từ cùng nút cha được gọi là những nút anh em (siblings).
  • Trong những nút anh em, có thể gọi nút trước tiên được gọi là con cả (firstChild) và xem nút cuối cùng là con út (lastChild).

Bạn có thể quan sát hình dưới đây để hiểu rõ hơn về DOM.

Như đã thấy trong hình, đa số những thẻ HTML sẽ xuất phát từ 1 đối tượng Doc, thẻ ở vị trí cao nhất là thẻ html, kế tiếp là những phân nhánh physique và head. Dưới thẻ head sẽ có những thẻ như fashion, title, … và bên dưới thẻ physique thì là vô số những thẻ HTML khác.

Như vậy, trường hợp JavaScript muốn truy xuất tới 1 thẻ HTML bất kỳ thì buộc phải thông qua đối tượng Doc được lưu trữ trong 1 biến toàn cục tên là doc.

Phương pháp truy xuất DOM

Truy xuất gián tiếp

Mỗi 1 nút trên sơ đồ 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.parentNode: cho phép tham chiếu tới nút cha của nút hiện tại. Do đấy, trường hợp bạn cần tìm nguồn gốc xa hơn nữa của 1 nút, bạn buộc phải nối thuộc tình này nhiều lần. Thí dụ Node.parentNode.parentNode.
  • Node.childNodes: cho phép tham chiếu tới những nút con quản lý của nút hiện tại. Những nút con sẽ ko bị phân biệt bởi loại nút, nên kết quả mảng trả về có thể sẽ gồm nhiều loại nút khác nhau.
  • Node.firstChild: cho phép tham chiếu tới nút con trước tiên của nút hiện tại. Thí dụ: Node.childNodes[0].
  • Node.lastChild: cho phép tham chiếu tới nút con cuối cùng của nút hiện tại. Thí dụ: Node.childNodes[Element.childNodes.length-1].
  • Node.nextSibling: cho phép tham chiếu tới những nút anh em nằm sau nút hiện tại.
  • Node.previousSibling: cho phép tham chiếu tới nút anh em nằm trước nút hiện tại.
Xem Thêm  Sự kiện mint y00ts NFT và những điều cần biết

Truy xuất quản lý

Phương pháp truy xuất này sẽ nhanh hơn và đơn giản hơn lúc bạn ko cần buộc phải quan hệ và vị trí của nút. Để truy xuất quản lý, bạn hãy dùng 1 trong 3 bí quyết sau:

  • doc.getElementById(‘id_cần_tìm’)
  • doc.getElementsByTagName(‘div’)
  • doc.getElementsByName(‘tên_cần_tìm’)

Chỉ dẫn bí quyết tạo mới, thêm, xoá và thay thế phần tử HTML bằng JavaScript

Phương pháp tạo 1 phần tử HTML

Chúng ta có thể tạo mới 1 phần tử HTML bằng những bí quyết sau:

doc.createElement(tag_name): Dùng để tạo ra phần tử có thẻ tag_name như a, p, div,…

aspect.cloneNode(): Dùng để tạo ra 1 phần tử bằng bí quyết nhân bản phần tử đấy

doc.createTextNode(textual content): Dùng để tạo ra 1 nút văn bản

Xóa phần tử HTML

Để loại bỏ 1 phần tử HTML, bạn buộc phải chọn phần tử cha rồi mới dùng phương thức removeChild(node)

Thí dụ:

<div id=”demo”> <p id=”p1″>It is a paragraph.</p> <p id=”p2″>That is one other paragraph.</p> </div> <script> var mum or dad = doc.getElementById(“demo”); var baby = doc.getElementById(“p1”); mum or dad.removeChild(baby); </script>

Hoặc bạn cũng có thể dùng thủ thuật lấy thuộc tính parentNode để bỏ qua bước tìm phần tử cha trong DOM: baby.parentNode.removeChild(baby);

Thí dụ:

<div id=”demo”> <p id=”p1″>It is a paragraph.</p> <p id=”p2″>That is one other paragraph.</p> </div> <script> var baby = doc.getElementById(“p1”); baby.parentNode.removeChild(baby); </script>

Thay thế phần tử HTML

Để thay thể 1 phần HTML tử bằng 1 phần tử HTML khác, bạn hãy dùng cú pháp aspect.replaceChild(newNode, oldNode). Trong đấy aspect sẽ là nút cha

<div id=”demo”> <p id=”p1″>It is a paragraph.</p> <p id=”p2″>That is one other paragraph.</p> </div> <script> var p = doc.createElement(“p”); p.innerText = ‘New Textual content’; var mum or dad = doc.getElementById(“demo”); var baby = doc.getElementById(“p1”); mum or dad.replaceChild(p, baby); </script>

Lúc bước chân vào lĩnh vực lập trình, DOM là 1 khái niệm cơ bản mà bạn bắt buộc buộc phải nắm rõ. Bài viết trên cũng khái quát 1 số thông tin liên quan tới DOM. Chúc bạn có thể thao tác có DOM thật hiệu quả nhé!

FAQs về DOM

CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO

  • Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Heart, Số 72 Lê Thánh Tôn, Phường Bến Nghé, Quận 1, Thành phố Hồ Chí MinhVăn phòng đại diện: 42 Trần Phú, Phường 4, Quận 5, Thành phố Hồ Chí Minh
  • Điện thoại: 0364 333 333Tổng đài miễn chi phí: 1800 6734
  • E-mail: gross [email protected]
  • Web site: www.tino.org