Upload
others
View
12
Download
0
Embed Size (px)
Citation preview
Theerayut Thongkrau
DOM
Document Object Model
Chapter 4
<html>
<body>
<p>
document
<h1>
<b>
<head>
<meta><title>
DOM: Document Object Model• DOM คอ built-in object ท browser สรางขนจากโครงสรางโคด
HTML เมอมการโหลดหนาเวบนน ๆ มโครงสรางแบบ Tree
2
<!doctype html><html><head>
<title>Basic DOM example</title><meta charset="UTF-8">
</head><body>
<h1>Hello World!</h1><p>While this is a <b>very basic HTML document</b>, it actuallyserves as a detailed example of the document object model.</p>
</body></html>
DOM ทสรางจากโคด html
โหนด Element
โคด html
DOM: Document Object Model• ในโคด JavaScript สามารถใช DOM จากตวแปรชอวา "document" ซงเกบ
Element Object ทกตวในเวบหนานนอย• document มเมธอดส าหรบดง Element ทตองการ เพอน ามาแกไขคา หรอ
เรยก method เพอท าใหเกดการ interactive กบผใชได
3
document
domain
title
location
getElementById()
getElementsByTagName()
getElementsByClassName()
…
createElement()
ใชดง Element ทมชอตรงกบ id ทก าหนด
ใชดงรายการ Element ทมชอตรงกบแทก HTML ทก าหนด
ใชดงรายการ Element ตามชอ class ทก าหนด
Element Object• Element Object เปน object ทเกบขอมลของแตละ Element ในหนาเวบ การ
ดง Element ดวยเมธอด getElementXxx( ) จะท าใหได Element Object ทนกพฒนาตองการออกมา
4
p
innerHTML
childElementCount
firstChild
style
classname
appendChild()
insertBefore()
setAttribute()
getAttribute()
…
รายการ Propertyโดยทวไป Element Object จะม attribute ทคลายคลงกนขนกบ attribute ของแทกนนๆ
รายการ Methodโดยทวไป Element Object จะม method ทคลายคลงกน
ศกษาเพมเตมทhttps://developer.mozilla.org/en-US/docs/Web/API/Element
การดง Element Object ตามคาใน id
5
<!DOCTYPE html><html><body>
<p id="greenplanet">All is well</p><p id="redplanet">Nothing to report</p><p id="blueplanet">All systems OK</p>
</body></html>
document.getElementById("blueplanet");
ดงเอา Element Object ทม id ชอวา blueplanet ออกมา
<html>
document
<body>
<p id="greenplanet"> <p id="blueplanet"><p id="redplanet">
"All is well" "Nothing to report" "All systems OK"
DOM ทสรางจากโคด html
การเปลยนแปลงเนอหาใน Element
6
var planet = document.getElementById("blueplanet");
planet.innerHTML = "Red Alert";
<html>
document
<body>
<p id="greenplanet"> <p id="blueplanet"><p id="redplanet">
"All is well" "Nothing to report" "All systems OK""Red Alert"
ประกาศตวแปรส าหรบเกบ Element ทดงออกมา
เปลยนแปลงขอความทอยระหวางแทกเปดและปดโดยก าหนดคาใน innerHTML
การแทรกโคด JavaScript
7
<html><body>
<p id="greenplanet">All is well</p><p id="redplanet">Nothing to report</p><p id="blueplanet">All systems OK</p>
</body></html>
<script>alert("DOM Loaded Success");var planet = document.getElementById("blueplanet");planet.innerHTML = "Red Alert";
</script>
Browser จะสราง DOM หลงจากโหลดเวบทงหนาเสรจแลว ดงนนการการเขยนโคดเพอดง Element จาก DOM จงตองท าหลงสด
กจกรรม• จากรายการแบบ unordered list 3 รายการ ซงไมมชอเพลง จงใชเตมค าสงใน
ชองวางใหครบ เพอดงโหนดบน DOM ออกมา และใสชอเพลงใหกบแตละแทก <li> ดงตวอยาง
8
<html><head><meta charset="utf-8"></head><body>
<h1>Top Chart</h1><ul id="playlist">
<li id="song1"></li><li id="song2"></li><li id="song3"></li>
</ul><script>
var s1 = document.getElementById("song1");var s2 = document.getElementById("_______");var s3 = document.getElementById("_______");s1._________ = "เรอเลกควรออกจากฝง - bodyslam";s2._________ = "ค าถามซงไรคนตอบ - Getsunova";____.innerHTML = "โปรดเถดรก - Cocktail";
</script></body></html>
Event• Event หมายถง เหตการณตางๆทเกดขณะทผใชก าลงดเวบหนา
นนๆ อย เชน– ก าลงโหลดหนาเวบ– น าเมาสวางบนภาพหรอตวอกษร– กดปมใดๆบนคยบอรด– กรอกแบบฟอรม
• การเพม attribute ทขนตนดวย onXXX ภายในแทก HTML เชน onclick, onload และระบชอฟงกชน JavaScript จะเกดการเรยกฟงกชนทก าหนดไวแบบอตโนมต ตามเกดเหตการณทก าหนดไว
9
ประเภทของ Event• Windows Event
– เหตการณทเกดกบหนาตางเวบบราวเซอร
• Mouse Event – เหตการณการใชเมาสกบสวนตางๆในหนาเวบ
• Keyboard Event– เหตการณการใชคยบอรดกบสวนตางๆในหนาเวบ
• Form Event– เหตการณทเกดกบสวนตางของฟอรม HTML
10
Windows Event
ชอ Event ค าอธบาย
onload ท างานเมอหนาเวบนนโหลดเสรจแลว
onunload ท างานเมอหนาเวบก าลงจะออกไปจากหนาเวบนน
onresize ท างานเมอหนาเวบนนถกปรบขนาด
onscroll ท างานเมอหนาเวบนนมการเลอนหนา
11
การก าหนด Event ในแทก HTML
12
<html>
<body><p id="greenplanet">All is well</p><p id="redplanet">Nothing to report</p><p id="blueplanet">All systems OK</p>
</body></html>
<head><script>
</script></head>
var planet = document.getElementById("blueplanet");planet.innerHTML = "Red Alert";
function init() {
}
1. สรางฟงกชนทรองรบเหตการณ
การยายโคดสวนดง Element Object ไปไวในแทก <head>จะตองใหโคดนนถกท าหลงจากโหลดเอกสาร HTML เสรจแลว ซงระบดวย Window Event onload
<body onload="init()">
2. ระบ Event และชอฟงกชนทจะท างานเมอหนาเวบนโหลดเสรจ
การก าหนด Event ในโคด JavaScript
13
<html>
<body onload="init()"><p id="greenplanet">All is well</p><p id="redplanet">Nothing to report</p><p id="blueplanet">All systems OK</p>
</body></html>
<head><script>
</script></head>
var planet = document.getElementById("blueplanet");planet.innerHTML = "Red Alert";
window.onload = function() {
}
1. ระบ Event
<body>
ไมตองระบ Event ภายในแทก HTML
2. สราง Anonymous Function รองรบการท างานกบ event
กจกรรม• จากกจกรรมกอนหนาน จงยายสวนของโคด JavaScript ไปสรางเปนฟงกชนในสวน <head> และก าหนดเหตการณ 2แบบ1. ก าหนด Event ในแทก HTML2. ก าหนด Event ในโคด JavaScript
14
Mouse Eventsชอ Event ค าอธบาย
onclick ท างานเมอคลกท Element
ondblclick ท างานเมอ double คลกท Element
onmousedown ท างานเมอกดปมเมาสท Element
onmouseup ท างานเมอปลอยปมเมาสท Element
onmousemove ท างานเมอตวชเคลอนผาน Element
onmouseover ท างานเมอน าตวชวางบน Element
onmouseout ท างานเมอน าตวชออกจาก Element
15
<html><head><meta charset="UTF-8"><script>function showMessage() {alert("ใกลสอบแลว อานหนงสอกนยง");
}
</script></head>
<body><img src="sunny.jpg">
</body></html>
การเพม Mouse Event ในแทก HTML
16
onmouseover="showMessage()">
window.onload = function() {var img1 = document.getElementById("img1");img1.onmouseover = showMessage;
}
การก าหนด Mouse Event ในโคด JavaScript
17
<html><head><meta charset="UTF-8"><script>function showMessage() {alert("ใกลสอบแลว อานหนงสอกนยง");
}
</script></head>
<body><img src="sunny.jpg">
</body></html>
การระบชอ function ใหกบ Event ไมตองใสวงเลบ ( )
ค าสงนอยใน window.onload เพราะตอง get element หลงจากโหลดเวบเสรจแลว
ก าหนด id ใหแทก เพอใชดงใน JavaScript
id="img1">
การก าหนด Mouse Event ทง 2 วธ
18
<html><head><script>
function showMessage() {alert("ใกลสอบแลว อานหนงสอกนยง");
}
window.onload = function() { // การดง Element ในสวน <head> ตองสรางฟงกชนทท างานหลงจากโหลดเวบเสรจแลวvar img1 = document.getElementById("img1"); // ดงเอา Element ทม id=img1 ออกมาเพอใชก าหนดเหตการณimg1.onmouseover = showMessage; // ก าหนดใหเรยก function showMessage เมอเกดเหตการณ onmouseover
}</script></head><body>
<img src="sunny.jpg" id="img1"></body></html>
<html><head><script>
function showMessage() {alert("ใกลสอบแลว อานหนงสอกนยง");
}</script></head><body>
<img src="sunny.jpg" onmouseover="showMessage()"></body></html>
การก าหนด Mouse Event ในโคด JavaScript
การก าหนด Mouse Event ในแทก HTML
การระบชอ function ใหกบ Event ไมตองใสวงเลบ ( )
กจกรรม• จากกจกรรมกอนหนาน จงเพม Mouse Event ใหกบ
Element <h1>Top Chart</h1> โดยเมอน าเมาสไปคลกทขอความใหแสดงรายชอเพลง
19
กอนคลก หลงคลก
การดงคาจากแทก <input>
20
<html><head><script>
function showText() {var inputObject = document.getElementById("b1");alert(inputObject.value);
}</script></head><body>
<input type="text" id="b1"> <b onclick="showText()">คลกฉนท</b>
</body></html>
กจกรรม• จงสราง Textfield 3 ชอง และปม 1 ปม เมอมการคลกทปมใหน าคาจากชองท 1 บวกชองท 2 แลวแสดงผลลพธชองท 3
21
<html><head><script>function checkPassword() {
// เพมการท างานทน}
</script></head><body>
<h1>Register</h1>Username: <input type="text"><br>Password: <input type="text" id="pass1"><br>Re-type Password: <input type="text" id="pass2"><br><input type="submit" onclick="checkPassword()"><div id="errormsg"></div>
</body></html>
กจกรรม• จากแบบฟอรมลงทะเบยน เมอมการกดปม submit ใหเชควา
password ในชองทงสองตรงกนหรอไม
22
Property ทวไปของโหนด Element
Property ค าอธบาย
innerHTML เนอหาทอยภายในแทกstyle เขาถงคณสมบตของ CSSclassName ชอคลาสทใชจดรปแบบใน CSS
23
การเปลยนแปลงคา CSS Property
24
<html><head><script>
function changeColor() {var planet = document.getElementById("blueplanet");planet.style.color = "red";
}</script></head><body>
<p id="greenplanet">All is well</p><p id="redplanet">Nothing to report</p><p id="blueplanet" onclick="changeColor()">All systems OK</p>
</body></html>
ก าหนด CSS property ใหเปนสแดง
รปแบบ: document.getElementById(id).style.attribute = "คา css property"
การเปลยนแปลงคา CSS Property
25
<html><head><meta charset="UTF-8"><script>
function over() {var titleObject = document.getElementById("pageTitle");titleObject.style.fontSize = "20px";
}
function out() {var titleObject = document.getElementById("pageTitle");titleObject.style.fontSize = "16px";
}</script>
</head><body>
<div id="pageTitle" onmouseover="over()" onmouseout="out()">Welcome</div></body></html>
ดง Element pageTitle ออกมา
ก าหนด Event ใหกบ Element โดยใหเรยก- ฟงกชน over เมอมเมาสมาวาง- ฟงกชน out เมอน าเมาสออก
onmouseoveronmouseout
การก าหนดคลาส CSS ให Element
26
<html><head><style>
.style1 {font-size: 20px;color: blue;
}.style2 {
font-size: 16px;color: black;
}</style><script>
function over() {var titleObject = document.getElementById("pageTitle");titleObject.className = "style1";
}function out() {
var titleObject = document.getElementById("pageTitle");titleObject.className = "style2";
}</script></head><body>
<div id="pageTitle" onmouseover="over()" onmouseout="out()">Welcome</div></body></html>
ระบชอคลาส CSS ทสรางไวแลวเขาถงชอคลาสของ Element
onmouseoveronmouseout
กจกรรม• จงเขยนเวบทมสญลกษณ + และ - เพอใชปรบขนาดของตวอกษรเมอมการคลก
27
<html><head><script>
var size = 14; // ประกาศตวแปรไวใชรวมกน ใชเกบขนาดทเพมหรอลดfunction decrease() {
// เพมโคดทน}
function increase() {// เพมโคดทน
}</script></head><body>
<h1><span onclick="decrease()">-</span> | <span onclick="increase()">+</span>
</h1><p id="p1">
If you're leavin', will you take me with you? I'm tired of talkin' on my phone There is one thing I cannever give you My heart will never be your home
</p></body></html>
Property และ Method ของ HTML Element
28
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
ด property และ method ของแทก input
Property src ของ <img>
29
<html><head><script>
function go() {var imgObject = document.getElementById("dayImage");alert(imgObject.src);imgObject.src = "cloudy.jpg";
}</script></head><body>
<img id="dayImage" src="sunny.jpg" ondblclick="go()" ></body></html>
ก าหนดชอไฟลภาพใหม
แสดง path และชอไฟลภาพเกาออกมาดกอน
ondblclick
Property src ของ <img>
30
<html><head><script>
function swapImage() {var imgObject = document.getElementById("switch");if (imgObject.src.indexOf("power_on.png") > 0) {
imgObject.src = "power_off.png";} else if (imgObject.src.indexOf("power_off.png") > 0) {
imgObject.src = "power_on.png";}
}</script></head><body>
<img id="switch" src="power_on.png" onclick="swapImage()"></body></html>
1. ระบ id ใหกบ Element ทตองการเปลยนแปลง2. ระบ Event เมอมการคลกทภาพใหเรยกฟงกชน swapImage()
3. คนหา Element ทม id เปน switch
4. เปลยนแปลงชอไฟลภาพใน Attribute src
onclick
Keyboard Eventsชอ Event ค าอธบายonkeydown ท างานเมอกดแปนพมพใดๆบนคยบอรดonkeypress ท างานเมอยงไมปลอยแปนพมพจากการกด
onkeyup ท างานเมอปลอยแปนพมพใดๆบนคยบอรด
31
*หมายเหต Keyboard Events มล ำดบกำรเกดเหตกำรณดงน 1. onkeydown2. onkeypress3. onkeyup
ตวอยาง
32
<html><head><script>
function showText() {var inputObject = document.getElementById("b1");alert(inputObject.value);
}</script></head><body>
<input type="text" id="b1" onkeyup="showText()"></body></html>
Form Eventsชอ Event ค าอธบาย
onblur ท างานเมอผใชยาย cursor ไปยง input ตวอน (loses focus)
onchange ท างานเมอเนอหา หรอตวเลอกเปลยนแปลงไป (ใชส าหรบ <input>, <select>, and <textarea>)
onfocus ท างานเมอผใชน า cursor มาวางบน input นนๆ (ใชส าหรบ <label>, <input>, <select>, <textarea>, และ <button>)
onreset ท างานเมอมการ reset form
onselect ท างานเมอผใชเลอกขอความ (ใชส าหรบ <input> และ <textarea>)
onsubmit ท างานเมอผใชสงขอมลฟอรม
33
ตวอยาง
34
<html><head><meta charset="UTF-8"><script>
function changeText() {var btnObject = document.getElementById("btn1");var textObject = document.getElementById("txt1");
textObject.style.color = btnObject.value;}
</script></head>
<body><input type="color" id="btn1" onchange="changeText()"><br><br><div id="txt1">สวสด</div>
</body></html> ระบ id ใหกบ Element
ระบ id ใหกบ Element
ขอคาสจาก Element btn1ก าหนดรปแบบสใหมให Element txt1
ระบฟงกชนใหท างานเมอมการเปลยนแปลงคาส
กจกรรม• จงเขยนฟอรมรบขอมล เมอผใชกรอกเสรจ และไปทชองอนแลวใหเปลยนสตวหนงสอในกลองขอความทกรอกแลวเปนสเขยว
35
การจดการ Element บน DOM• เวบเพจทแสดงผลไปแลวสามารถสราง Element ใหมเพมเตม แลวน าไปตอทาย Element เกาไดดวยค าสงใน JavaScript– ค าสงทใชในการสราง Element ใหม
document.createElement("ชอแทก");– ค าสงทใชในการตอทาย Element เกา
appendChild();
36
ตวอยางการสรางฟอรมเพมรายการเพลง
37
รบชอเพลง
น าชอเพลงไปเพมในรายการ
สรางฟอรมรบชอเพลง และสรางลสตเปลา
38
<html><head><meta charset="utf-8"></head><body>
<form><input type="text" id="songTextInput" ><input type="button" id="addButton" value="Add Song">
</form>
<ul id="playlist"></ul>
</body></html>
ก าหนด Event และสรางฟงกชน
39
<html><head><meta charset="utf-8"><script>
function addSong() {var textInput = document.getElementById("songTextInput");var songName = textInput.value;
alert("Adding " + songName);}
</script></head><body><form><input type="text" id="songTextInput"><input type="button" id="addButton" value="Add Song" onclick="addSong()">
</form><ul id="playlist"></ul></body></html>
ก าหนด Event เมอมการคลกทปมใหเรยกฟงกชน addSong
ดง Element songTextInput ออกมา
ดงคาทผใชกรอกในชอง Textfield ออกมา
ทดสอบแสดงคา
สราง Element ใหม
40
<html><head><meta charset="utf-8"><script>
function addSong() {var textInput = document.getElementById("songTextInput");var songName = textInput.value;
var li = document.createElement("li");li.innerHTML = songName;
}</script></head><body><form><input type="text" id="songTextInput"><input type="button" id="addButton" value="Add Song" onclick="addSong()">
</form><ul id="playlist"></ul></body></html>
1. สราง Element <li> ขนมาใหม2. น าคาไปเกบไวใน Element <li>
สราง Element ใหม
41
<html><head><meta charset="utf-8"><script>
function addSong() {var textInput = document.getElementById("songTextInput");var songName = textInput.value;
var li = document.createElement("li");li.innerHTML = songName;
var ul = document.getElementById("playlist");ul.appendChild(li);
}</script>
3. ดง Element <ul> จากหนาเวบออกมา
4. น า Element <li> ทสรางขนไปเปน Element ลก
ตวอยางการท างาน
42
<html><head><meta charset="utf-8"><script>function addSong() {
var textInput = document.getElementById("songTextInput");var songName = textInput.value;
var li = document.createElement("li");li.innerHTML = songName;
var ul = document.getElementById("playlist");ul.appendChild(li);
}</script></head><body>
<form><input type="text" id="songTextInput"><input type="button" id="addButton" value="Add Song" onclick="addSong()"></form><ul id="playlist"></ul>
</body></html>
<ul>
<li>songName
ตวอยางการท างาน
43
<html><head><meta charset="utf-8"><script>function addSong() {
var textInput = document.getElementById("songTextInput");var songName = textInput.value;
var li = document.createElement("li");li.innerHTML = songName;
var ul = document.getElementById("playlist");ul.appendChild(li);
}</script></head><body>
<form><input type="text" id="songTextInput"><input type="button" id="addButton" value="Add Song" onclick="addSong()"></form><ul id="playlist"></ul>
</body></html>
<ul>
<li> <li>songName
กจกรรม• จงสรางแบบฟอรมส าหรบกรอกขอมลลกคา เมอคลกทปมเพมแลวใหน าขอมลทงหมดใสลงในตาราง
44