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>
