HTML DOM

BIẾN CỐ

GV: ĐOÀN THIỆN NGÂN

Nộidung

Chương8: HTML DOM –BI ẾN CỐ

• HTML DOM

• BIẾN CỐ

LTM1 –HTML DOM & EVENT –2/24

Giớithi ệuHTML DOM

LTM1 –HTML DOM & EVENT –3/24

• HTML DOM: Document Object Model for HTML • Môhình đối tượngtàili ệu(document) trong trìnhduy ệt. • DOM địnhngh ĩa tậpchu ẩn về cáchtruy xu ất, thao tác các đối tượngtrongtàili ệuHTML • DOM thể hiệntàili ệuHTML ở dạng cấutrúccây, v ới mỗinút(node) trêncây đạidi ệncho m ộtph ần tử HTML. Nút lớnnh ấtlà window. • Cácnút n ằmbên trong m ộtnút được gọilànútcon, còn cácnútthu ộccùng m ức đượcxem là nút anh em.

LTM1 –HTML DOM & EVENT –4/24

Đối tượngwindow

• Cácthu ộctính: frames, closed, defaultstatus, length, name, opener, parent, self, status, top, document, history, location,

• Cácph ương thức:

(cid:252)print(), alert("msg"), confirm("msg"),

prompt("msg","default-value"),

(cid:252)setTimeout(func,millisec), clearTimeout(id), setInterval(func, millisec), clearInterval(id),

(cid:252)moveBy(x,y), moveTo(x,y), resizeTo(x,y), resizeBy(x,y),

blur(), focus(), close(),

