Bài giảng Phát triển ứng dụng Web – Web Programming: Chương 7 - ThS. Lương Trần Hy Hiến

Mời các bạn tham khảo bài giảng Phát triển ứng dụng Web – Web Programming: Chương 7 - Javascript - DOM sau đây để nắm bắt được những kiến thức về tổng quan DOM – HTML; một số đối tượng; làm việc với document - DOM; xử lý sự kiện (event).
Nội dung trích xuất từ tài liệu:
Bài giảng Phát triển ứng dụng Web – Web Programming: Chương 7 - ThS. Lương Trần Hy HiếnJavascript - DOMLuong Tran Hy Hien 1Nội dung1. Tổng quan về DOM – HTML2. Một số đối tượng3. Làm việc với document - DOM4. Xử lý sự kiện (event)5. Một số ví dụ 21. Tổng quan về DOM – HTML• HTML DOM = HTML Document Object Model• Xem trang web như một cây gồm nhiều nút (node)• Mỗi nút là một thành phần (tag HTML, thuộc tính, nội dung của tag)• DOM định nghĩa một cách để truy xuất và điều khiển các thành phần trong 1 trang web 31. Tổng quan về DOM – HTML 41. Tổng quan về DOM – HTML 51. Tổng quan về DOM – HTML 6 1. Tổng quan về DOM – HTML• Mỗi đối tượng DOM đều có danh sách thuộc tính (Properties) và danh sách các phương thức (Method) tương ứng.• objectName.propertyName= value• Vídụ: document.bgColor= “blue”;• objectName.methodName()• Vídụ: window.focus(); 72. Một số đối tượng trong DOM1. window2. location3. history4. navigator5. document6. image7. form8. element 82.1. DOM - window• Là thể hiện của đối tượng cửa sổ trình duyệt• Tồn tại khi mở 1 tài liệu HTML• Sử dụng để truy cập thông tin window• Điều khiển các sự kiện xảy ra trong window• Nếu tài liệu định nghĩa nhiều frame, browser tạo 1 window object cha và các window object con cho từng frame 92.1. DOM - window 102.2. DOM - location Chứa thông tin hiện tại của URL 112.3. DOM - historyCung cấp danh sách các URLđã được duyệt bởi người sử dụng. 122.4. DOM - navigator Cung cấp thông tin về trình duyệt. 132.5. DOM - document• Biểu diễn cho toàn bộ các thành phần trong 1 tài liệu HTML• Dùng để lấy thông tin về tài liệu, các thành phần HTML và xử lý sự kiện 142.5. DOM - document 15 2.6. DOM – image• Truy xuất đến tag trên trang web• Có thể truy xuất thông qua: – document.images[index] – document.images[“ImageName”] – document.ImageName• Một số thuộc tính của Image Obj – alt, border, classname, title, – width, height, hspace, vspace, – id, name, src, lowsrc, longDesc, – isMap, complete 162.7. DOM – form• Dùng để truy xuất đến tag trên trang web• Có thể truy xuất thông qua – document.forms[index] – document.forms[“FormName”] – document.FormName• Một số thuộc tính – action, method, id, name, target – classname, title, language, dir – elements[ ]• Một số phương thức – reset( ), submit( ) 172.8. DOM – element• Tương ứng với form field.• Cách truy xuất document.formName.controlName ------------------------------------------------------------------------------- document.searchForm.entry document.searchForm.elements[0] document.forms[“searchForm”].elements[“entry”] document.forms[“searchForm”].entry 18 3. Làm việc với document - DOMBiểu diễn nội dung tài liệu theo cấu trúc cây 193. Làm việc với document - DOM Cấu trúc cây của tài liệu 20