Cách truy cập đối tượng mô hình trong javascript
Mô hình Đối tượng Tài liệu (DOM) là một giao diện không phụ thuộc vào ngôn ngữ cung cấp quyền truy cập vào cấu trúc và nội dung của tài liệu HTML. JavaScript thường là ngôn ngữ được sử dụng để truy cập DOM để tạo các trang web động và tương tác Show
Hướng dẫn này cung cấp tổng quan về Mô hình đối tượng tài liệu và chỉ cho bạn cách tương tác với nó bằng một loạt ví dụ về JavaScript Trước khi bắt đầuCác ví dụ trong hướng dẫn này sử dụng các công cụ dành cho nhà phát triển của trình duyệt web để xem DOM và tương tác với bảng điều khiển JavaScript. Để tận dụng tối đa thông tin trong hướng dẫn này, hãy làm theo trên trình duyệt Chrome hoặc Firefox của riêng bạn
Mô hình đối tượng tài liệu là gì?Mô hình đối tượng tài liệu (DOM) là một giao diện cung cấp quyền truy cập vào cấu trúc và nội dung của tài liệu HTML. DOM đại diện cho các phần tử và nội dung của tài liệu HTML dưới dạng các nút và đối tượng. Biểu diễn DOM sau đó có thể được truy cập và sửa đổi bằng JavaScript và các ngôn ngữ kịch bản khác Về cơ bản, DOM là thứ cho phép các trang web trở nên động. Các ngôn ngữ như JavaScript hoạt động với các nút tạo nên DOM để thay đổi cách trình bày của trang web một cách linh hoạt và tương tác Có nhiều cách hiển thị DOM. Một trong những cách được sử dụng rộng rãi nhất là định dạng HTML. Khi bạn mở bảng điều khiển Kiểm tra của trình duyệt, bạn có thể xem biểu diễn HTML của một trang web. Ví dụ dưới đây hiển thị đánh dấu HTML cho một trang web đơn giản
DOM khác với mã nguồn HTML như thế nàoBản thân DOM không tương đương với mã nguồn HTML của trang web. Thay vào đó, DOM là đại diện cho cách một trang web được hiển thị tại thời điểm nó được truy cập Để minh họa cách mã nguồn DOM và HTML có thể khác nhau như thế nào, ví dụ bên dưới hiển thị tệp nguồn HTML. Tệp HTML bao gồm một hàm JavaScript bổ sung thêm các phần tử HTML vào trang sau khi tải trang
Sau khi trang HTML được tải và JavaScript chạy, biểu diễn DOM của nguồn HTML ở trên giống với mã được hiển thị bên dưới. JavaScript đã bị loại bỏ để làm cho HTML kết quả dễ đọc hơn. HTML bây giờ bao gồm một danh sách không có thứ tự ( 0) với hai mục danh sách ( 1).
Do DOM liên quan đến việc hiển thị trạng thái hiện tại của trang HTML nên giờ đây nó hiển thị các phần tử HTML mới đã được thêm vào trang bởi JavaScript. DOM luôn phản ánh mọi phép cộng, phép trừ hoặc các sửa đổi khác xảy ra với một trang web. Đặc tính này cho phép DOM làm cho các trang web trở nên động Mô hình đối tượng tài liệu và JavaScriptThông thường, JavaScript là cách các nhà phát triển web tương tác với DOM. JavaScript có thể truy cập DOM bằng đối tượng 2 và các nút được lồng bên dưới nóCác phần tiếp theo giải thích đối tượng 2 là gì và các bộ phận cấu thành nóĐể làm việc với DOM, JavaScript phía máy khách cung cấp đối tượng 2. Đối tượng này bao gồm các thuộc tính và phương thức để truy cập và sửa đổi DOMPhần trước bao gồm một số ví dụ về đối tượng 2 đang hoạt động. Dưới đây là hai lệnh bổ sung hiển thị thêm các tính năng của đối tượng 2
Nút và phần tửĐối tượng 2 chứa nhiều đối tượng khác tạo nên DOM. Các đối tượng này được gọi là các nút. Các nút bao gồm mọi thứ từ các phần tử HTML, đến các thuộc tính, đến văn bảnBạn có khả năng làm việc thường xuyên nhất với các nút phần tử. Các nút phần tử DOM tương ứng với các phần tử HTML của trang web. Chúng cho phép bạn truy cập và thao tác với các khối xây dựng của một trang web Tập lệnh được sử dụng trong phần DOM khác với nguồn HTML như thế nào đã thêm một
|