คอลเลกชัน embeds ใน HTML DOM

คอลเลกชัน embeds ใน HTML DOM ใช้สำหรับคืนค่าจำนวนออบเจ็กต์ <embed> ที่มีอยู่ในเอกสาร HTML องค์ประกอบในคอลเลกชันจะเรียงลำดับตามลำดับที่ปรากฏในเอกสาร

คุณสมบัติ (Properties)

คุณสมบัติ	คำอธิบาย
length	คืนค่าจำนวนองค์ประกอบ `<embed>` ในคอลเลกชัน คุณสมบัตินี้เป็นแบบอ่านอย่างเดียว (read-only) จึงไม่สามารถเปลี่ยนค่าได้

เมธอด (Methods)

เมธอด	คำอธิบาย
[index]	คืนค่าองค์ประกอบ `<embed>` ในคอลเลกชันตามดัชนีที่ระบุ เริ่มนับจาก 0 คืนค่า `null` หากดัชนีอยู่นอกช่วง
item(index)	คืนค่าองค์ประกอบ `<embed>` จากคอลเลกชันตามดัชนีที่ระบุ เริ่มนับจาก 0 คืนค่า `null` หากดัชนีอยู่นอกช่วง
namedItem(name)	คืนค่าองค์ประกอบ `<embed>` จากคอลเลกชันที่มี `id` ตรงกับที่ระบุ คืนค่า `null` หากไม่พบ `id` ที่ระบุ

ไวยากรณ์ (Syntax)

document.embeds

ตัวอย่าง

ตัวอย่างการใช้งานคอลเลกชัน embeds ใน HTML DOM:

<!DOCTYPE html>
<html>
<head>
<style>
  .EMB {
    width: 200px;
    height: 200px;
    border: 4px solid blue;
  }
</style>
</head>
<body>
<h1>ตัวอย่างคอลเลกชัน embeds</h1>
<p>คลิกปุ่มด้านล่างเพื่อดูจำนวนองค์ประกอบ embed ในเอกสารนี้</p>
<embed class="EMB" src="Text-collection.pdf">
<embed class="EMB" src="Text-collection.pdf">
<br><br>
<button onclick="embedsNo()">GET COUNT</button>
<p id="Sample"></p>
<script>
  function embedsNo() {
    var e = document.embeds.length;
    document.getElementById("Sample").innerHTML = "จำนวนองค์ประกอบ embed ในเอกสารนี้คือ " + e;
  }
</script>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บจะแสดงสององค์ประกอบ embed ที่มีกรอบสีน้ำเงิน

เมื่อคลิกปุ่ม "GET COUNT" จะแสดงข้อความ: "จำนวนองค์ประกอบ embed ในเอกสารนี้คือ 2"

คำอธิบายโค้ด

สร้างองค์ประกอบ <embed> สองตัวพร้อมคลาส CSS .EMB สำหรับการจัดรูปแบบ
สร้างปุ่ม "GET COUNT" ที่เรียกใช้ฟังก์ชัน embedsNo() เมื่อคลิก
ฟังก์ชัน embedsNo() ใช้ document.embeds.length เพื่อนับจำนวนองค์ประกอบ embed และแสดงผลในย่อหน้าที่มี id="Sample"