Thêm thuộc tính target="_blank" cho tất cả các liên kết trên trang JavaScript

Javascript căn bản | 16/06/2025 by Học Javascript

Trong quá trình xây dựng giao diện web, việc kiểm soát cách các liên kết hoạt động là rất quan trọng để cải thiện trải nghiệm người dùng. Một trong những cách phổ biến là sử dụng thuộc tính target="_blank" nhằm mở liên kết trong một tab hoặc cửa sổ mới, giúp người dùng không bị mất trang hiện tại. Thay vì thêm thủ công thuộc tính này vào từng thẻ <a>, chúng ta có thể sử dụng JavaScript để tự động thêm nó cho tất cả các liên kết trên trang. Bài tập này sẽ giúp học sinh thực hành thao tác DOM, làm việc với thuộc tính HTML và nâng cao khả năng lập trình JavaScript thông qua một tình huống thực tế.

Mục tiêu bài tập thêm thuộc tính target="_blank" trong JavaScript

Trong bài tập này, người học sẽ được tiếp cận và thực hành với một tình huống phổ biến trong phát triển web: thêm thuộc tính target="_blank" vào các liên kết để chúng mở ra trong tab mới. Cụ thể, các mục tiêu cần đạt được bao gồm:

Hiểu về thuộc tính target trong thẻ <a>

Nắm được vai trò của thuộc tính target, trong đó giá trị " _blank" cho phép mở liên kết trong một tab hoặc cửa sổ trình duyệt mới.
Phân biệt giữa các giá trị khác như _self, _parent, _top và _blank.

Thực hành thao tác với DOM trong JavaScript

Biết cách sử dụng JavaScript để truy xuất tất cả các thẻ <a> trên trang bằng các phương thức như document.querySelectorAll("a") hoặc getElementsByTagName("a").
Làm quen với việc duyệt qua một danh sách các phần tử HTML bằng vòng lặp (for, forEach, hoặc for...of).

Thêm hoặc thay đổi thuộc tính HTML bằng JavaScript

Biết cách sử dụng .setAttribute() hoặc gán trực tiếp (element.target = "_blank") để thiết lập giá trị thuộc tính cho phần tử HTML.
Rèn luyện kỹ năng can thiệp vào cấu trúc trang thông qua mã lệnh, từ đó làm chủ các thao tác chỉnh sửa giao diện và hành vi trang web bằng JavaScript.

Thông qua bài tập này, người học không chỉ nâng cao khả năng lập trình với DOM mà còn phát triển tư duy logic khi thao tác với tập hợp các phần tử HTML trong tài liệu web.

Yêu cầu bài tập thêm thuộc tính target="_blank" trong JavaScript

Trong bài tập này, học viên sẽ thực hiện các thao tác cụ thể với các thẻ liên kết <a> trên trang HTML, thông qua JavaScript. Các yêu cầu chi tiết bao gồm:

Truy xuất tất cả các thẻ <a> trên trang web

Sử dụng JavaScript để lấy danh sách tất cả các thẻ <a> có trong tài liệu HTML.
Có thể sử dụng một trong hai cách sau:
- document.getElementsByTagName("a") – trả về một HTMLCollection.
- document.querySelectorAll("a") – trả về một NodeList.

Ví dụ:

const links = document.querySelectorAll("a");

Kiểm tra và thêm thuộc tính target="_blank" cho từng liên kết

Duyệt qua từng phần tử trong danh sách liên kết.

Kiểm tra xem thẻ đó đã có thuộc tính target chưa:

Nếu chưa có hoặc khác " _blank" thì thêm hoặc sửa lại thành " _blank".

Có thể dùng:

element.setAttribute("target", "_blank") hoặc
element.target = "_blank"

Ví dụ:

links.forEach(link => {
    link.setAttribute("target", "_blank");
});

Hiển thị kết quả kiểm tra (tùy chọn)

In ra console danh sách các thẻ đã được cập nhật, để kiểm tra kết quả.
Hoặc có thể cập nhật giao diện bằng cách thêm nội dung thông báo hoặc đổi màu các liên kết đã được sửa.

Ví dụ (log ra console):

links.forEach(link => {
    console.log(`Đã cập nhật: ${link.href}`);
});

Thông qua yêu cầu này, học viên sẽ hiểu và thực hành được cách thao tác trên tập hợp phần tử HTML bằng JavaScript, đồng thời thấy rõ được ứng dụng thực tế của việc can thiệp DOM để cải thiện trải nghiệm người dùng.

Các bước hướng dẫn thêm thuộc tính target="_blank" trong JavaScript

Để thực hiện bài tập "Thêm thuộc tính target="_blank" cho tất cả các liên kết trên trang", bạn có thể làm theo các bước sau:

Tạo cấu trúc HTML cơ bản

Tạo một file HTML đơn giản chứa một số liên kết (<a>) trỏ đến các trang khác nhau.
Mục đích là để có dữ liệu thử nghiệm và kiểm tra kết quả sau khi thao tác bằng JavaScript.

Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Trang liên kết thử nghiệm</title>
</head>
<body>
    <h2>Danh sách liên kết:</h2>
    <a href="https://www.google.com">Google</a><br>
    <a href="https://www.wikipedia.org">Wikipedia</a><br>
    <a href="https://www.openai.com">OpenAI</a><br>

    <script src="script.js"></script>
