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 thực hiện 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? Người mua 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à phương pháp 1 tài liệu được truy cập và thực hiện.

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 thế đổi, xóa hoặc thêm bằng phương pháp dùng DOM.

Trang net 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 net, 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 ví dụ 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 net, tài liệu HTML, tài liệu XML và những phần thành phần của chúng (thí 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 hầu hết chúng đều có thể được truy cập và thực hiện bằng phương pháp dùng DOM và 1 ngôn ngữ như JavaScript.

Xem Thêm  Magic Web Cash (MIM) là gì? Bí quyết sắm bán MIM Token hiệu quả

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

  • Có thể thay thế đổi gần như những phần tử HTML và thuộc tính của chúng trong trang
  • Có thể thay thế đổi hầu hết những model 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 tại hiện tại
  • Có thể phản ứng có hầu hết những sự kiện HTML hiện có trong trang và đồng thời tạo ra những sự kiện HTML new

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ữ hầu hết những thành phần trong tài liệu của trang net
  • 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, identify của thẻ HTML
  • DOM HTML: có chức năng thay thế đổ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 thế đổ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à thực hiện có những thẻ HTML.
  • DOM Node, Nodelist: có chức năng thực hiện 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>.
  • Component node: đại diện cho 1 phần tử HTML.
  • Textual content node: từng đoạn ký tự động 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 net trong thẻ <title>, tên đề phần trong thẻ <h1> hoặc 1 đoạn văn trong thẻ <p>.
Xem Thêm  Frax Share (FXS) là gì? Sắm, bán FXS coin trên đâu? Giá bao nhiêu?

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

  • Nút gốc luôn là nút trước tiên và tại trên cùng trong sơ đồ cây.
  • Mọi 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ể xem hình dưới đây để hiểu rõ hơn về DOM.

Như đã thấy trong hình, hầu hết những thẻ HTML sẽ xuất phát từ 1 đối tượng Doc, thẻ tại vùng 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ư model, title, … và bên dưới thẻ physique thì là vô số những thẻ HTML khác.

Như vậy, ví dụ 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.

Bí quyết truy xuất DOM

Truy xuất gián tiếp

Từng 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ùng 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, ví dụ 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. Dí 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. Dí 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. Dí 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  Mách nhỏ} 3 phương pháp tải video từ Fb xuống điện thoại và máy tính

Truy xuất quản lý

Bí quyết 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ùng của nút. Để truy xuất quản lý, bạn hãy dùng 1 trong 3 phương pháp sau:

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

Chỉ dẫn phương pháp tạo new, thêm, xoá và thay thế thế phần tử HTML bằng JavaScript

Bí quyết tạo 1 phần tử HTML

Chúng ta có thể tạo new 1 phần tử HTML bằng những phương pháp 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 phương pháp 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 new dùng phương thức removeChild(node)

Dí 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);

Dí 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 đổi thế phần tử HTML

Để thay thế 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 yêu cầu} 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ể thực hiện có DOM thực 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