Computer >> Máy Tính >  >> Lập trình >> HTML

Bộ sưu tập HTML DOM Anchor

Bộ sưu tập HTML DOM Anchor được sử dụng để trả về bộ sưu tập của tất cả các thẻ liên kết () có trong tài liệu HTML của chúng tôi. Nó sẽ chỉ đếm các liên kết nếu chúng có thuộc tính tên được liên kết với chúng. Tuy nhiên, thuộc tính name không được dùng trong HTML5 hiện tại. Các phần tử xuất hiện theo thứ tự giống như chúng có trong tài liệu nguồn html.

Thuộc tính

Sau đây là các thuộc tính của bộ sưu tập Anchor.

Thuộc tính
Mô tả
length
Nó sẽ trả về số lượng liên kết () trong tài liệu html của chúng tôi.

Phương pháp

Sau đây là các phương pháp thu thập Anchor.

Phương thức
Mô tả
[Chỉ mục]
Nó sẽ trả về liên kết tại chỉ mục được chỉ định. Chỉ số bắt đầu từ 0 và theo thứ tự từ trên xuống dưới. Null sẽ được trả lại nếu không có mặt hàng được tìm thấy.
item (index)
Nó sẽ trả về liên kết tại chỉ mục được chỉ định. Chỉ mục bắt đầu từ 0. Giá trị rỗng sẽ được trả về nếu không tìm thấy mục nào.
NameItem (id):
Nó sẽ trả về liên kết từ bộ sưu tập với id được chỉ định. Giá trị sẽ được trả lại nếu không tìm thấy mục nào.

Cú pháp

Sau đây là cú pháp -

Để nhận bộ sưu tập neo.

document.anchors

Lưu ý - Không thể đặt bộ sưu tập neo vì chúng ở chế độ chỉ đọc.

Ví dụ

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

<!DOCTYPE html>
<html>
<body>
<a name="example">Sample1</a><br>
<a name="example1">Sample2</a><br>
<a name="example2">Sample3</a><br>
<p>Click the button to get first link text in the above list</p>
<button onclick="getCollection()">Collection</button>
<button onclick="getLength()">Length</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>

Đầu ra

Nó sẽ tạo ra kết quả sau -

Bộ sưu tập HTML DOM Anchor

Khi nhấp vào nút “Bộ sưu tập” -

Bộ sưu tập HTML DOM Anchor

Khi nhấp vào nút “Độ dài” -

Bộ sưu tập HTML DOM Anchor

Trong ví dụ trên -

Chúng tôi có ba liên kết với thuộc tính name lần lượt là example, example1 và example2

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

Sau đó, chúng ta có hai nút collection và độ dài để thực thi các hàm getCollection () và getLength () tương ứng.

<button onclick="getCollection()">Collection</button>
<button onclick="getLength()">Length</button>

Hàm getCollection () trả về văn bản thẻ liên kết ở vị trí chỉ mục 0, trong trường hợp của chúng ta là Sample1. Hàm getLength () trả về độ dài của văn bản liên kết. Ở đây văn bản liên kết là Sample1 nên độ dài trả về là 7.