คอลเลกชัน JavaScript DOM

สารบัญ

วัตถุ HTMLCollection

วิธีการ getElementsByTagName() ส่งคืนอ็อบเจ็กต์ HTMLCollection

วัตถุ HTMLCollection คือ รายการแบบอาร์เรย์ (คอลเลกชัน) ขององค์ประกอบ HTML

รหัสต่อไปนี้เลือกองค์ประกอบ <p> ทั้งหมดในเอกสาร:

ตัวอย่าง

const myCollection = document.getElementsByTagName("p");

องค์ประกอบในคอลเลกชันสามารถเข้าถึงได้ด้วยหมายเลขดัชนี

เพื่อเข้าถึง องค์ประกอบ <p> ที่สองที่คุณสามารถเขียนได้:

myCollection[1]

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Norway!</p>

<p id="demo"></p>

<script>
const myCollection = document.getElementsByTagName("p");

document.getElementById("demo").innerHTML = "The innerHTML of the second paragraph is: " + myCollection[1].innerHTML;

</script>

</body>
</html>

หมายเหตุ: ดัชนีเริ่มต้นที่ 0

HTML HTMLความยาวคอลเลกชัน

length คุณสมบัติกำหนดจำนวนขององค์ประกอบใน HTMLCollection:

ตัวอย่าง

myCollection.length

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Norway!</p>

<p id="demo"></p>

<script>
const myCollection = document.getElementsByTagName("p");

document.getElementById("demo").innerHTML = "This document contains " + myCollection.length + " paragraphs.";

</script>

</body>
</html>

คุณสมบัติ length มีประโยชน์เมื่อคุณต้องการวนซ้ำองค์ประกอบใน ของสะสม:

ตัวอย่าง

เปลี่ยนสีข้อความของทั้งหมด <p> องค์ประกอบ:

const myCollection = document.getElementsByTagName("p");
for (let i = 0; i < myCollection.length; i++) {
  myCollection[i].style.color = "red";
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Norway!</p>

<p>Click the button to change the color of all p elements.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  const myCollection = document.getElementsByTagName("p");
  for (let i = 0; i < myCollection.length; i++) {
    myCollection[i].style.color = "red";
  }
}
</script>

</body>
</html>

HTMLCollection ไม่ใช่อาร์เรย์!

HTMLCollection อาจมีลักษณะ เหมือนอาร์เรย์แต่มันไม่ใช่

คุณสามารถวนซ้ำรายการและอ้างอิงถึง องค์ประกอบที่มีตัวเลข (เช่นเดียวกับอาร์เรย์)

อย่างไรก็ตาม คุณไม่สามารถใช้วิธีการอาร์เรย์เช่น valueOf(), pop(), push() หรือ join() บน HTMLCollection