Hiển thị tất cả các liên kết (href) từ thẻ bằng JavaScript
JavaScript Examples | by
Trong phát triển web, thẻ <a> (anchor) là một trong những phần tử HTML quan trọng, dùng để tạo các liên kết giữa các trang hoặc tài nguyên khác nhau. Việc truy xuất và xử lý các liên kết này không chỉ cần thiết cho các tác vụ như kiểm tra dữ liệu, phân tích trang, mà còn rất hữu ích trong việc xây dựng các chức năng động như lọc liên kết, tạo danh sách menu, hoặc thu thập dữ liệu.
Trong bài tập này, minh· sẽ sử dụng JavaScript để lấy ra tất cả các thẻ <a> trên trang web, đọc thuộc tính href từ mỗi thẻ và hiển thị toàn bộ danh sách liên kết đó ra console hoặc giao diện người dùng. Đây là một bài tập đơn giản nhưng giúp người học rèn luyện kỹ năng làm việc với DOM và dữ liệu HTML một cách hiệu quả.
Yêu cầu bài tập các liên kết (href) từ thẻ <a> bằng JavaScript
Bài tập này yêu cầu người học thực hiện các thao tác sau để hiểu rõ hơn về cách truy xuất và thao tác với các thẻ <a> trong tài liệu HTML:
Truy xuất tất cả các thẻ <a> trong tài liệu:
-
Sử dụng JavaScript để lấy tất cả các thẻ
<a>có trong trang web. Để làm điều này, bạn có thể sử dụng các phương thức DOM như:-
document.getElementsByTagName('a')để lấy tất cả các thẻ<a>. -
Hoặc
document.querySelectorAll('a')nếu muốn có cú pháp dễ đọc và linh hoạt hơn. Cả hai phương thức này đều trả về một tập hợp các thẻ<a>trong tài liệu.
-
Lấy và lưu lại giá trị thuộc tính href của từng thẻ:
-
Sau khi truy xuất được tất cả các thẻ
<a>, bạn sẽ cần lấy giá trị của thuộc tínhhreftừ mỗi thẻ. Thuộc tínhhreflà nơi chứa liên kết (URL) mà mỗi thẻ<a>trỏ tới. -
Bạn có thể truy xuất giá trị này thông qua cú pháp
element.href(trong đóelementlà một thẻ<a>cụ thể). Điều này cho phép bạn lấy được đường dẫn mà mỗi thẻ liên kết dẫn tới.
Hiển thị danh sách liên kết ra:
-
Hiển thị ra Console: Sử dụng
console.log()để in danh sách tất cả các liên kết (tức là các giá trịhref) ra bảng điều khiển của trình duyệt. Đây là cách đơn giản và phổ biến để kiểm tra và hiển thị dữ liệu. -
Hiển thị ra giao diện HTML: Bạn có thể tạo một danh sách không thứ tự (
<ul>) và thêm các phần tử danh sách (<li>) vào đó, mỗi phần tử chứa một liên kết từ thuộc tínhhref. Điều này sẽ giúp người dùng nhìn thấy tất cả các liên kết trực tiếp trên giao diện web.
Ví dụ về cách hiển thị liên kết trong giao diện:
<ul id="links-list"></ul>
Sau đó, sử dụng JavaScript để thêm các liên kết vào thẻ <ul>:
let ulElement = document.getElementById("links-list");
allLinks.forEach(function(link) {
let li = document.createElement("li");
li.textContent = link.href;
ulElement.appendChild(li);
});
Các bước hướng dẫn các liên kết (href) từ thẻ <a> bằng JavaScript
Dưới đây là các bước chi tiết để hoàn thành bài tập này:
Tạo cấu trúc HTML cơ bản
Trước khi bắt đầu viết mã JavaScript, bạn cần tạo một cấu trúc HTML cơ bản với nhiều thẻ <a> chứa các liên kết khác nhau. Đây là các thẻ mà bạn sẽ thao tác trong bài tập.
Ví dụ về một file HTML đơn giản với các thẻ <a>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liên kết trên trang web</title>
</head>
<body>
<h1>Danh sách liên kết trên trang web</h1>
<a href="https://www.google.com">Google</a>
<a href="https://www.wikipedia.org">Wikipedia</a>
<a href="https://www.github.com">GitHub</a>
<h2>Danh sách liên kết:</h2>
<ul id="links-list"></ul> <!-- Khu vực để hiển thị các liên kết -->
</body>
</html>
Viết JavaScript lấy các thẻ <a>
Sau khi đã có cấu trúc HTML với các thẻ <a>, bước tiếp theo là sử dụng JavaScript để lấy tất cả các thẻ này.
Có thể sử dụng hai phương thức phổ biến:
-
document.querySelectorAll('a'): Trả về một NodeList chứa tất cả các thẻ<a>trong tài liệu. Đây là cách hiện đại và dễ đọc hơn. -
document.getElementsByTagName('a'): Trả về một HTMLCollection chứa tất cả các thẻ<a>. Phương thức này cũng hoạt động tốt, nhưng NodeList từquerySelectorAll()thường dễ thao tác hơn.
Ví dụ sử dụng querySelectorAll:
let allLinks = document.querySelectorAll("a");
c. Truy xuất thuộc tính href
Khi bạn đã lấy được danh sách các thẻ <a>, bước tiếp theo là duyệt qua từng thẻ và lấy giá trị của thuộc tính href.
Mỗi thẻ <a> có thuộc tính href chứa URL mà nó liên kết tới. Để lấy giá trị này, bạn có thể sử dụng cú pháp element.href.
Ví dụ:
allLinks.forEach(function(link) {
console.log(link.href); // In ra giá trị thuộc tính href của từng thẻ <a>
});
d. Hiển thị kết quả
Sau khi lấy được danh sách các liên kết, bạn có thể hiển thị chúng ra console hoặc giao diện HTML.
-
Hiển thị trong Console:
Để in kết quả vào console, bạn có thể sử dụngconsole.log()trong vòng lặp như đã làm ở bước trước:
allLinks.forEach(function(link) {
console.log(link.href); // In ra giá trị href trong console
});
Hiển thị trong Giao diện HTML:
Bạn có thể tạo một danh sách không thứ tự (<ul>) và thêm các phần tử danh sách (<li>) để hiển thị mỗi liên kết trong giao diện web. Để làm điều này, sử dụng JavaScript để tạo phần tử HTML động và chèn vào trang.
Ví dụ:
let ulElement = document.getElementById("links-list"); // Lấy thẻ <ul> từ HTML
allLinks.forEach(function(link) {
let li = document.createElement("li"); // Tạo thẻ <li> mới
li.textContent = link.href; // Gán liên kết vào nội dung của <li>
ulElement.appendChild(li); // Thêm <li> vào <ul>
});
Cách này sẽ hiển thị các liên kết trên giao diện web của bạn dưới dạng danh sách.
Gợi ý cách triển khai các liên kết (href) từ thẻ <a> bằng JavaScript
Tách logic lấy liên kết thành một hàm riêng
Để mã dễ tái sử dụng và dễ bảo trì, bạn có thể tách phần logic lấy tất cả các thẻ <a> và truy xuất thuộc tính href thành một hàm riêng. Điều này giúp bạn sử dụng lại hàm này ở những nơi khác trong mã của mình nếu cần.
Ví dụ về một hàm để lấy tất cả các liên kết:
function getAllLinks() {
let allLinks = document.querySelectorAll("a"); // Lấy tất cả thẻ <a>
return allLinks;
}
Hàm này trả về một NodeList chứa tất cả các thẻ <a> trên trang, giúp bạn dễ dàng thao tác với các thẻ này sau.
Gợi ý đoạn mã mẫu để xử lý và hiển thị liên kết
Để xử lý và hiển thị các liên kết, bạn có thể tạo một hàm riêng để xử lý việc duyệt qua các thẻ <a>, lấy giá trị thuộc tính href, và hiển thị nó trên giao diện.
Ví dụ về một hàm để hiển thị các liên kết trong giao diện:
function displayLinks() {
let allLinks = getAllLinks(); // Gọi hàm getAllLinks để lấy các thẻ <a>
let ulElement = document.getElementById("links-list"); // Lấy thẻ <ul> để hiển thị liên kết
// Nếu không có thẻ <a> nào
if (allLinks.length === 0) {
ulElement.innerHTML = "<li>Không có liên kết nào trên trang.</li>";
return;
}
// Duyệt qua các thẻ <a> và hiển thị
allLinks.forEach(function(link) {
let li = document.createElement("li"); // Tạo phần tử <li> mới
li.textContent = link.href; // Gán giá trị href vào nội dung của <li>
ulElement.appendChild(li); // Thêm <li> vào <ul>
});
}
Đoạn mã trên sẽ lấy tất cả các thẻ <a>, kiểm tra nếu có, sau đó duyệt qua và hiển thị giá trị href trong một danh sách <ul>. Nếu không có thẻ <a> nào, sẽ hiển thị thông báo "Không có liên kết nào trên trang."
Xử lý trường hợp không có thẻ <a> nào
Như đã đề cập trong phần trên, bạn cần xử lý trường hợp không có thẻ <a> nào trên trang. Cách đơn giản là kiểm tra độ dài của danh sách các thẻ <a>:
if (allLinks.length === 0) {
ulElement.innerHTML = "<li>Không có liên kết nào trên trang.</li>";
return;
}
Điều này đảm bảo rằng nếu không có thẻ <a> nào trên trang, người dùng sẽ nhận được một thông báo thay vì một danh sách trống.
Mở rộng các liên kết (href) từ thẻ <a> bằng JavaScript
Lọc và hiển thị các liên kết chứa một từ khóa cụ thể
Bạn có thể mở rộng bài tập bằng cách lọc các liên kết theo một từ khóa nhất định trong thuộc tính href. Đây là cách để chỉ hiển thị các liên kết có chứa từ khóa, ví dụ như "google".
Ví dụ:
function filterLinks(keyword) {
let allLinks = getAllLinks();
let filteredLinks = Array.from(allLinks).filter(function(link) {
return link.href.includes(keyword); // Kiểm tra nếu href chứa từ khóa
});
let ulElement = document.getElementById("links-list");
ulElement.innerHTML = ""; // Làm sạch danh sách hiện tại
if (filteredLinks.length === 0) {
ulElement.innerHTML = "<li>Không có liên kết chứa từ khóa.</li>";
return;
}
filteredLinks.forEach(function(link) {
let li = document.createElement("li");
li.textContent = link.href;
ulElement.appendChild(li);
});
}
Bạn có thể gọi hàm filterLinks("google") để chỉ hiển thị các liên kết có chứa "google" trong thuộc tính href.
Phân loại liên kết: nội bộ vs. bên ngoài
Bạn có thể phân loại các liên kết là nội bộ (chỉ dẫn đến các trang trên cùng một domain) hoặc bên ngoài (liên kết đến trang web khác).
Ví dụ về cách phân loại:
function categorizeLinks() {
let allLinks = getAllLinks();
let internalLinks = [];
let externalLinks = [];
allLinks.forEach(function(link) {
if (link.hostname === window.location.hostname) {
internalLinks.push(link.href); // Liên kết nội bộ
} else {
externalLinks.push(link.href); // Liên kết bên ngoài
}
});
console.log("Liên kết nội bộ:", internalLinks);
console.log("Liên kết bên ngoài:", externalLinks);
}
Hàm này phân loại các liên kết thành hai nhóm: nội bộ và bên ngoài. Sau đó, nó in ra kết quả trong console.
Gắn sự kiện click để hiển thị thông tin chi tiết của từng liên kết
Để người dùng có thể nhận thêm thông tin chi tiết về từng liên kết khi nhấp vào, bạn có thể gắn sự kiện click vào các thẻ <a>.
Ví dụ:
function addLinkClickEvent() {
let allLinks = getAllLinks();
allLinks.forEach(function(link) {
link.addEventListener("click", function(event) {
event.preventDefault(); // Ngừng hành động mặc định của liên kết
alert("Thông tin chi tiết: " + link.href);
});
});
}
