Bài giảng Bài 5: Mô hình DOM và CSS - ĐH FPT

Nội dung Bài 5: Mô hình DOM và CSS giới thiệu về mô hình document object model, thuộc tính của node, phương thức của node, truy cập và thay đổi style của các elemen, đối phó với các trình duyệt khác nhau.

Bài 5: Mơ hình DOM CSS Hệ thố ng cũ Mơ hình lậ p trình Mơ hình lậ p trình hư ng đố i tư ợ ng Thuộ c tính, phư ng thứ c lớ p Tạ o đố i tư ợ ng Thêm thuộ c tính phư ng thứ c vào đố i tư ợ ng Tạ o lớ p, tạ o đố i tư ợ ng từ lớ p Các thao tác vớ i đố i tư ợ ng lớ p Browser Object Model Mơ hình DOM CSS Mụ c tiêu họ c Giớ i thiệ u mơ hình Document Object Model Giớ i thiệ u HTML DOM Cấ u trúc DOM Thuộ c tính củ a node Phư ng thứ c củ a node Truy cậ p đế n node Thêm node Xóa node Truy cậ p thay đổ i style củ a element Đố i phó vớ i trình duyệ t khác Mơ hình DOM CSS Document Object Model DOM mộ t chuẩ n đư ợ c đị nh nghĩa bở i W3C (World Wide Web Consortium) để truy cậ p thao tác vớ i tài liệ u html hay xml bằ ng ngơn ngữ lậ p trình Javascript, VB… The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents (Đị nh nghĩa bở i W3C) Mơ hình DOM CSS DOM DOM đư ợ c chia thành mứ c Core DOM: Tiêu chuẩ n cho bấ t kỳ tài liệ u có cấ u trúc XML DOM: Tiêu chuẩ n cho tài liệ u XML HTML DOM: Tiêu chuẩ n cho tài liệ u HTML Mô hình DOM CSS HTML DOM HTML DOM đị nh nghĩa đố i tư ợ ng thuộ c tính củ a tấ t thành phầ n HTML, phư ng thứ c để truy cậ p đế n chúng Hay: HTML DOM chuẩ n để lấ y, thay đổ i, thêm, xóa thành phầ n HTML Truy cậ p trang web http://www.w3schools.com/htmldom/default.asp/ để tìm hiể u thêm HTML DOM Mơ hình DOM CSS Node DOM Tấ t thành phầ n tài liệ u HTML đề u đư ợ c biể u diễ n bằ ng đố i tư ợ ng node Toàn tài liệ u document node Tấ t thành phầ n củ a HTML đề u element node Văn bả n thành phầ n HTML text node Tấ t thuộ c tính attribute node Chú thích comment node Mơ hình DOM CSS Tài liệ u HTML ví dụ Hi

Hello

Link Node gố c < html> < html> có hai node < head> < body> < head> có mộ t node < title> < body> a hai node < p> < a> Mơ hình DOM CSS Cấ u trúc hình DOM DOM trình bày tài liệ u HTML theo cấ u trúc hình Hi

Hello

Link Element: Root Element: Element: Mơ hình DOM CSS Element: Element:

Text: Hi Text: Hello Element: Attribute: href Text: Link Quan hệ giữ a node Giữ a node có mố i quan hệ cha, (parent, children) anh em (siplings) Node cha có node con, node cấ p bậ c gọ i anh em Trên cây, node đầ u tiên đư ợ c gọ i root (gố c) Tấ t node, ngoạ i trừ root có mộ t node cha Mộ t node có nhiề u node hoặ c khơng có node Node (leaf) node khơng có node Nhữ ng node anh em (siplings) vớ i node có mộ t node cha Mơ hình DOM CSS 10 Xóa node element Sử dụ ng phư ng thứ c removeChild( nodeI d) củ a node để xóa node element củ a node

Hello

Hi

document.body.removeChild(pHi); Đoạ n mã dành cho Mơ hình DOM CSS

Hello

Hi

var pHi = document.getElementById("pHi"); document.body.removeChild(pHi); Đoạ n mã dành cho 32 Nhắ c lạ i CSS CSS đị nh nghĩa màu sắ c, font, layout… cho trang web CSS bao gồ m mộ t tậ p thuộ c tính, mỗ i thuộ c tính có mộ t tậ p giá trị nhấ t đị nh font-family:arial; Selector cho biế t thành phầ n đư ợ c áp dụ ng selector { property:value;} Có loạ i Selector Thẻ Lớ p ID Mơ hình DOM CSS h1 { font-family:arial; } tenClass { font-family:arial; } tenId { font-family:arial; } 33 JavaScript CSS Có thể sử dụ ng JavaScript để thay đổ i style cho trang web JavaScript cung cấ p đố i tư ợ ng style cho mỗ i element củ a trang web để thay đổ i style củ a trang web Sử dụ ng thuộ c tính style củ a mỗ i element để truy cậ p đế n đố i tư ợ ng style var hTieuDe = document.getElementById("hTieuDe"); hTieuDe.style.fontFamily = "arial" Đố i tư ợ ng style javascript có thuộ c tính tư ng ứ ng vớ i thuộ c tính củ a CSS Chú ý: Vớ i thuộ c tính CSS có dấ u gạ ch ngang đư ợ c bỏ dấ u gạ ch ngang viế t hoa chữ củ a từ sau dấ u gạ ch ngang (font-family fontFamily) ð Mơ hình DOM CSS 34 Thiế t lậ p style cho element Có thể thiế t lậ p style cho thành phầ n bằ ng ID Thẻ Class Mơ hình DOM CSS 35 Thiế t lậ p style bằ ng I D Các bư c thự c hiệ n Bư c Dùng ID để truy cậ p đế n element Bư c Sử dụ ng thuộ c tính style để thiế t lậ p style cho element var hTieuDe = document.getElementById("hTieuDe"); hTieuDe.style.fontFamily = "arial" Mơ hình DOM CSS 36 Demo thiế t lậ p style bằ ng I D Xem CSS Mơ hình DOM CSS 37 Demo thiế t lậ p style bằ ng I D function xanhButtonClick() { var pText = document.getElementById("pText"); pText.style.color = "blue"; } function doButtonClick() { var pText = document.getElementById("pText"); pText.style.color = "red"; }

Thiet lap style bang ID

Xanh Do Mơ hình DOM CSS 38 Thiế t lậ p style cho mộ t nhóm phầ n tử Vấ n đề nả y sinh: Muố n thay đổ i style cho nhiề u phầ n tử

Thiet lap style cho nhieu phan

Thanh phan 1

Thanh phan 2

Thanh phan 3

Giả i pháp: Sử dụ ng phư ng thứ c getElementsByName hoặ c getElementsByTagName để lấ y mộ t nhóm phầ n tử Sử dụ ng vòng For để duyệ t qua phầ n tử var pAr = document.getElementsByTagName("p"); for (var i = 0; i < pAr.length; i++) { pAr[i].style.color = "blue"; } Mơ hình DOM CSS 39 Lấ y thông tin brow ser Sử dụ ng thuộ c tính userAgent củ a navigator alert(navigator.userAgent) Tạ o phiên bả n khác cho browser Mô hình DOM CSS 40 Lấ y thơng tin brow ser Vấ n đề nả y sinh: Có rấ t nhiề u trình duyệ t Mỗ i trình duyệ t lạ i có nhiề u phiên bả n Mỗ i trình duyệ t lạ i lạ i hỗ trợ mứ c khác Để kiể m tra tấ t trình duyệ t, phiên bả n củ a trình duyệ t điề u khơng thể Thuộ c tính userAgent trả thơng tin s Cầ n có mộ t giả i pháp khác Mơ hình DOM CSS 41 Sử dụ ng cách thử Sử dụ ng cách thử để biế t trình duyệ t hỗ trợ phư ng thứ c if (typeof document.body.firstElementChild != "undefined") { alert("Browser ho tro phuong thuc firstElementChild"); } else { alert("Browser khong ho tro phuong thuc firstElementChild"); } Mơ hình DOM CSS 42 Đố i mặ t vớ i brow ser cũ Tạ o mã javascript chạ y tố t tấ t version củ a tấ t trình duyệ t điề u Thiế t lậ p mộ t giớ i hạ n hợ p lý trình duyệ t version để hỗ trợ Giớ i hạ n hẹ p khách hàng truy cậ p đư ợ c vào website Đố i vớ i browser không hỗ trợ javascript hoặ c bị disable javascript Dùng thẻ < noscript> < / noscript> Dùng thẻ < ! > < > Mơ hình DOM CSS 43 Xử lý kiệ n ( tiế p 4) Có thể dùng xử lý kiệ n để thay đổ i lạ i nộ i dung, cấ u trúc trang web function displayDate() { document.getElementById("demo").innerHTML = Date(); } My First Web Page Display Date Đọ c thêm Chư ng 11 để biế t thêm xử lý kiệ n Mô hình DOM CSS 44 Tổ ng kế t họ c DOM mộ t chuẩ n đư ợ c đị nh nghĩa bở i W3C (World Wide Web Consortium) để truy cậ p thao tác vớ i tài liệ u html hay xml bằ ng ngơn ngữ lậ p trình Javascript, VB… DOM đư ợ c chia làm mứ c CoreDOM, HTML DOM, XML DOM HTML DOM đị nh nghĩa đố i tư ợ ng thuộ c tính củ a tấ t thành phầ n HTML, phư ng thứ c để truy cậ p đế n chúng Tấ t thành phầ n tài liệ u HTML đề u đư ợ c biể u diễ n bằ ng đố i tư ợ ng node DOM trình bày tài liệ u HTML theo cấ u trúc hình Thuộ c tính đị nh nghĩa đặ c tính cho node nodeName, nodeValue, nodeType, innerText, childNodes, parentNode… Mơ hình DOM CSS 45 Tổ ng kế t họ c Phư ng thứ c để thự c hiệ n thao tác vớ i node truy cậ p đế n node, thêm node cho node xóa node Có thể truy cậ p đế n node bằ ng phư ng thứ c getElementByI d( id) , phư ng thứ c getElementsByTagName( name) hoặ c sử dụ ng mố i quan hệ giữ a node để điề u hư ng Có rấ t nhiề u trình duyệ t, mỗ i trình duyệ t lạ i đị nh nghĩa cấ u trúc DOM thuộ c tính, phư ng thứ c cho mỗ i Node Sử dụ ng cách thử để biế t trình duyệ t hỗ trợ phư ng thứ c JavaScript cung cấ p đố i tư ợ ng style mỗ i element để thay đổ i style cho elemetn Mơ hình DOM CSS 46