Mô hình Legacy DOM trong JavaScript

Mô hình này được giới thiệu trong các phiên bản đầu tiên của Ngôn ngữ JavaScript. Nó được hỗ trợ tốt bởi tất cả các trình duyệt, Nó được hỗ trợ tốt bởi tất cả trình duyệt, nhưng chỉ cho phép truy cập tới các phần nào đó của tài liệu, như các phần tử Form, hình ảnh, Font.

Mô hình này cung cấp một số thuộc tính read-only, như title, URL, và lastModified cung cấp thông tin về tài liệu như là một tổng thể. Ngoài ra, còn có nhiều phương thức đa dạng được cung cấp bởi mô hình này mà có thể được sử dụng để thiết lập và nhận các giá trị thuộc tính của tài liệu.

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

Dưới đây là danh sách các thuộc tính của Document mà có thể được truy cập bởi sử dụng Mô hình Legacy DOM.

STT	Property & Miêu tả
1	alinkColor Thuộc tính cũ − Một chuỗi xác định màu của link hoạt động. Ex − document.alinkColor
2	anchors[ ] Một mảng của các đối tượng Anchor, một cho mỗi Anchor mà xuất hiện trong tài liệu Ex − document.anchors[0], document.anchors[1] và ...
3	applets[ ] Một mảng của các đối tượng Applet, một cho mỗi Anchor mà xuất hiện trong tài liệu Ex − document.applets[0], document.applets[1] và ...
4	bgColor Thuộc tính cũ − Một chuỗi biểu diễn màu nền trong tài liệu Ex − document.bgColor
5	cookie Một thuộc tính chuỗi quan trọng với trạng thái đặc biệt mà cho phép các Cookie liên kết với tài liệu này để được truy vấn và thiết lập. Ex − document.cookie
6	domain Một chuỗi xác định miền Internet của tài liệu. Được sử dụng cho mục đích bảo mật. Ex − document.domain
7	embeds[ ] Một mảng các đối tượng biểu diễn dữ liệu được nhúng trong tài liệu với thẻ <embed>. Một từ đồng nghĩa với plugins[ ]. Một số Plugins và ActiveX Controls có thể được điều khiển với JavaScript code. Ex − document.embeds[0], document.embeds[1] and so on
8	fgColor Thuộc tính cũ - Một chuỗi xác định màu văn bản mặc định cho tài liệu Ex − document.fgColor
9	forms[ ] Một mảng các đối tượng Form, một cho mỗi HTML form mà xuất hiện trong tài liệu Ex − document.forms[0], document.forms[1] và ...
10	images[ ] Một mảng các đối tượng Image, một cho mỗi hình ảnh mà được nhúng vào trong tài liệu với thẻ HTML <img> Ex − document.images[0], document.images[1] và ...
11	lastModified Một chuỗi chỉ đọc read-only mà xác định ngày tạo những thay đổi gần đây trong tài liệu Ex − document.lastModified
12	linkColor Thuộc tính cũ − Một chuỗi xác định màu cho các Unvisited links Ex − document.linkColor
13	links[ ] Nó là một mảng các link trong tài liệu Ex − document.links[0], document.links[1] và ...
14	location URL của tài liệu. Thuộc tính cũ vì lợi ích của thuộc tính URL Ex − document.location
15	plugins[ ] Một từ đồng nghĩa với embeds[ ] Ex − document.plugins[0], document.plugins[1] và ...
16	Referrer Một chuỗi read-only mà chứa URL của tài liệu Ex − document.referrer
17	Title Nội dung văn bản của thẻ <title> Ex − document.title
18	URL Một chuỗi read-only xác định URL của tài liệu. Ex − document.URL
19	vlinkColor Thuộc tính cũ − Một chuỗi xác định màu của Visited Link. Ex − document.vlinkColor

Quảng cáo

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

Dưới đây là danh sách các phương thức của Document được hỗ trợ bởi Legacy DOM.

STT	Phương thức & Miêu tả
1	clear( ) Thuộc tính cũ − Xóa bỏ nội dung tài liệu và không trả về thứ gì Ex − document.clear( )
2	close( ) Đóng một tài liệu đã mở bởi phương thức open( ) và không trả về thứ gì Ex − document.close( )
3	open( ) Xóa nội dung tài liệu hiện tại và mở một stream mới để nội dung mới có thể được viết; và không trả về thứ gì Ex − document.open( )
4	write( value, ...) Chèn chuỗi hoặc các chuỗi đã cho vào trong tài liệu hiện tại đang được phân tính và nối kết với tài liệu đã mở với phương thức open( ). Và không trả về thứ gì Ex − document.write( value, ...)
4	writeln( value, ...) Tương đương với write( ), ngoại trừ việc nó so khớp một ký tự newline (dòng mới) tới đầu ra (output). Và không trả về thứ gì Ex − document.writeln( value, ...)

Quảng cáo

Ví dụ

Chúng ta có thể xác định vị trí bất kỳ phần tử HTML trong bất kỳ tài liệu HTML nào bởi sử dụng HTML DOM. Ví dụ, nếu một tài liệu web chứa phần tử form thì khi sử dụng JavaScript chúng ta có thể tham chiếu tới nó như là document.forms[0]. Nếu tài liệu web của bạn bao gồm hai phần tử form thì Form đầu tiên sẽ được tham chiếu như là document.forms[0] và Form thứ hai là document.forms[1].

Sử dụng cấu trúc thứ bậc và các thuộc tính đã cho ở trên, chúng ta có thể truy cập phần tử Form đầu tiên bởi sử dụng document.forms[0].elements[0] và ...

Dưới đây là ví dụ để truy cập các thuộc tính tài liệu bởi sử dụng phương thức Legacy DOM.

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

Kết quả

Ghi chú − Ví dụ này trả về các đối tượng với các Form và các phần tử và chúng ta sẽ phải truy cập các giá trị này bởi sử dụng những 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: