1. Dom Collections trong JavaScript là gì?

Dom Collections hay HTML Collections là một đối tượng giống mảng đại diện cho một tập hợp các phần tử HTML được trích xuất từ document . Nó luôn hoạt động và có thứ tự. Có nghĩa là các sửa đổi đối với DOM được tự động áp dụng cho các phần tử của elements .

Một đối tượng HTML Collections là một danh sách tập hợp các phần tử và nó có vẻ giống như mảng. Nhưng khi ta sử dụng forEach() , push() hoặc join() trên HTML Collection, ta sẽ gặp các loại lỗi khác nhau.

2. Tạo một HTML Collections trong JavaScript

Phương thức getElementsByTagName() sẽ trả về một đối tượng HTML Collections

Ví dụ: chọn tất cả thẻ <p> trong document

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

Các phần tử trong elements có thể được truy cập bằng số chỉ mục, tên hoặc id . Để truy cập phần tử <p> thứ 2 ta có thể viết như sau:

<h2>JavaScript</h2>

<p>Hello World!</p>

<p>Lập Trình Từ Đầu!</p>

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

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

document.getElementById("demo").innerHTML = "HTML bên trong của đoạn thứ hai là: " + myCollection[1].innerHTML;

</script>

3. Độ dài của HTML Collections trong JavaScript

Ta có thể dùng thuộc tính length để xác định tổng số phần tử bên trong HTML Collections .

Ví dụ:

<h2>JavaScript</h2>

<p>Hello World!</p>

<p>Lập Trình Từ Đầu!</p>

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

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

document.getElementById("demo").innerHTML = "Tài liệu này chứa " + myCollection.length + " đoạn văn.";

</script>

Ngoài ra, thuộc tính length rất hữu ích khi ta muốn lặp qua phần tử trong một tập hợp

<h2>JavaScript</h2>

<p>Hello World!</p>

<p>Lập Trình Từ Đầu!</p>

<p>Nhấp vào nút để thay đổi màu của tất cả các phần tử p</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 = "Blue";
  }
}
</script>

4. Lặp lại một HTML Collections trong JavaScript

Ngoài vòng lặp for đơn giản như trên thì ta có thể sử dụng for of để lặp lại một HTML Collections . Nhưng nó lại không hỗ trợ sử dụng forEach() . Thay vào đó ta có thể sử dụng Array.from() để chuyển đổi HTML Collections thành một mảng bình thường và sau đó sử dụng forEach() để lặp lại nó.

Ví dụ: Sử dụng for of

const elems = document.getElementsByTagName('p');

// lặp lại bằng cách sử dụng vòng lặp for ... of
for (const p of elems) {
    document.write(p.innerText);
}

Sử dụng foreach

const elems = document.getElementsByTagName('p');

// lặp lại bằng forEach ()
Array.from(elems).forEach((p, index) => {
    document.write(p.innerText);
});

5. Các phương thức khác với HTML Collections

Ta có thể sử dụng namedItem() của HTML Collections để trả về element đầu tiên của collention có id hoặc name khớp với tên được chỉ định. Nếu không tìm thấy phần tử nào phù hợp thì sẽ tự trả về null

Cú pháp: const item = collection.namedItem(key);

Với key là một chuỗi đại diện cho giá trị của thuộc tính id hoặc name của phần tử mà chúng ta đang tìm kiếm. Item là từ khóa đầu tiên element khớp HTMLCollection hoặc null nếu không có phần tử nào.

Ví dụ:

<div id="personal">
  <span name="title">Dr.</span>
  <span name="firstname">Thành</span>
  <span name="lastname">Nguyễn</span>
</div>
<script>
 const container = document.getElementById('personal');
 // Trả về HTMLSpanElement với tên "title" nếu không có phần tử nào như vậy tồn tại null được trả về
 const titleSpan = container.children.namedItem('title');
 // Các biến thể sau trả về không xác định thay vì null nếu không có phần tử nào có tên hoặc id phù hợp
 const firstnameSpan = container.children['firstname'];
 const lastnameSpan = container.children.lastname;
</script>

Ta có thể sử dụng phương thức HTMLCollection.item() để biêt được nút ở vị trí bù mà đã được chỉ định vào collection . Trả về null nếu index nằm ngoài phạm vi.

Cú pháp: var element = HTMLCollection.item(index)

Với index là vị trí của node được trả lại. Các phần tử xuất hiện theo HTML Collections cùng một thứ tự mà chúng xuất hiện trong nguồn document . Tại chỉ mục node được chỉ định trả về null nếu index nhỏ hơn 0 hoặc lớn hơn hoặc bằng thuộc tính length

Ví dụ:

var c = document.images;  
var img0 = c.item(0);     // có thể sử dụng phương thức item () theo cách này
var img1 = c[1];          // Nhưng ký hiệu này dễ dàng hơn và phổ biến hơn