Các phương pháp truy xuất thuộc tính HTML bằng JavaScript

Chia sẻ: Nguyen Van Tuan | Ngày: | Loại File: PPT | Số trang:27

0
173
lượt xem
52
download

Các phương pháp truy xuất thuộc tính HTML bằng JavaScript

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Đối tượng Button: - Thuộc tính - Name: Thiết lập tên cho đối tượng. - Value: Giá trị của đối tượng. - Type: Kiểu đối tượng là Button. - Sự kiện: - onClick: Sự kiện được kích hoạt khi click chuột.

Chủ đề:
Lưu

Nội dung Text: Các phương pháp truy xuất thuộc tính HTML bằng JavaScript

  1. Các phương pháp truy xuất thuộc tính HTML bằng JavaScript
  2. Đối tượng Button - Thuộc tính - Name: Thiết lập tên cho đối tượng. - Value: Giá trị của đối tượng. - Type: Kiểu đối tượng là Button. - Sự kiện: - onClick: Sự kiện được kích hoạt khi click chuột.
  3. Đối tượng CheckBox - Thuộc tính: - Checked: đối tượng được check hay không? - Name: Thiết lập tên cho đối tượng. - Value: giá trị trả về của đối tượng. - Type: Kiểu của đối tượng. - Sự kiện: - onClick
  4. Đối tượng RadioButton - Thuộc tính: - Checked: - Length: Cho biết số đối tượng radioButton trong form - Name: - Value: - Type
  5. Đối tượng Textbox, Textarea - Thuộc tính: - defaultValue: Xác lập giá trị mặc định - Name: - Value: - Type: - Phương thức: - Focus(): Đưa dấu nháy vào trong textbox. - Blur(): Ngược lại với phương thức focus(). - Select(): đánh dấu chuỗi trong textbox. - Sự kiện: - onBlur: được gọi khi dấu nháy rời khỏi textbox. - onFocus: được gọi khi dấu nháy đưa vào textbox. - onChange: được gọi khi thay đổi dữ liệu trong textbox. - onSelect: được gọi khi đánh dấu chọn trong textbox.
  6. Đối tượng Select(Combobox) - Thuộc tính: - Name: - Index: lấy vị trí thứ n của đối tượng. - Length: trả về số mục trong đối tượng. - Selected: cho biết mục nào được chọn. - Selectedindex: trả về thứ tự mục đang chọn. - Text: chuỗi hiển thị của đối tượng. - Type: - Value: - Sự kiện: - onBlur: - onFocus: - onChange:
  7. Các đối tượng JavaScript - Window: Trình bày 1 cửa sổ browser. - Navigator: Chứa thông tin về browser của client. - Screen: Chứa thông tin về màn hình hiển thị của client. - History: Chứa các địa chỉ URL đã viếng thăm của cửa sổ browser. - Location: Chứa thông tin về URL hiện tại.
  8. Đối tượng Window - Đây là đối tượng được tạo tự động với mọi thể hiện của thẻ hoặc . Là đối tượng cao nhất trong hệ thống cấp bậc của JavaScript. - Thuộc tính: - defaultStatus: giá trị hiển thị mặc định trong thanh trạng thái (Status bar) của cửa sổ. - Frames: mảng chứa các frame được thiết lập trong trang HTML. - Length: Cho biết số frame được thiết lập trong HTML. - Name: cho biết tên của window hay frame. - Status: dùng hiển thị các thông điệp trong thanh trạng thái (status bar). - Phương thức: - Alert(message): Hiển thị thông điệp trong hộp thoại. - Close(): Đóng cửa sổ. - Confirm(message): hiển thị thông điệp trong hộp thoại với 2 nút OK và Cancel. Giá trị trả về true/false. - Open(url, name, option): Load trang HTML(URL) vào trong cửa sổ window với tên (name). Option gồm: • + Toolbar=[yes,no,1,0]: Cho biết tạo window có thanh Tollbar không? • + Directories=[yes,no,1,0]: Cho biết tạo window có directorie không? • + Status=[yes,no,1,0]: Cho biết tạo window có thanh trạng thái không? • + menu=[yes,no,1,0]: Cho biết tạo window có thanh menu không? • + scrollbars=[yes,no,1,0]: Cho biết tạo window có thanh cuộn không? • + resizabled=[yes,no,1,0]: Cho biết tạo window có thể thay đổi kích thước không? • + width=pixel: Ðịnh kích thuớc bề rộng của cửa sổ. • + height=pixel: Ðịnh kích thuớc chiều cao của cửa sổ. • Sự kiện: – Onload: được gọi khi mở trang web. – onUnload: Được kích hoạt khi thoát trang web.
  9. Đối tượng navigator: Đối tượng cho biết trình duyệt đang dùng trên phiên bản nào, trên  nền tảng nào… • Navigator Object Collections: plugins[] • Navigator Object Properties: – appCodeName: tên mã của browser – appMinorVersion: trả về version nhỏ hơn của browser. – appName: tên của browser. – appVersion: nền tảng và phiên bản của browser. – browserLanguage: ngôn ngữ hiện tại của browser. – cookieEnabled:  – cpuClass: – onLine: – Platform: – systemLanguage: – userAgent: – userLanguage: • Navigator Object Methods
  10. Đối tượng Screen: là 1 đối tượng javascript. Không phải là 1 đối tượng • HTML DOM. và chứa thông tin về màn Được tạo 1 cách tự động bằng JavaScript runtime engine hình hiển thị của client. • Các thuộc tính trên màn hình: – availHeight: chiều cao của màn hình hiển thị (trừ window taskbar) – availWidth: chiều rộng của màn hình hiển thị. – bufferDepth: chiều sâu của bảng màu trong vùng đệm off-screen bitmap. – colorDepth: chiều sâu của bảng màu trên thiết bị cuối hoặc vùng đệm. – deviceXDPI: – deviceYDPI – fontSmoothingEnabled: – Height: – logicalXDPI: – logicalYDPI: – pixelDepth – updateInterval: – Width:
  11. Đối tượng history: Kích hoạt các sự kiện trong history cũ của browser. • Thuộc tính: – Length: Cho biết số mục có trong danh sách history. • Phương thức: – Back(): Quay lại tài liệu trước đó trong history. – Forward(): Đến tài liệu kế trong history. – Go(location): Đến tài liêu trong history, location có thể dùng với chuỗi hoặc số. Nếu là chuỗi thì phải điền đầy đủ các thành phần của URL. Nếu là số thì phương thức sẽ lấy vị trí tài liệu cần đến trong history.
  12. Đối tượng Location • Một phần của đối tượng window và được truy cập thông qua thuộc tính window.location • Thuộc tính: – Hash, host, hostname, href, pathname, port, protocol, search • Location Object Methods – assign(): load 1 document mới. – reload(): reload document hiện tại. – replace(): replace document hiện tại với 1 cái mới.
  13. Đối tượng Document: - Đây là 1 đối tượng thông dụng khi muốn truy xuất bất kỳ các phần tử nào trong html/form. - Khi muốn hiển thị giá trị trong HTML. - Bất kỳ đối tượng nào trong HTML ta có thể truy xuất thông qua đối tượng Document. - Phương thức: - Clear(): Xóa tài liệu trong window. - Close(): Đóng lớp hiện hành đang mở. - Write(): Ghi chuỗi hoặc cấu trúc HTML trong tài liệu đặc biệt. - Writeln(): giống như write() nhưng tạo ra dòng mới.
  14. Đối tượng Document - Không chứa các đối tượng: navigator, frame, location, history, mineType. - Vd: Bạn có 1 đối tượng image với name=image1, bạn muốn thay đổi url của thuộc tính src. - document.image1.src=“image2.jpg” - document.images[0].src=“image2.jpg” - document.images[“image1”].src=“image2.jpg” - Vd: Bạn có 1 form với name=myForm1 chứa đối tượng INPUT TYPE=“text” name=myText1. - document.myForm1.myText1.value= “abc”
  15. HTML DOM Properties • x.innerHTML – giá trị chuỗi bên trong của x (a HTML element) • x.nodeName – tên của x • x.nodeValue – giá trị của x • x.parentNode – nút cha của x • x.childNodes – các nút con của x • x.attributes – các thuộc tính của x
  16. HTML DOM Methods • x.getElementByID(id) • x.getElementsByTagName(name) • x.appendChild(node) - insert 1 nút con vào x • x.removeChild(node) - remove 1 nút con từ x
  17. innerHTML • Cách dễ nhất để lấy và sửa nội dung của 1 thành phần. • Nó không phải là 1 phần của W3C DOM. Nó được hỗ trợ bởi các browser chính. • Dùng để thay đổi nội dung của thành phần HTML ( bao gồm và ). • Dùng để view source của trang đã được thay đổi 1 cách tự động. • Vd: get chuỗi từ tag với id=“intro” – – – Hello World! – This is an example for the HTML DOM tutorial. – – txt=document.getElementById("intro").innerHTML; – document.write("The text from the intro paragraph: " + txt); – – – • Sau khi thi hành câu lệnh, txt sẽ giữ giá trị “Hello world”
  18. childNodes and nodeValue • Vd: • • • Hello World! • This is an example for the HTML DOM tutorial. • • txt=document.getElementById("intro").childNodes[0].nodeValue; • document.write("The text from the intro paragraph: " + txt); • • • – document - the current HTML document – getElementById("intro") - the element with the id "intro" – childNodes[0] - the first child of the element (the text node) – nodeValue - the value of the node (the text itself)
  19. HTML DOM Access Nodes • Bạn có thể access vào 1 node theo 3 cách: – Dùng phương thức: getElementById() – Dùng phương thức: getElementsByTagName() – Bằng cách tìm vị trí của node và quan hệ của node. – Vd cho cách 1 & 2: • • • W3Schools example • • The DOM is very useful • This example demonstrates how to use the getElementsByTagName method • • • x=document.getElementById("main").getElementsByTagName("p"); • document.write("First paragraph inside the main div: " + x[0].innerHTML); • • •
  20. HTML DOM Access Nodes • Cách 3: có 3 thuộc tính parentNode, firstChild, lastChild. • Vd: – – – W3Schools example – – The DOM is very useful – This example demonstrates node relationships – – – • là firstChild, là lastChild, là parentNode. • var x=document.getElementById("intro"); var text=x.firstChild.nodeValue;

CÓ THỂ BẠN MUỐN DOWNLOAD

Đồng bộ tài khoản