Mô hình W3C DOM trong JavaScript

Mô hình này cho phép truy cập và chỉnh sửa tất cả nội dung tài liệu và được tiêu chuẩn hóa bởi W3C. Mô hình này được hỗ trợ bởi hầu hết các trình duyệt hiện đại.

W3C DOM chuẩn hóa hầu hết các tính năng của Mô hình Legacy DOM và cũng thêm vào các tính năng mới. Ngoài việc hỗ trợ các thuộc tính forms[ ], images[ ], và các thuộc tính khác của đối tượng Document, nó định nghĩa các phương thức mà cho phép script để truy cập và thao tác bất cứ phần tử Document nào (không chỉ với các phần tử cho mục đích đặc biệt như Form và Image).

Các thuộc tính của Document trong W3C DOM

Mô hình W3C DOM hỗ trợ tất cả các thuộc tính có sẵn trong Mô hình Legacy DOM. Thêm vào đó, dưới đây là các danh sách các thuộc tính mà có thể được truy cập bởi sử dụng Mô hình W3C DOM.

STT	Thuộc tính & Miêu tả
1	body Một tham chiếu tới đối tượng Element mà biểu diễn thẻ <body> của tài liệu này Ex − document.body
2	defaultView Thuộc tính Read-only (chỉ đọc) của nó và biểu diễn cửa sổ (Window) trong đó tài liệu được hiển thị Ex − document.defaultView
3	documentElement Thuộc tính read-only tham chiếu tới thẻ <html> của tài liệu Ex − document.documentElement8/31/2008
4	implementation Nó là một thuộc tính read-only biểu diễn đối tượng DOMImplementation mà biểu diễn sự thực thi mà tạo tài liệu này Ex − document.implementation

Quảng cáo

Các phương thức của Document trong W3C DOM

Mô hình W3C DOM hỗ trợ tất cả các phương thức có sẵn trong Mô hình Legacy DOM. Thêm vào đó, dưới đây là các danh sách các phương thức mà có thể được truy cập bởi sử dụng Mô hình W3C DOM.

STT	Thuộc tính & Miêu tả
1	createAttribute( name) Trả về một Attr node vừa mới tạo với tên đã cho Ex − document.createAttribute( name)
2	createComment( text) Tạo và trả về một Comment node mới chứa văn bản đã cho Ex − document.createComment( text)
3	createDocumentFragment( ) Tạo và trả về một DocumentFragment node trống Ex − document.createDocumentFragment( )
4	createElement( tagName) Tạo và trả về một Element node mới với tên thẻ đã cho Ex − document.createElement( tagName)
5	createTextNode( text) Tạo và trả về một Text node mới mà chứa văn bản đã cho Ex − document.createTextNode( text)
6	getElementById( id) Trả về Element của tài liệu này mà có giá trị đã xác định cho thuộc tính id của nó, hoặc null nếu không có Element nào tồn tại trong tài liệu Ex − document.getElementById( id)
7	getElementsByName( name) Trả về một mảng của các node của tất cả các phần tử trong tài liệu mà có giá trị đã xác định cho thuộc tính name của nó. Nếu không có phần tử nào như vậy được tìm thấy, nó trả về một mảng có độ dài là 0 Ex − document.getElementsByName( name)
8	getElementsByTagName( tagname) Trả về một mảng của tất cả các Element node trong tài liệu này mà có tên thẻ đã xác định. Các Element node xuất hiện trong mảng trả về trong cùng thứ tự khi chúng xuất hiện trong tài liệu nguồn Ex − document.getElementsByTagName( tagname)
9	importNode( importedNode, deep) Tạo và trả về một bản sao của một node từ một số tài liệu khác mà thích hợp chèn vào trong tài liệu này. Nếu tham số deep là true, nó cũng sao chép một cách đệ quy các con của node. Được hỗ trợ trong DOM Version 2 Ex − document.importNode( importedNode, deep)

Quảng cáo

Ví dụ

Nó là đơn giản để thao tác ( Truy cập và Thiết lập ) phần tử Document bởi sử dụng W3C DOM. Bạn có thể sử dụng bất cứ phương thức nào như getElementById, getElementsByName, hoặc getElementsByTagName.

Dưới đây là một ví dụ để truy cập các thuộc tính của Document bởi sử dụng phương thức W3C DOM.

<html>
   
   <head>
      <title> Document Title </title>
      
      <script type="text/javascript">
         <!--
            function myFunc()
            {
               var ret = document.getElementsByTagName("title");
               alert("Document Title : " + ret[0].text );
               
               var ret = document.getElementById("heading");
               alert(ret.innerHTML );
            }
         //-->
      </script>
      
   </head>
   <body>
      <h1 id="heading">This is main title</h1>
      <p>Click the following to see the result:</p>
      
      <form id="form1" name="FirstForm">
         <input type="button" value="Click Me" onclick="myFunc();" />
         <input type="button" value="Cancel">
      </form>
      
      <form d="form2" name="SecondForm">
         <input type="button" value="Don't ClickMe"/>
      </form>
      
   </body>
</html>

Ghi chú − Ví dụ này trả về các đối tượng với các Form và Element và chúng ta sẽ phải truy cập các giá trị của chúng bởi sử dụng các thuộc tính của đối tượng mà không được bàn luận trong chương này.

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Các bạn có thể mua thêm khóa học JAVA CORE ONLINE VÀ ỨNG DỤNG cực hay, giúp các bạn vượt qua các dự án trên trường và đi thực tập Java. Khóa học có giá chỉ 300K, nhằm ưu đãi, tạo điều kiện cho sinh viên cho thể mua khóa học.

Nội dung khóa học gồm 16 chuơng và 100 video cực hay, học trực tiếp tại https://www.udemy.com/tu-tin-di-lam-voi-kien-thuc-ve-java-core-toan-tap/ Bạn nào có nhu cầu mua, inbox trực tiếp a Tuyền, cựu sinh viên Bách Khoa K53, fb: https://www.facebook.com/tuyen.vietjack

Follow facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Các bài học JavaScript khác tại VietJack: