Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

คอลเลกชัน scripts ของ HTML DOM

คอลเลกชัน 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>

ผลลัพธ์

โค้ดด้านบนจะให้ผลลัพธ์ดังนี้

คอลเลกชัน scripts ของ HTML DOM

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

คอลเลกชัน scripts ของ HTML DOM