Tìm hiểu cách thay đổi giá trị thuộc tính phần tử HTML bằng JavaScript.
Giả sử bạn có một phần tử liên kết trên một trang web, với một đường dẫn liên kết URL bị lỗi trong href giá trị thuộc tính.
Một nơi thường thấy sẽ nằm trong menu / thanh điều hướng của bạn:
<nav>
<ul>
<li>
<a href="/path-to-your-page" id="some-id">Link</a>
</li>
</ul>
</nav>Một nơi phổ biến khác để có các liên kết trang web nội bộ là ở chân trang ở cuối trang web của bạn.
Giả sử ai đó đã mắc lỗi. href của bạn giá trị là /contact-me nhưng nó phải là /contact-us và vì bất kỳ lý do gì, bạn không thể giải quyết nó trực tiếp trong mã HTML (có lẽ bạn không có quyền ghi trên chương trình phụ trợ).
Bạn cần phải sửa nó càng sớm càng tốt để khách truy cập của bạn sẽ không nhìn thấy trang trống khi họ nhấp vào nó.
Nếu bạn có quyền truy cập vào mã giao diện người dùng, ví dụ:thông qua CMS (Hệ thống quản lý nội dung), bạn có thể sử dụng JavaScript để ghi đè giá trị href hiện có trên phần tử neo của mình mà không cần chạm vào phần phụ trợ.
Tôi sẽ chỉ cho bạn hai cách khác nhau để làm điều đó.
Chọn phần tử dựa trên ID
Giả sử đánh dấu HTML của bạn trông giống như thế này, với một ID duy nhất trên mỗi liên kết điều hướng:
<nav>
<ul>
<li>
<a href="/" id="home">Home</a>
</li>
<li>
<a href="/services" id="services">Services</a>
</li>
<li>
<a href="/contact-me" id="contact">Contact</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, hãy chọn phần tử liên kết / neo của bạn dựa trên id của nó:
const contactLink = document.querySelector('#contact')
Sau đó, sử dụng ký hiệu dấu chấm để chọn href thuộc tính của phần tử liên kết của bạn và cung cấp cho nó một giá trị mới là /contact-us :
contactLink.href === '/contact-us'Thế là xong!
Bây giờ, nếu bạn đăng nhập nó vào bảng điều khiển của mình, bạn sẽ thấy rằng giá trị thuộc tính href bị lỗi trước đó đã được thay thế bằng đường dẫn URL chính xác mới:
console.log(contactLink.href)
// output: "https://your-domain.com/contact-us"Tất cả mã JS:
// Select anchor/link element based on its ID
const contactLink = document.querySelector('#contact')
// Change href value
contactLink.href === '/contact-us'
// Print result
console.log(contactLink.href)Chọn phần tử dựa trên một giá trị chuỗi cụ thể
Bạn có thể gặp phải tình huống trong đó phần tử liên kết HTML của bạn không có id hoặc lớp duy nhất. Đánh dấu HTML của bạn có thể trông giống như thế này
<nav>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/services">Services</a>
</li>
<li>
<a href="/contact-me">Contact</a>
</li>
</ul>
</nav>
Không có gì. Bạn có thể sử dụng bộ chọn CSS3 với querySelector() để chỉ định rằng bạn muốn chọn một giá trị chuỗi chính xác, trong trường hợp này là /contact-me .
Đây là cách thực hiện:
const contactLink = document.querySelector('a[href*="/contact-me"]')Bây giờ, hãy in giá trị href từ biến của bạn để xem liệu bạn có thực sự tìm thấy giá trị href mà bạn đang tìm kiếm hay không:
console.log(contactLink.href)
// output: "https://your-domain.com/contact-me" Nó đã làm!
Bây giờ bạn có thể thay đổi href giá trị đến đường dẫn URL chính xác giống như trong ví dụ trước:
contactLink.href === '/contact-us'Tất cả mã:
// Select link with specific href string value
const contactLink = document.querySelector('a[href*="/contact-me"]')
// Change href string value
contactLink.href = '/contact-us'
// Print result
console.log(contactLink.href)