DOM - Khon Kaen University 4.pdfElement Object • Element Object เป น object ท เ บ อ ม ล องแต ละ Element ในหน าเว บาร ด ง Element

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

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>


function showMessage() {alert("ใกลสอบแลว อานหนงสอกนยง");


<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


function showText() {var inputObject = document.getElementById("b1");alert(inputObject.value);


<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


function changeColor() {var planet = document.getElementById("blueplanet");planet.style.color = "red";


<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";


<div id="pageTitle" onmouseover="over()" onmouseout="out()">Welcome</div></body></html>

ระบชอคลาส CSS ทสรางไวแลวเขาถงชอคลาสของ Element

onmouseoveronmouseout

กจกรรม• จงเขยนเวบทมสญลกษณ + และ - เพอใชปรบขนาดของตวอกษรเมอมการคลก

27


var size = 14; // ประกาศตวแปรไวใชรวมกน ใชเกบขนาดทเพมหรอลดfunction decrease() {

// เพมโคดทน}

function increase() {// เพมโคดทน


<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

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

Property src ของ <img>

29


function go() {var imgObject = document.getElementById("dayImage");alert(imgObject.src);imgObject.src = "cloudy.jpg";


<img id="dayImage" src="sunny.jpg" ondblclick="go()" ></body></html>

ก าหนดชอไฟลภาพใหม

แสดง path และชอไฟลภาพเกาออกมาดกอน

ondblclick

Property src ของ <img>

30


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";}


<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


function showText() {var inputObject = document.getElementById("b1");alert(inputObject.value);


<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



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




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;




<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;




<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

Documents

DOM - Khon Kaen University 4.pdfElement Object • Element Object เป น object ท เ บ อ ม ล องแต ละ Element ในหน าเว บาร ด ง Element