Javaบทช่วยสอนสคริปต์ DOM พร้อมตัวอย่าง

โดย: เจมส์ ฮาร์ทแมน เจมส์ ฮาร์ทแมน
Hours วันที่อัพเดท

DOM คืออะไร Javaสคริปต์?

Javaสคริปต์สามารถเข้าถึงองค์ประกอบทั้งหมดในเว็บเพจได้โดยใช้ Document Object Model (DOM) ในความเป็นจริง เว็บเบราว์เซอร์จะสร้าง DOM ของเว็บเพจเมื่อโหลดหน้าเพจขึ้นมา โดย DOM Model จะถูกสร้างขึ้นเป็นแผนผังของอ็อบเจ็กต์ดังนี้:

DOM ใน Javaต้นฉบับ

วิธีใช้ DOM และเหตุการณ์

ใช้ DOM Javaสคริปต์สามารถทำงานหลายอย่างได้ สามารถสร้างองค์ประกอบและแอตทริบิวต์ใหม่ เปลี่ยนองค์ประกอบและแอตทริบิวต์ที่มีอยู่ หรือแม้แต่ลบองค์ประกอบและแอตทริบิวต์ที่มีอยู่ Javaต้นฉบับ ยังสามารถตอบสนองต่อเหตุการณ์ที่มีอยู่และสร้างเหตุการณ์ใหม่ในเพจได้

getElementById ตัวอย่าง HTML ภายใน

  1. getElementById: เพื่อเข้าถึงองค์ประกอบและคุณลักษณะที่มีการตั้งค่า ID
  2. 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>

ตัวอย่างตัวจัดการเหตุการณ์

  1. createElement: เพื่อสร้างองค์ประกอบใหม่
  2. RemoveChild: ลบองค์ประกอบ
  3. คุณสามารถเพิ่ม จัดการเหตุการณ์ ไปยังองค์ประกอบเฉพาะเช่นนี้:
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>