(cid:252)open("url","tên-window","_blank| _parent| _self| _top|

tên_newwindow", ["thuộctính1=val1, thuộctính2=val2,… "])

LTM1 –HTML DOM & EVENT –5/24

Đối tượngnavigator

• Đối tượngnavigatorth ể hiệncácthông tin v ề trìnhduy ệt vớicácthu ộctínhvàph ương thức:

(cid:252)appCodeName: mãtên c ủatrìnhduy ệt. (cid:252)appName: têntrìnhduy ệt. (cid:252)appVersion: phiên bản củatrìnhduy ệt. (cid:252)browserLanguage: ngônng ữ hiện tại củatrìnhduy ệt. (cid:252)platform: nền của hệ điềuhành. (cid:252)javaEnabled(): chobi ếttrìnhduy ệtcó h ỗ trợ

LTM1 –HTML DOM & EVENT –6/24

Javascripthay không.

Đối tượnglocation

• Thuộctínhvàph ương thức của đối tượnglocation (cid:252)href: thể hiệnurl c ủatrangweb. (cid:252)reload(): nạp lạitrangweb hi ện tại. (cid:252)replace(): thayth ế nộidung hi ện tại bằng một

LTM1 –HTML DOM & EVENT –7/24

trangweb m ới.

Đối tượnghistory

LTM1 –HTML DOM & EVENT –8/24

• Thuộctínhvàph ương thức của đối tượnghistory: (cid:252)length: số lượngURL màng ườidùng đãtruy cập. (cid:252)backward(): nạpURL tr ước đótrong danh sách URL history. (cid:252)forward(): nạpURL k ế tiếptrongdanhsách URL history. (cid:252)go(number|URL): nạp mộtURL cóth ứ tự cụ thể trongdanhsáchURL history.

Các thuộc tính của đối tượng document

• Cácthu ộctính c ủa đối tượngdocument:

LTM1 –HTML DOM & EVENT –9/24

(cid:252)anchors: trả về mảngch ứa tất cả cáctênbookmark trongtàili ệu. (cid:252)forms: trả về mảngch ứa tất cảđố i tượngformtrong tàili ệu. (cid:252)images: trả về mảngch ứa tất cảđố i tượng ảnhtrong tàili ệu. (cid:252)links: trả về mảngch ứa tất cảđố i tượngliên k ếttrong tàili ệu. (cid:252)body: phần tử body củatrang. (cid:252)title: tựa đề củatàili ệu.

Cácthu ộctính c ủa đối tượngdocument

• Cácthu ộctính c ủa đối tượngdocument:

LTM1 –HTML DOM & EVENT –10/24

(cid:252) alinkcolor: màu củaliên k ết đang đượckíchho ạt. (cid:252) vlinkcolor: màu củaliên k ết đã đượcch ọn. (cid:252) linkcolor: màu củaliên k ếttrongtàili ệu. (cid:252) bgcolor: màu nền củatàili ệu. (cid:252) fgcolor: màu của văn bảntrongtàili ệu. (cid:252) location: thể hiện địach ỉ củadocument.

Cácph ương thức của đối tượngdocument (cid:252)getElementById(id): trả về phần tử HTML cóid t ương ứng. (cid:252)getElementsByName(name): trả về một mảng gồmcác phần tử HTML cótên t ương ứng. (cid:252)getElementsByTagName(tagname): trả về một mảng cácph ần tử HTML cótênth ẻ tagname đãch ỉđị nh. (cid:252)document.write("str"): ghi mộtdòng v ăn bảnvàotài liệu. (cid:252)document.writeln("str"): ghi mộtdòng v ăn bảnvàotài liệu, cókèmthêm d ấuxu ốngdòng. (cid:252)open("text/html", replace): tạo nộidung m ớichotài liệu, dùng kết hợp vớihàmdocument.write(). (cid:252)close(): đóngtàili ệukhi đãdùnghàmopen() bêntrên.

LTM1 –HTML DOM & EVENT –11/24

Đối tượngframe

• Đối tượngframe: m ộtph ần tử HTML frame. • Trong tàili ệuHTML cóbao nhiêu th ẻ , sẽ có tương ứng bấynhiêu đối tượngframe. • Thuộctínhframes c ủawindow: m ảngcácframe

LTM1 –HTML DOM & EVENT –12/24

var allframes = window.frames; (cid:252)varmyframe= window.frames[i]; (cid:252)varmyframe= window.frames['tên_frame']; (cid:252)varmyframe= window.tên_frame; (cid:252)varmyframe= document.getElementById(frame_id);

Cácthu ộctính c ủa đối tượngframe

LTM1 –HTML DOM & EVENT –13/24

• frameBorder=1|0: hiểnth ịđườ ngbiên c ủaframe • name: tênframe. • scrolling=yes|no: chobi ếthi ểnth ị thanhcu ộnhay không. • src=URL: địach ỉ củatàili ệuhi ểnth ị bêntrong frame. • noResize=true|false: cho biếtcóth ể thay đổikích thướcframe hay không.

Đối tượngform

• Thuộctính forms củadocument: m ảng tất cả form trongtàili ệu • Cácthu ộctính c ủaform:

• elements: mảngch ứa tất cả phần tử trênform. • action: giátr ị củathu ộctínhaction c ủath ẻ

. • id: id củaform. • length: số phần tử thuộcform. • target: giátr ị củathu ộctínhtarget c ủath ẻ .

LTM1 –HTML DOM & EVENT –14/24

• Cácph ương thức củaform: reset(), submit()

Thuộctính c ủa mộtth ẻ chứa

• Thuộctính innerHTML: nộidung g ồm văn bảnvàHTML

phần_tử.innerHTML

• Thuộctính value: giátr ị củaph ần tử

phần_tử.value

LTM1 –HTML DOM & EVENT –15/24

• Thuộctính checked củacheckbox, radio button hay option (trongDropdown Box): Boolean –false/true • Thuộctính c ủaph ần tử select –Dropdown Box: options, length, selectedIndex (khônghi ệu lựckhich ọn multiple) VD-8.18 • Thuộctính readonly (text field hay textarea) và disable

Đối tượngStyle

• Cúpháp định dạng style cho mộtph ần tử

phần_tử.style.thuộc_tính_CSS

Click to see demo

Giớithi ệu về biến cố -event

• Biến cố làcáchành động xảyra trên trang web, đượcnh ận biết bởiJS • Mỗithànhph ầntrong trang webcónh ữngbi ến cố riêng tương ứng • Cácbi ến cố sẽ kíchho ạtcác đoạncode x ử lýbi ến cố • Trong JS, biến cốđượ cphân thành m ột số nhómchinh:

LTM1 –HTML DOM & EVENT –17/24

(cid:252)Biến cố liên quan đếngiao di ệnng ườidùng (cid:252)Biến cố liênquan đếnchu ột. (cid:252)Biến cố liênquan đếnbànphím (cid:252)Biến cố HTML (gắn với một số phần tử HTML)

Quảnlýbi ến cố

Quảnlýbi ến cố cho mộtth ẻ HTML, dùngcáchsau: 1.Chỉđị nhbi ến cố và đoạncode x ử lýtrongth ẻ HTML.

2.Chỉđị nhbi ến cố và đoạncode x ử lý bằng lệnhJavascript.

• đốitượng.biếncố = hàm-xử-lý-biến-cố; • đốitượng.biếncố = function(){

hàm-xử-lý-biến-cố();

LTM1 –HTML DOM & EVENT –18/24

};

Biến cố liên quanGUI vàKeyboard • Biến cố liên quan đếngiao di ệnng ườidùng g ắnli ền với thao tácchuy ểntiêu điểm(focus) m ột đối tượngnàysang một đối tượngkhác 1. onactivate: (IE hỗ trợ, Firefox không hỗ trợ) 2. onblur: mấtfocus 3. onfocus: nhậnfocus

• Biến cố liên quanbànphím:

LTM1 –HTML DOM & EVENT –19/24

1. onkeydown: biến cố xảyrakhinh ấnphím. 2. onkeypress: biến cố xảyrakhinh ấnvành ả phím. 3. onkeyup: biến cố xảyrakhinh ả phím.

Biến cố liênquan đếnchu ột

LTM1 –HTML DOM & EVENT –20/24

• onmousedown: khinh ấnnútchu ột. • onmouseup: khinh ả nútchu ột. • onmouseover: khichu ột nằmtrên m ộtthànhph ần HTML • onmouseout: khichu ộtdi chuy ểnkh ỏithànhph ần HTML • onmousemove: khidi chuy ểnchu ột. • onclick: khiclick chu ột(c ả haithaotácnh ấnvành ả chuột). • ondblclick: khinh ấp đúpchu ột(double-click).

Cácbi ến cố HTML • onload: khi trang Web được tảihoàntoàntrong trìnhduy ệt • onunload: khitrìnhduy ệtchu ẩn bị loại bỏ trangWeb • onsubmit: khinh ấnnútsubmit trênform • onreset: khinh ấn nút reset trên form • onselect: khich ọn văn bảntrong m ộttextfieldhay textarea. • onchange: khi mấtfocus vàgiátr ị củanó b ị thay đổi • onscroll: khiscrollbar c ủa đối tượng bị thay đổi • onabort: khitrìnhduy ệtng ừng tảihình ảnh(hi ếmdùng) • onresize: đối tượng sắp bị thay đổikíchth ước(hi ếmdùng) • onerror: có lỗilúctrang web đang tảixu ống(hi ếmdùng)

LTM1 –HTML DOM & EVENT –21/24

Kíchho ạtbi ến cố bằngJavascript

• Gọi hàm gắnli ền vớibi ến cố

(cid:252)document.forms[0].submit(); (cid:252)…

(cid:252)…

LTM1 –HTML DOM & EVENT –22/24

• Gọihàm fireEvent để kíchho ạtbi ến cố (một số trình duyệtkhông h ỗ trợ) (cid:252)varbtn= document.getElementById("btn"); btn.fireEvent("onclick");

Sử dụngmethod addEventListener() • Dùng addEventListener() gắnevent handler cho m ột element xác định. • Cóth ể thêmnhi ềuevent handlers chocùng m ộtlo ạievent cho mộtelement, i.enhi ều"click" events. • DùngaddEventListener() cho b ất kỳ DOM object (không riêngHTML elements. i.ewindow object). • Khôngdùng"on…" choevent; dùng"click" thayvì "onclick". • Xoáevent listener dùngmethod removeEventListener()

LTM1 –HTML DOM & EVENT –23/24

???

LTM1 –HTML DOM & EVENT –24/24

• HTML DOM • HTML element: attributes, methods • Attribute CSS Style • Event, Event handler • Method addEventListener()