JavaScript: HTML DOM

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
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:

DOM HTML

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>
» Tiếp: Các hàm mũi tên ES6 trong JavaScript
« Trước: Đối tượng Date
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!