JavaScript: HTML DOM
Giải phóng thời gian, khai phóng năng lực
Một trang nằm trong cửa sổ trình duyệt web, có thể giống một đối tượng.
Một đối tượng tài liệu đại diện cho tài liệu HTML được hiển thị trong cửa sổ đó. Đối tượng tài liệu có thuộc tính khác biệt tham chiếu đến các đối tượng khác cho phép truy cập và cập nhật nội dung tài liệu.
Cách truy cập vào nội dung tài liệu được truy xuất lại và cập nhật được gọi là Mô hình đối tượng tài liệu hay DOM. Các đối tượng được xây dựng theo cấp độ. Mức xây dựng này được áp dụng để xây dựng các đối tượng trong tài liệu web.
Sau đây là cấp độ đơn giản để xây dựng các đối tượng quan trọng:
Có một số DOM vẫn tồn tại. Các phần sau sẽ giải thích từng DOM và mô tả cách bạn có thể sử dụng chúng để truy xuất và cập nhật nội dung tài liệu.
- Legacy DOM - Mô hình này đã được giới thiệu trong các phiên bản đầu tiên của lập trình JavaScript. Nó được hỗ trợ tốt bởi tất cả các trình duyệt, nhưng nó chỉ truy cập trong một số phần chính của tài liệu dưới dạng biểu mẫu, thành phần biểu mẫu và hình ảnh.
- W3C DOM - Đối tượng tài liệu này cho phép truy xuất và cập nhật tất cả nội dung tài liệu và nó được tiêu chuẩn hóa bởi World Wide Web Consortium (W3C). Mô hình này được hỗ trợ bởi hầu hết các trình duyệt hiện đại.
- IE4 DOM - Đối tượng tài liệu này đã được giới thiệu trong Phiên bản thứ tư của trình duyệt Internet Explorer của Microsoft. IE 5 và phiên bản cao hơn mới bao gồm hỗ trợ các tính năng gần như cơ bản W3C DOM.
DOM kế thừa
Đây là mô hình đượ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, nhưng nó chỉ truy cập trong một số phần chính của tài liệu dưới dạng biểu mẫu, thành phần biểu mẫu và hình ảnh.
Mô hình này chỉ cung cấp một số thuộc tính, chẳng hạn như tiêu đề, URL và lastModified cung cấp thông tin về tất cả tài liệu. Ngoài ra, có nhiều phương pháp khác được cung cấp bởi mô hình này có thể được sử dụng để đặt và nhận các giá trị thuộc tính tài liệu.
Thuộc tính tài liệu trong Legacy DOM
Sau đây là danh sách các thuộc tính tài liệu có thể truy xuất bằng Legacy DOM.
Sr.No | Thuộc tính và mô tả |
---|---|
1 |
alinkColor Không được chấp nhận - Một chuỗi cho biết màu của các liên kết đã kích hoạt. Ví dụ: document.alinkColor |
2 |
anchors[] Một mảng các đối tượng neo, mỗi đối tượng neo hiển thị trong tài liệu. Ví dụ: document.anchors [0], document.anchors [1], v.v. |
3 |
applet[] Một mảng các đối tượng Applet, một đối tượng cho mỗi applet hiển thị trong tài liệu. Ví dụ: document.applets [0], document.applets [1], vv |
4 |
bgColor Không được dùng nữa - Một chuỗi chỉ định màu nền của tài liệu. Ví dụ: document.bgColor |
5 |
cookie Thuộc tính có giá trị chuỗi với hành vi cụ thể cho phép các cookie được liên kết với tài liệu này có thể được truy vấn và đặt. Ví dụ: document.cookie |
6 |
domain Chuỗi chỉ định miền Internet mà tài liệu đến. Được sử dụng cho mục đích bảo mật. Ví dụ: document.domain |
7 |
embedes[] Một mảng các đối tượng đại diện cho dữ liệu được nhúng vào tài liệu bởi thẻ <embed>. Nó cũng giống như các plugin []. Một số plugin và điều khiển ActiveX có thể được điều khiển bằng mã JavaScript. Ví dụ: document.embedes [0], document.embedes [1], v.v. |
số 8 |
fgColor Một chuỗi chỉ định màu văn bản mặc định cho tài liệu. Ví dụ: document.fgColor |
9 |
forms[] Một mảng các đối tượng biểu mẫu, một đối tượng cho mỗi biểu mẫu HTML hiển thị trong tài liệu. Ví dụ: document.forms [0], document.forms [1], v.v. |
10 |
img[] Một mảng các đối tượng biểu mẫu, mỗi đối tượng cho mỗi biểu mẫu HTML hiển thị trong tài liệu với HTML <img>. Ví dụ: document.forms[0], document.forms[1], v.v. |
11 |
lastModified Chuỗi chỉ đọc chỉ định lần sửa đổi cuối cùng với tài liệu. Ví dụ: document.lastModified |
12 |
linkColor Không được tán thành - Mỗi chuỗi chỉ định một màu của các liên kết không được truy cập. Ví dụ: document.linkColor |
13 |
links[] Nó là một mảng liên kết tài liệu. Ví dụ: document.links [0], document.links [1], v.v. |
14 |
location URL của tài liệu. Nó không phải là thuộc tính URL được bình chọn. Ví dụ: document.location |
15 |
plugins[] Nó cũng tương tự với nhúng []. Ví dụ: document.plugins [0], document.plugins [1], v.v. |
16 |
referrer Một chuỗi duy nhất chứa URL của tài liệu, nếu có, nơi tài liệu hiện tại được liên kết. Ví dụ: document.referrer |
17 |
title Nội dung văn bản của thẻ <title>. Ví dụ: document.title |
18 |
URL Chuỗi chỉ đọc chỉ định URL của tài liệu. Ví dụ: document.URL |
19 |
vlinkColor Không được tán thành - Một chuỗi chỉ định màu của các liên kết đã kích hoạt. Ví dụ: document.vlinkColor |
Các phương thức tài liệu trong Legacy DOM
Sau đây là danh sách các phương pháp được hỗ trợ bởi Legacy DOM.
Sr.No | Thuộc tính và mô tả |
---|---|
1 |
clear() Không được chấp nhận - Xóa nội dung của tài liệu và không trả lại gì. Ví dụ: document.clear() |
2 |
close() Đóng tài liệu luồng được mở bằng phương thức open() và không trả lại gì. |
3 |
open() Xóa nội dung tài liệu và mở một luồng mà nội dung tài liệu mới có thể được viết. Không trả lại gì. Ví dụ: document.open() |
4 |
write(giá trị, ...) Nối một chuỗi hoặc chuỗi đã chỉ định vào tài liệu được loại bỏ cú pháp hoặc nối vào tài liệu được mở bởi open(). Không trả lại gì. Ví dụ: document.write(value, ...) |
5 |
writeln(giá trị, ...) Nó cũng giống như write (), ngoại trừ việc nó thêm một ký tự dòng mới vào đầu ra. Không trả lại gì. Ví dụ: document.writeln(value, ...) |
Chúng ta có thể định vị bất kỳ phần tử HTML nào trong bất kỳ tài liệu HTML nào bằng HTML DOM. Ví dụ: nếu một tài liệu chứa một phần tử biểu mẫu, thì khi sử dụng JavaScript, chúng ta có thể gọi nó bằng document.forms[0]. Nếu tài liệu Web của bạn bao gồm 2 phần tử biểu mẫu, thì biểu mẫu đầu tiên gọi với document.forms[0] và lệnh thứ hai với document.forms[1].
Sử dụng hệ thống phân cấp và thuộc tính được cung cấp ở trên, chúng ta có thể truy cập phần tử biểu mẫu đầu tiên bằng document.forms[0] .elements[0], v.v.
Thí dụ
Sau đây là một ví dụ truy xuất các thuộc tính tài liệu bằng phương thức Legacy DOM.
<html> <head> <title> Tiêu đề Tài liệu </title> <script> <!- function myFunc () { var ret = document . chức danh ; alert ( "Tiêu đề tài liệu:" + ret ); var ret = tài liệu . URL ; alert ( "URL tài liệu:" + ret ); var ret = tài liệu . các dạng [ 0 ]; cảnh báo ("Tài liệu Mẫu đầu tiên:" + ret ); var ret = tài liệu . biểu mẫu [ 0 ]. các phần tử [ 1 ]; alert ( "Phần tử thứ hai:" + ret ); } // -> </script> </head> <body> <h1 id="title"> Đây là tiêu đề chính </h1> <p> Nhấp vào phần sau để xem kết quả: </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>
Giải phóng thời gian, khai phóng năng lực