Javaบทช่วยสอนสคริปต์ DOM พร้อมตัวอย่าง
DOM คืออะไร Javaสคริปต์?
Javaสคริปต์สามารถเข้าถึงองค์ประกอบทั้งหมดในเว็บเพจได้โดยใช้ Document Object Model (DOM) ในความเป็นจริง เว็บเบราว์เซอร์จะสร้าง DOM ของเว็บเพจเมื่อโหลดหน้าเพจขึ้นมา โดย DOM Model จะถูกสร้างขึ้นเป็นแผนผังของอ็อบเจ็กต์ดังนี้:
วิธีใช้ DOM และเหตุการณ์
ใช้ DOM Javaสคริปต์สามารถทำงานหลายอย่างได้ สามารถสร้างองค์ประกอบและแอตทริบิวต์ใหม่ เปลี่ยนองค์ประกอบและแอตทริบิวต์ที่มีอยู่ หรือแม้แต่ลบองค์ประกอบและแอตทริบิวต์ที่มีอยู่ Javaต้นฉบับ ยังสามารถตอบสนองต่อเหตุการณ์ที่มีอยู่และสร้างเหตุการณ์ใหม่ในเพจได้
getElementById ตัวอย่าง HTML ภายใน
- getElementById: เพื่อเข้าถึงองค์ประกอบและคุณลักษณะที่มีการตั้งค่า ID
- innerHTML: เพื่อเข้าถึงเนื้อหาขององค์ประกอบ
ลองตัวอย่างนี้ด้วยตัวเอง:
<html> <head> <title>DOM!!!</title> </head> <body> <h1 id="one">Welcome</h1> <p>This is the welcome message.</p> <h2>Technology</h2> <p>This is the technology section.</p> <script type="text/javascript"> var text = document.getElementById("one").innerHTML; alert("The first heading is " + text); </script> </body> </html>
ตัวอย่าง getElementsByTagName
getElementsByTagName: เพื่อเข้าถึงองค์ประกอบและคุณลักษณะโดยใช้ชื่อแท็ก วิธีนี้จะส่งคืนไฟล์ แถว ของรายการทั้งหมดที่มีชื่อแท็กเดียวกัน
ลองตัวอย่างนี้ด้วยตัวเอง:
<html> <head> <title>DOM!!!</title> </head> <body> <h1>Welcome</h1> <p>This is the welcome message.</p> <h2>Technology</h2> <p id="second">This is the technology section.</p> <script type="text/javascript"> var paragraphs = document.getElementsByTagName("p"); alert("Content in the second paragraph is " + paragraphs[1].innerHTML); document.getElementById("second").innerHTML = "The orginal message is changed."; </script> </body> </html>
ตัวอย่างตัวจัดการเหตุการณ์
- createElement: เพื่อสร้างองค์ประกอบใหม่
- RemoveChild: ลบองค์ประกอบ
- คุณสามารถเพิ่ม จัดการเหตุการณ์ ไปยังองค์ประกอบเฉพาะเช่นนี้:
document.getElementById(id).onclick=function() { lines of code to be executed }
OR
document.getElementById(id).addEventListener("click", functionname)
ลองตัวอย่างนี้ด้วยตัวเอง:
<html> <head> <title>DOM!!!</title> </head> <body> <input type="button" id="btnClick" value="Click Me!!" /> <script type="text/javascript"> document.getElementById("btnClick").addEventListener("click", clicked); function clicked() { alert("You clicked me!!!"); } </script> </body> </html>