JavaScript: HTMLCollection

Khóa học qua video:

Tổng quan

HTMLCollection là một giao diện (interface) đại diện cho một bộ sưu tập chung (array-like collection hay list) của các phần tử HTML và cung cấp các phương thức và thuộc tính để chọn từ danh sách. Giao diện này được gọi HTMLCollection vì lý do lịch sử (trước DOM hiện đại, các bộ sưu tập triển khai giao diện này chỉ có thể có các phần tử HTML làm phần tử của chúng).

Một HTMLCollection trong HTML DOM có trạng thái là live (đang hoạt động); nghĩa nó được tự động cập nhật khi tài liệu cơ bản được thay đổi. Vì lý do này, bạn nên tạo một bản sao (ví dụ: sử dụng Array.from) để lặp lại nếu thêm, di chuyển hoặc xóa nút.

Đặc điểm chung

Không phải mảng đầy đủ: Mặc dù HTMLCollection có thể truy cập bằng chỉ số hoặc vòng lặp, nó không phải là một mảng đầy đủ. Nó chỉ giống mảng trong việc có thể lặp qua và truy cập phần tử, nhưng không hỗ trợ tất cả các phương thức mảng.
Live Collection: HTMLCollection là luôn là "live" (đang hoạt động), nghĩa là nó sẽ tự động cập nhật khi có thay đổi trong tài liệu (document). Điều này có nghĩa là nếu tài liệu thay đổi sau khi bạn nhận được HTMLCollection, nó cũng sẽ được cập nhật tự động.
Không thể sử dụng mọi phương thức mảng: Bạn không thể sử dụng mọi phương thức mảng trực tiếp trên HTMLCollection. Tuy nhiên, bạn có thể chuyển đổi nó thành mảng để sử dụng các phương thức mảng đầy đủ.

HTMLCollection sẽ là kiểu trả về của:

Phương thức getElementsByTagName()
Phương thức getElementsByClassName()
Thuộc tính children

Thuộc tính và phương thức

length	Trả về số lượng phần tử trong HTMLCollection
item(index)	Trả về phần tử tại một chỉ mục cụ thể
namedItem(index)	Trả về phần tử với một tên cụ thể

HTMLCollection.length

Trả về số lượng phần tử trong colletion

// Lấy tất cả các thẻ <p> trong tài liệu
var paragraphs = document.getElementsByTagName('p');

// Kiểm tra số lượng phần tử trong collection
console.log(paragraphs.length); 

// Truy cập phần tử thứ nhất
var firstParagraph = paragraphs[0];

// Sử dụng phương thức item
var secondParagraph = paragraphs.item(1);

// Lặp qua tất cả các phần tử trong collection
for (var i = 0; i < paragraphs.length; i++) {
    console.log(paragraphs[i]);
}

HTMLCollection.item()

Trả về phần tử cụ thể tại chỉ mục index (bắt đầu từ 0) của danh sách. Trả về null nếu index nằm ngoài phạm vi.

Một cách thay thế cho việc truy cập collection[i] (thay vào đó sẽ trả về undefined khi i vượt quá giới hạn). Điều này chủ yếu hữu ích cho việc triển khai DOM không phải JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMLCollection.item() Example</title>
</head>
<body>
    <ul id="myList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <script>
        // Lấy danh sách các phần tử trong #myList
        var listItems = document.getElementById('myList').getElementsByTagName('li');

        // Sử dụng HTMLCollection.item() để truy cập phần tử cụ thể
        var firstItem = listItems.item(0);
        var secondItem = listItems.item(1);
        var thirdItem = listItems.item(2);
        var outOfRangeItem = listItems.item(99); // index vượt quá giới hạn

        // Hiển thị nội dung của các phần tử (nếu tồn tại)
        console.log(firstItem ? firstItem.textContent : 'Item not found');
        console.log(secondItem ? secondItem.textContent : 'Item not found');
        console.log(thirdItem ? thirdItem.textContent : 'Item not found');
        console.log(outOfRangeItem); // null, vì index vượt quá giới hạn
    </script>
</body>
</html>

HTMLCollection.namedItem()

Trả về nút cụ thể có ID hoặc tên dự phòng khớp với chuỗi được chỉ định bởi name. Việc so khớp theo tên chỉ được thực hiện như là phương sách cuối cùng, chỉ trong HTML và chỉ khi phần tử được tham chiếu hỗ trợ name thuộc tính đó. Trả về null nếu không có nút nào tồn tại theo tên đã cho.

Một cách thay thế cho việc truy cập là collection[name] (thay vào đó trả về undefined khi name không tồn tại). Điều này chủ yếu hữu ích cho việc triển khai DOM không phải JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>namedItem Example</title>
</head>
<body>
    <ul id="myList">
        <li id="item1">Apple</li>
        <li id="item2">Banana</li>
        <li id="item3">Cherry</li>
    </ul>
    <script>
         // Lấy danh sách các phần tử trong #myList
         var listItems = document.getElementById('myList').getElementsByTagName('li');

         // Sử dụng HTMLCollection.namedItem() để truy cập phần tử theo tên
         var appleItem = listItems.namedItem('item1');
         var bananaItem = listItems.namedItem('item2');
         var cherryItem = listItems.namedItem('item3');
         var nonExistentItem = listItems.namedItem('item4'); // phần tử không tồn tại

         // Hiển thị nội dung của các phần tử (nếu tồn tại)
         console.log(appleItem ? appleItem.textContent : 'Item not found');
         console.log(bananaItem ? bananaItem.textContent : 'Item not found');
         console.log(cherryItem ? cherryItem.textContent : 'Item not found');
         console.log(nonExistentItem); // null, vì phần tử không tồn tại
    </script>
</body>
</html

» Tiếp: NodeList

« Trước: Tìm kiếm sử dụng AJAX

Khóa học qua video:

Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript

Đăng ký Hội viên

Tất cả các video dành cho hội viên