ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
DOM Document Object Model
2
DOM หรือ Document Object Model
คือ มาตรฐานที่ใช้งาน object และ properties ของ HTML elements เรียกใช้งานผ่านโปรแกรม Java script
3
นิยามคำศัพท์ที่เกี่ยวข้อง DOM
Element หมายถึง Tag HTML Text หมายถึง ข้อความที่จัดเก็บภายใน Element Attribute หมายถึง คุณสมบัติของ Element
4
การเรียกใช้งาน DOM DOM เป็นวัตถุ (Object) ซึ่งประกอบด้วย คุณสมบัติ (Property) และ พฤติกรรม ( Method) คุณสมบัติ (Property) ใช้สำหรับกำหนดค่า (Set) และ อ่านค่า (Get) จาก DOM พฤติกรรม (Method) ใช้สำหรับการกระทำกับ DOM เช่น การเพิ่ม การลบ ออก จากเอกสาร (Document)
5
Html object document.anchors Tag <a> document.body
Tag <body> document.documentElement Tag ภายใน <html> ทั้งหมด document.embeds Tag <embed> เช่น Flash document.forms Tag <form> document.head Tag <head> document.images Tag <img> document.links Tag <a> ที่มี attribute ชื่อ href ถูกระบุไว้ document.scripts Tag <script> document.title Tag <title>
6
ค้นหา HTML Element by tag name
var myobject=document.getElementByTagName(‘p’); ถ้า tag p มีจำนวนหลายตัว จะได้ค่าเป็น array คือ myobject[0] คือ Tag p ตัวที่ 1 myobject[1] คือ Tag p ตัวที่ 2
7
ค้นหา HTML Element by class name
var myobject=document.getElementByClassName(‘show’); ถ้า class show มีจำนวนหลายตัว จะได้ค่าเป็น array คือ myobject[0] คือ class show object ตัวที่ 1 myobject[1] คือ class show object ตัวที่ 2
8
ค้นหา HTML Element by ID
var myobject=document.getElementById(‘show’); ถ้า Id show มีจำนวนหลายตัว จะได้ค่าเป็น array คือ myobject[0] คือ class show object ตัวที่ 1 myobject[1] คือ class show object ตัวที่ 2
9
เปลี่ยนค่า Properties ของ object
สมมติให้ x คือ node object ใน HTML สามารถเปลี่ยนค่า properties ดังนี้ x.innerHTML - the text value of x x.nodeName - the name of x x.nodeValue - the value of x x.parentNode - the parent node of x x.childNodes - the child nodes of x x.attributes - the attributes nodes of x
10
Properties ของ style รูปแบบการใช้งาน element.style.property
ตัวอย่างเช่น document.getElementById('show').style.color='red'
11
Properties ของ style color fontsize fontWeight fontFamily
12
ตัวอย่างเช่น <html> <head> <meta charset="utf-8">
<title>DOM</title> </head> <body> <H1 name="show" id="show">Document Object Model</H1> <INPUT TYPE="BUTTON" NAME="BTN" VALUE="เปลี่ยนสีตัวอักษรสีน้ำเงิน" onclick="document.getElementById('show').style.color='blue'"> <INPUT TYPE="BUTTON" NAME="BTN" VALUE="เปลี่ยนสีตัวอักษรสีแดง" onclick="document.getElementById('show').style.color='red'"> </body> </html>
13
การเปลี่ยนข้อความใน HTML โดยใช้ Dom
โดยใช้ property innerHTML ตัวอย่างเช่น <html> <body> <p id="p1">Hello World!</p> <script> document.getElementById("p1").innerHTML = "New text!"; </script> </body> </html>
14
การเปลี่ยนค่าให้กับ Attribue
document.getElementById(id).attribute = new value เช่น document.getElementById("myImage").src = "land.jpg";
15
HTML Event Attributes การใช้งาน EVENT ของ HTML
<button onclick="displayDate()">Try it</button> การใช้ DOM เพื่อควบคุมการสั่งการ EVENT document.getElementById("myBtn").onclick = displayDate
16
ตัวอย่างการใช้งาน EVENT (onmouseover onmouseout)
<!DOCTYPE html> <html> <head> <title></title> <style> div{ background-color:#D94A38; width:120px; height:20px; padding:40px; } </style> </head> <body> <div onmouseover="mOver(this)" onmouseout="mOut(this)"> Mouse Over Me </div> <script> function mOver(obj) {obj.innerHTML = "Thank You";} function mOut(obj) {obj.innerHTML = "Mouse Over Me";} </script></body></html>
17
HTML Event Attributes
งานนำเสนอที่คล้ายกัน
![ASP [#12] ตัวอย่าง VBScript เพื่อใช้ตรวจสอบค่าบนฟอร์ม](/8/2095154/big_thumb.jpg "ASP [#12] ตัวอย่าง VBScript เพื่อใช้ตรวจสอบค่าบนฟอร์ม>")