</body>
</html>

Lấy danh sách các thẻ <a>

Dùng JavaScript để lấy toàn bộ các phần tử <a> trên trang.

Có thể sử dụng một trong hai phương pháp:

document.getElementsByTagName("a") → HTMLCollection.
document.querySelectorAll("a") → NodeList (thường được ưa chuộng hơn vì hỗ trợ nhiều phương thức như forEach()).

Ví dụ:

const links = document.querySelectorAll("a");

Duyệt qua và thêm thuộc tính target="_blank"

Duyệt qua từng phần tử trong danh sách.
Sử dụng setAttribute() để thêm thuộc tính target với giá trị là "_blank".
Điều này giúp mỗi liên kết khi nhấp vào sẽ mở trong một tab mới.

Ví dụ:

links.forEach(link => {
    link.setAttribute("target", "_blank");
});

Kiểm tra kết quả

Bạn có thể xác minh kết quả theo hai cách:

Cách 1: Kiểm tra trên console

In danh sách các liên kết và thuộc tính mới của chúng ra console để theo dõi.

Ví dụ:

links.forEach(link => {
    console.log(`Đã cập nhật liên kết: ${link.href} → target = ${link.target}`);
});

Cách 2: Kiểm tra bằng hành vi thực tế

Nhấp vào các liên kết trên giao diện trình duyệt để xem chúng có mở trong tab mới hay không.
Nếu mở tab mới, nghĩa là target="_blank" đã được áp dụng thành công.

Việc làm theo các bước trên giúp người học nắm vững cách thao tác với các thuộc tính HTML bằng JavaScript và thấy được tác động thực tế ngay trên trang web.

Gợi ý cách triển khai thêm thuộc tính target="_blank" trong JavaScript

Để giúp tổ chức mã tốt hơn và mở rộng dễ dàng sau này, bạn nên xây dựng đoạn xử lý trong một hàm riêng, kết hợp kiểm tra điều kiện và sự kiện trang đã tải.

Tạo hàm xử lý riêng: `addTargetToLinks()`

Hàm này sẽ:

Lấy toàn bộ các thẻ <a>
Kiểm tra nếu chưa có thuộc tính target, thì thêm target="_blank"

Ví dụ:

function addTargetToLinks() {
    const links = document.querySelectorAll("a");

    links.forEach(link => {
        // Kiểm tra nếu chưa có target
        if (!link.hasAttribute("target")) {
            link.setAttribute("target", "_blank");
        }
    });
}

Gọi hàm sau sự kiện `DOMContentLoaded`

Đảm bảo mã chỉ chạy sau khi toàn bộ HTML được load xong (tránh lỗi khi chưa có phần tử DOM).

Ví dụ:

document.addEventListener("DOMContentLoaded", () => {
    addTargetToLinks();
});

Các bước thêm thuộc tính target="_blank" trong JavaScript nâng cao

Chỉ áp dụng cho liên kết ra ngoài

Kiểm tra nếu liên kết bắt đầu bằng https:// hoặc https:// và không trỏ về cùng domain.

Ví dụ:

function isExternalLink(link) {
    return link.hostname !== window.location.hostname;
}

function addTargetToExternalLinks() {
    const links = document.querySelectorAll("a");

    links.forEach(link => {
        if (isExternalLink(link)) {
            link.setAttribute("target", "_blank");
        }
    });
}

Thêm cảnh báo khi người dùng nhấp liên kết ngoài

Gắn sự kiện click vào các liên kết bên ngoài, hiện alert() hoặc confirm() trước khi đi tiếp.

Ví dụ:

link.addEventListener("click", function(event) {
    const confirmLeave = confirm("Bạn sắp rời khỏi trang, tiếp tục?");
    if (!confirmLeave) {
        event.preventDefault(); // Ngăn chuyển hướng
    }
});

Thêm thuộc tính rel="noopener noreferrer"

Đảm bảo an toàn khi mở trang ngoài, tránh tấn công qua cửa sổ mới (window.opener).

Thêm vào đoạn xử lý:

link.setAttribute("rel", "noopener noreferrer");

Kết bài

Qua bài tập này, bạn đã nắm được cách sử dụng JavaScript để truy xuất và thao tác với các thẻ <a> trên trang web thông qua DOM. Cụ thể, bạn đã biết cách thêm thuộc tính target="_blank" để mở liên kết trong tab mới, từ đó giúp cải thiện trải nghiệm người dùng khi truy cập các liên kết bên ngoài. Ngoài ra, phần mở rộng cũng giúp bạn làm quen với các kỹ thuật nâng cao như phân loại liên kết, xử lý sự kiện click và đảm bảo bảo mật bằng rel="noopener noreferrer". Đây là những kỹ năng hữu ích và thiết thực khi xây dựng các trang web tương tác, an toàn và thân thiện với người dùng.