Tìm hiểu cách thay đổi giá trị thuộc tính phần tử HTML với JavaScript.
Giả sử bạn có một phần tử anchor trên trang web, với đường dẫn URL sai trong giá trị thuộc tính href.
Nơi phổ biến thấy điều đó là thanh menu/điều hướng:
<nav> <ul> <li> <a href="/đường-dẫn-trang-của-bạn" id="some-id">Liên kết</a> </li> </ul> </nav>Nơi phổ biến khác có liên kết trang web nội bộ là footer ở cuối trang web.
Giả sử ai đó mắc lỡ. Giá trị href của bạn là /lien-he-toi nhưng nó nên là /lien-he-chung-toi, và vì lý do nào đó bạn không thể sửa trực tiếp trong mã HTML (có thể bạn không có quyền ghi backend).
Bạn cần sửa gấp để người truy cập không thấy trang trắng khi nhấp vào.
Nếu bạn có quyền truy cập mã frontend, ví dụ qua CMS (Hệ thống quản lý nội dung), bạn có thể dùng JavaScript để ghi đè giá trị href hiện có trên phần tử anchor, chạm vào backend.
Tôi sẽ chỉ cho bạn hai cách khác nhau.
Chọn phần tử dựa trên ID
Giả sử mã HTML của bạn trông như sau, với ID duy nhất trên mỗi liên kết nav:
<nav> <ul> <li> <a href="/" id="home">Trang chủ</a> </li> <li> <a href="/dich-vu" id="services">Dịch vụ</a> </li> <li> <a href="/lien-he-toi" id="contact">Liên hệ</a> </li> </ul> </nav>Bây giờ chúng ta muốn thay đổi giá trị href trên liên kết Liên hệ.
Trước tiên, chọn phần tử anchor/liên kết dựa trên id của nó:
const contactLink = document.querySelector('#contact')Sau đó dùng ký pháp dấu chấm để chọn thuộc tính href của phần tử anchor và gán giá trị mới /lien-he-chung-toi:
contactLink.href = '/lien-he-chung-toi'Xong!
Bây giờ nếu bạn log ra console, bạn sẽ thấy giá trị thuộc tính href sai trước đó đã được thay bằng đường dẫn URL mới đúng:
console.log(contactLink.href) // output: "https://your-domain.com/lien-he-chung-toi"Tất cả mã JS:
// Chọn anchor/liên kết dựa trên ID const contactLink = document.querySelector('#contact') // Thay đổi giá trị href contactLink.href = '/lien-he-chung-toi' // In kết quả console.log(contactLink.href)Chọn phần tử dựa trên giá trị chuỗi cụ thể
Bạn có thể ở tình huống phần tử liên kết HTML không có id hoặc class duy nhất. Mã HTML có thể trông như sau
<nav> <ul> <li> <a href="/">Trang chủ</a> </li> <li> <a href="/dich-vu">Dịch vụ</a> </li> <li> <a href="/lien-he-toi">Liên hệ</a> </li> </ul> </nav>Không sao. Bạn có thể dùng bộ chọn CSS3 với querySelector() để chỉ định bạn muốn chọn giá trị chuỗi chính xác, trong trường hợp này /lien-he-toi.
Cách làm như sau:
const contactLink = document.querySelector('a[href*="/lien-he-toi"]')Bây giờ in giá trị href từ biến để xem bạn có tìm thấy giá trị href bạn đang tìm không:
console.log(contactLink.href) // output: "https://your-domain.com/lien-he-toi" Đã tìm thấy!
Bây giờ bạn có thể thay đổi giá trị href thành đường dẫn URL đúng như ví dụ trước:
contactLink.href = '/lien-he-chung-toi'Tất cả mã:
// Chọn link với giá trị chuỗi href cụ thể const contactLink = document.querySelector('a[href*="/lien-he-toi"]') // Thay đổi giá trị chuỗi href contactLink.href = '/lien-he-chung-toi' // In kết quả console.log(contactLink.href)