Bộ sưu tập Anchor trong HTML DOM

Bộ sưu tập Anchor trong HTML DOM được dùng để trả về bộ sưu tập tất cả các thẻ anchor (<a>) có trong tài liệu HTML. Nó chỉ đếm các link nếu chúng có thuộc tính name đi kèm. Thuộc tính name tuy nhiên đã bị lỗi thời trong HTML5 hiện tại. Các phần tử xuất hiện theo cùng thứ tự như chúng có trong tài liệu HTML nguồn.

Thuộc tính

Dưới đây là các thuộc tính của bộ sưu tập Anchor:

Thuộc tính	Mô tả
length	Trả về số lượng link (`<a>`) trong tài liệu HTML.

Phương thức

Dưới đây là các phương thức của bộ sưu tập Anchor:

Phương thức	Mô tả
[Index]	Trả về link tại index chỉ định. Index bắt đầu từ 0 và theo thứ tự từ trên xuống. Trả về Null nếu không tìm thấy.
item(index)	Trả về link tại index chỉ định. Index bắt đầu từ 0. Trả về Null nếu không tìm thấy.
namedItem(id):	Trả về link từ bộ sưu tập với id chỉ định. Trả về Null nếu không tìm thấy.

Cú pháp

Để lấy bộ sưu tập anchor:

document.anchors

Lưu ý - Bộ sưu tập Anchor không thể thiết lập vì chúng là read-only.

Ví dụ

Dưới đây là ví dụ cho bộ sưu tập anchor:

<!DOCTYPE html> <html> <body> <a name="example">Sample1</a><br> <a name="example1">Sample2</a><br> <a name="example2">Sample3</a><br> <p>Click nút để lấy văn bản link đầu tiên trong danh sách trên</p> <button onclick="getCollection()">Bộ sưu tập</button> <button onclick="getLength()">Độ dài</button> <p id="sample"></p> <script>    function getCollection() {       var x = document.anchors[0].innerHTML;       document.getElementById("sample").innerHTML = x;    }    function getLength() {       var x = document.anchors[0].innerHTML.length;       document.getElementById("sample").innerHTML = x;    } </script> </body> </html>

Kết quả

Ví dụ này sẽ cho kết quả sau:

Bộ sưu tập Anchor trong HTML DOM

Khi click nút “Bộ sưu tập”:

Bộ sưu tập Anchor trong HTML DOM

Khi click nút “Độ dài”:

Bộ sưu tập Anchor trong HTML DOM

Giải thích ví dụ:

Chúng ta có ba link với thuộc tính name bằng example, example1 và example2 tương ứng:

<a name="example">Sample1</a><br> <a name="example1">Sample2</a><br> <a name="example2">Sample3</a> <br>

Sau đó có hai nút collection và length để thực thi getCollection() và getLength() tương ứng:

<button onclick="getCollection()">Bộ sưu tập</button> <button onclick="getLength()">Độ dài</button>

Hàm getCollection() trả về văn bản thẻ anchor tại vị trí index 0 (Sample1). Hàm getLength() trả về độ dài văn bản link (Sample1 có độ dài 7).