คอลเลกชัน scripts ของ HTML DOM จะคืนค่าคอลเลกชันขององค์ประกอบ <script> ทั้งหมดในเอกสาร HTML
รูปแบบการใช้งาน (Syntax)
document.scripts
คุณสมบัติของออบเจ็กต์ script
| คุณสมบัติ | คำอธิบาย |
|---|---|
| length | คืนค่าจำนวนองค์ประกอบ <script> ในคอลเลกชันภายในเอกสาร HTML |
เมธอดของออบเจ็กต์ script
| เมธอด | คำอธิบาย |
|---|---|
| [index] | คืนค่าองค์ประกอบ <script> ที่ระบุด้วยดัชนี (index) จากคอลเลกชัน |
| item(index) | คืนค่าองค์ประกอบ <script> ที่ระบุด้วยดัชนี (index) จากคอลเลกชัน |
| namedItem(id) | คืนค่าองค์ประกอบ <script> ที่ระบุด้วย id จากคอลเลกชัน |
ตัวอย่างการใช้งาน
ตัวอย่างด้านล่างแสดงการใช้งานคอลเลกชัน scripts
<!DOCTYPE html> <html> <head> <style> html{ height:100%; } body{ text-align:center; color:#fff; background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat; height:100%; } p{ font-weight:700; font-size:1.2rem; } ul{ list-style-type: none; padding:0; } .btn{ background:#0197F6; border:none; height:2rem; border-radius:2px; width:50%; margin:2rem auto; display:block; color:#fff; outline:none; cursor:pointer; } .show{ font-size:1.5rem; font-weight:bold; } </style> </head> <body> <script> console.log("script one"); </script> <h1>สาธิตคอลเลกชัน DOM scripts</h1> <p>สวัสดี มีองค์ประกอบ script 2 ตัวในหน้านี้:</p> <script> console.log("script two"); </script> <button onclick="show()" class="btn">แสดงจำนวน Script</button> <div class='show'></div> <script> function show() { var scriptList = document.scripts; document.querySelector(".show").innerHTML=scriptList.length; } </script> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะให้ผลลัพธ์ดังนี้

คลิกที่ปุ่ม "แสดงจำนวน Script" เพื่อแสดงจำนวนองค์ประกอบ script
