Bộ sưu tập nhúng DOM HTML

Bộ sưu tập nhúng DOM HTML được sử dụng để trả về số lượng đối tượng có trong mảng nhúng [] trong tài liệu HTML của chúng tôi. Các phần tử trong bộ sưu tập hiển thị theo thứ tự giống như chúng xuất hiện trong tài liệu HTML.

Thuộc tính

Sau đây là thuộc tính cho bộ sưu tập nhúng -

Thuộc tính	Mô tả
length	Để trả về số lượng phần tử có trong tập hợp. Bạn không thể thay đổi giá trị thuộc tính này vì nó ở chế độ chỉ đọc.

Phương pháp

Sau đây là các phương pháp cho bộ sưu tập nhúng -

Phương pháp	Mô tả
[index]	Để trả về phần tử trong bộ sưu tập với chỉ mục đã cho. Lập chỉ mục bắt đầu từ 0 và null được trả về nếu số chỉ mục nằm ngoài phạm vi.
item (index)	Để trả về phần tử từ bộ sưu tập với chỉ mục đã cho. Lập chỉ mục bắt đầu từ 0 và null được trả về nếu số chỉ mục nằm ngoài phạm vi.
NameItem	Để trả về phần tử từ tập hợp có id đã cho được liên kết với nó. Null được trả về nếu id đã cho không tồn tại.

Cú pháp

Sau đây là cú pháp cho bộ sưu tập nhúng -

document.embeds

Ví dụ

Hãy để chúng tôi xem xét một ví dụ cho bộ sưu tập HTML DOM nhúng -

<!DOCTYPE html>
<html>
<head>
<style>
   .EMB{
      width:200px;
      height:200px;
      border:4px solid blue;
   }
</style>
</head>
<body>
<h1>Embeds collection example</h1>
<p>Get the number of embeds element in this document by clicking the below button.</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 ="The number of embed elements in this document are " + e;
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Bộ sưu tập nhúng DOM HTML

Khi nhấp vào nút NHẬN ĐẾM -

Bộ sưu tập nhúng DOM HTML

Trong ví dụ trên -

Chúng tôi đã tạo hai phần tử nhúng có kiểu css được áp dụng cho chúng dựa trên giá trị thuộc tính lớp chung của chúng -

.EMB{
   width:200px;
   height:200px;
   border:4px solid blue;
}
<embed class="EMB" src="Text-collection.pdf">
<embed class="EMB" src="Text-collection.pdf">

Sau đó, chúng tôi đã tạo nút GET COUNT sẽ thực thi phương thức embedsNo () khi được người dùng nhấp vào -

<button onclick="embedsNo()">GET COUNT</button>

Phương thức embedsNo () nhận giá trị thuộc tính embeds.length và gán nó cho biến e. Vì chỉ có hai phần tử trong tài liệu của chúng tôi, nên embeds.length sẽ trả về 2.

Giá trị này sau đó được hiển thị trong đoạn có id “Sample” và đặt giá trị thuộc tính innerHTML của nó thành văn bản dự định -

function embedsNo() {
   var e = document.embeds.length;
   document.getElementById("Sample").innerHTML ="The number of embed elements it this document are " + e;
}