DOM Document Object Model
DOM หรือ Document Object Model คือ มาตรฐานที่ใช้งาน object และ properties ของ HTML elements เรียกใช้งานผ่านโปรแกรม Java script
นิยามคำศัพท์ที่เกี่ยวข้อง DOM Element หมายถึง Tag HTML Text หมายถึง ข้อความที่จัดเก็บภายใน Element Attribute หมายถึง คุณสมบัติของ Element
การเรียกใช้งาน DOM DOM เป็นวัตถุ (Object) ซึ่งประกอบด้วย คุณสมบัติ (Property) และ พฤติกรรม ( Method) คุณสมบัติ (Property) ใช้สำหรับกำหนดค่า (Set) และ อ่านค่า (Get) จาก DOM พฤติกรรม (Method) ใช้สำหรับการกระทำกับ DOM เช่น การเพิ่ม การลบ ออก จากเอกสาร (Document)
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>
ค้นหา HTML Element by tag name var myobject=document.getElementByTagName(‘p’); ถ้า tag p มีจำนวนหลายตัว จะได้ค่าเป็น array คือ myobject[0] คือ Tag p ตัวที่ 1 myobject[1] คือ Tag p ตัวที่ 2
ค้นหา 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
ค้นหา HTML Element by ID var myobject=document.getElementById(‘show’); ถ้า Id show มีจำนวนหลายตัว จะได้ค่าเป็น array คือ myobject[0] คือ class show object ตัวที่ 1 myobject[1] คือ class show object ตัวที่ 2
เปลี่ยนค่า 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
Properties ของ style รูปแบบการใช้งาน element.style.property ตัวอย่างเช่น document.getElementById('show').style.color='red'
Properties ของ style color fontsize fontWeight fontFamily
ตัวอย่างเช่น <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>
การเปลี่ยนข้อความใน HTML โดยใช้ Dom โดยใช้ property innerHTML ตัวอย่างเช่น <html> <body> <p id="p1">Hello World!</p> <script> document.getElementById("p1").innerHTML = "New text!"; </script> </body> </html>
การเปลี่ยนค่าให้กับ Attribue document.getElementById(id).attribute = new value เช่น document.getElementById("myImage").src = "land.jpg";
HTML Event Attributes การใช้งาน EVENT ของ HTML <button onclick="displayDate()">Try it</button> การใช้ DOM เพื่อควบคุมการสั่งการ EVENT document.getElementById("myBtn").onclick = displayDate
ตัวอย่างการใช้งาน 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>
HTML Event Attributes https://www.w3schools.com/tags/ref_eventattributes.asp