Tài liệu Các phương pháp truy xuất thuộc tính HTML bằng JavaScript pdf
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (135.77 KB, 27 trang )
Các phương pháp truy xuất thuộc
tính HTML bằng JavaScript
Đố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.
Đố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
Đối tượng RadioButton
-
Thuộc tính:
-
Checked:
-
Length: Cho biết số đối tượng radioButton trong form
-
Name:
-
Value:
-
Type
Đố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.
Đố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:
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.
Đối tượng Window
-
Đây là đối tượng được tạo tự động với mọi thể hiện của thẻ <body> hoặc <frameset>. 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.
Đố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
– javaEnabled():
–
taintEnabled():
Đối tượng Screen: là 1 đối tượng
javascript. Không phải là 1 đối tượng
HTML DOM.
•
Được tạo 1 cách tự động bằng JavaScript runtime engine và chứa thông tin về
màn 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:
Đố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.
Đố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.
Đố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.
Đố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”
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
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
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 <html> và <body>).
•
Dùng để view source của trang đã được thay đổi 1 cách tự động.
•
Vd: get chuỗi từ tag <p> với id=“intro”
–
<html>
–
<body>
–
<p id="intro">Hello World!</p>
–
<p id="main">This is an example for the HTML DOM tutorial.</p>
–
<script type="text/javascript">
–
txt=document.getElementById("intro").innerHTML;
–
document.write("The text from the intro paragraph: " + txt);
–
</script>
–
</body>
–
</html>
•
Sau khi thi hành câu lệnh, txt sẽ giữ giá trị “Hello world”
childNodes and nodeValue
•
Vd:
•
<html>
•
<body>
•
<p id="intro">Hello World!</p>
•
<p id="main">This is an example for the HTML DOM tutorial.</p>
•
<script type="text/javascript">
•
txt=document.getElementById("intro").childNodes[0].nodeValue;
•
document.write("The text from the intro paragraph: " + txt);
•
</script>
•
</body>
•
</html>
–
document - the current HTML document
–
getElementById("intro") - the <p> element with the id "intro"
–
childNodes[0] - the first child of the <p> element (the text node)
–
nodeValue - the value of the node (the text itself)
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:
•
<html>
•
<body>
•
<p id="intro">W3Schools example</p>
•
<div id="main">
•
<p id="main1">The DOM is very useful</p>
•
<p id="main2">This example demonstrates how to use the
<b>getElementsByTagName</b> method</p>
•
</div>
•
<script type="text/javascript">
•
x=document.getElementById("main").getElementsByTagName("p");
•
document.write("First paragraph inside the main div: " + x[0].innerHTML);
•
</script>
•
</body>
•
</html>
HTML DOM Access Nodes
•
Cách 3: có 3 thuộc tính parentNode, firstChild, lastChild.
•
Vd:
–
<html>
–
<body>
–
<p id="intro">W3Schools example</p>
–
<div id="main">
–
<p id="main1">The DOM is very useful</p>
–
<p id="main2">This example demonstrates <b>node
relationships</b></p>
–
</div>
–
</body>
–
</html>
•
<p id="intro"> là firstChild, <div> là lastChild, <body> là
parentNode.
•
var x=document.getElementById("intro");
var text=x.firstChild.nodeValue;
HTML DOM Access Nodes
•
Root Nodes
–
Có 2 thuộc tính đặc biệt:
•
document.documentElement: trả về nút gốc của
document và tồn tại trong tất cả document của
XML/HTML.
•
document.body
HTML DOM - How to Change
HTML Elements
•
Changing an HTML Element: Thay đổi nội dung và thuộc tính của thể HTML 1 cách tự động.
–
Vd:
–
<html> <body> <script type="text/javascript"> document.body.bgColor="yellow"; </script> </body>
</html>
•
Changing the Text HTML Element – innerHTML: Cách dễ nhất để thay đổi nội dung của 1 thẻ
bằng cách dùng innerHTML
–
Vd:
–
<html> <body> <p id="p1">Hello World!</p> <script type="text/javascript">
document.getElementById("p1").innerHTML="New text!"; </script> </body> </html>
•
Changing an HTML Element Using Events: 1 event handler cho phép thực thi code khi sự
kiện xảy ra. Các events được sinh ra bởi browser khi user click 1 element, pageload,
submit…
–
Vd:
–
<html> <body><input type="button" onclick="document.body.bgColor='yellow';" value="Click me to
change background color"></body> </html>
–
<html> <head> <script type="text/javascript"> function ChangeText()
{ document.getElementById("p1").innerHTML="New text!"; } </script> </head><body> <p
id="p1">Hello world!</p> <input type="button" onclick="ChangeText()" value="Click me to change text
above"> </body> </html>
•
Using the Style Object: Style có thể được truy cập từ document hoặc từ từ 1 thành phần
apply style.
–
Vd:
–
<html> <head> <script type="text/javascript"> function ChangeBackground()
{ document.body.style.backgroundColor="yellow"; } </script> </head><body> <p id="p1">Hello world!
</p> <input type="button" onclick="ChangeBackground()" value="Click me to change background
color"> </body> </html>
HTML DOM – Events
•
Events
–
Dùng javascript bạn có thể tạo trang web động.
Events là các hành động và có thể delete nó bằng
JavaScript.
–
Mọi thẻ trên trang đều có events có thể trigger
bằng JavaScript.
–
Examples of events:
•
A mouse click
•
A web page or an image loading
•
Mousing over a hot spot on the web page
•
Selecting an input box in an HTML form
•
Submitting an HTML form
•
A keystroke
HTML DOM-Events
•
onload and onUnload
–
Là sự kiện khi user đi vào hoặc ra khỏi trang.
–
Onload thường được dùng để kiểm tra kiểu browser và phiên bản
•
onFocus, onBlur and onChange
–
Dùng trong kết nối validate của form fields.
–
Vd:
–
<input type="text" size="30" id="email"
onchange="checkEmail()">
•
onMouseOver and onMouseOut:
–
Dùng để tạo "animated" button.
–
Vd: onMouseOver.
–
<a href="" onmouseover="alert('An
onMouseOver event');return false"> <img src="w3schools.gif"
width="100" height="30"> </a>
Sample
•
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
•
<HTML>
•
<HEAD>
•
<TITLE>Sample 500 - Example 4-0 Define and Call a Function </TITLE>
•
<SCRIPT LANGUAGE="JavaScript1.2"><! BEGIN HIDING
•
function setColor() {
•
document.bgColor = "purple";
•
}
•
//END HIDING >
•
</SCRIPT>
•
</HEAD>
•
<BODY>
•
<SCRIPT LANGUAGE="JavaScript1.2"><! BEGIN HIDING
•
setColor();
•
//END HIDING >
•
</SCRIPT>
•
<H2> The call to the setColor() Function in the second Script actually
•
changes the background color. Without the explicit call, the Function is only
•
defined in the HEAD but not executed.
•
</H2>
•
</BODY>
•
</HTML>
