“href” stands for a hypertext link. While developing a website, the URL of the page to which the link points is specified using the HTML anchor “” tag. In certain scenarios, the developers need to determine the value of the href, which is the page’s URL. To do so, JavaScript has some built-in methods that can assist you.
Hướng dẫn này sẽ thảo luận về các cách lấy giá trị href của thẻ neo JavaScript
Làm cách nào để có được href trong JavaScript?
Để xác định giá trị href trong JavaScript, hãy sử dụng các phương thức được xác định trước của JavaScript sau đây
- phương thức getAttribute[]
- thuộc tính href
Hãy xem xét các cách tiếp cận này một cách riêng lẻ
Phương pháp 1. Nhận href bằng phương thức getAttribute[]
Phương thức “getAttribute[]” của giao diện Phần tử đưa ra giá trị của một thuộc tính cụ thể của phần tử được xác định. Giá trị trả về là null hoặc chuỗi rỗng nếu thiếu thuộc tính mong muốn
cú pháp
Thực hiện theo cú pháp đã cho để nhận href bằng phương thức getAttribute[]
. getAttribute [ attributeName ]
Ở đây, “attributeName” là tên của thuộc tính có giá trị mà chúng ta muốn lấy
Thí dụ. Get href Sử dụng phương thức querySelector[] Với phương thức getAttribute[]
Trước tiên, chúng tôi sẽ tạo một thẻ neo, nút và nhãn để in URL sẽ nhận giá trị href bằng cách sử dụng phương thức “getAttribute[]” của JavaScript
Nhận href in JavaScript
Link
Click Here!
Tiếp theo, xác định hàm “getUrl[]” trong tệp JavaScript, nơi trước tiên chúng ta sẽ lấy thẻ neo bằng phương thức “querySelector[]” và sau đó gọi phương thức getAttribute[] bằng cách chuyển href làm đối số. Nó sẽ tìm ra thẻ neo đầu tiên và truy xuất URL của nó và lưu trữ nó trong biến “href”. Cuối cùng, in giá trị dưới dạng văn bản của nhãn đã thêm
hàm getUrl []{
var href = document.querySelector['a'] . getAttribute ['href'] ;
var url = document.getElementById['getUrl'] ;
url.textContent = ` URL là ${href}`;
}
Đầu ra hiển thị giá trị của href khi nhấp vào nút
Hãy chuyển sang phương pháp tiếp theo để nhận href trong JavaScript
Phương pháp 2. Nhận href bằng cách sử dụng thuộc tính href
Phương pháp khác để nhận giá trị href là thuộc tính “href”. Href là thuộc tính của “HTMLanchorElement” cập nhật href và đưa ra một chuỗi có URL hoàn chỉnh
cú pháp
Sử dụng cú pháp sau để nhận giá trị href với sự trợ giúp của thuộc tính “href”
mỏ neo. href
Thí dụ. Get href Sử dụng phương thức getElementById[] Với thuộc tính href
Chúng tôi sẽ xem xét liên kết tương tự trong thẻ neo được sử dụng trong ví dụ trước. Sau đó, trong hàm “getUrl[]”, trước tiên hãy truy cập thẻ neo bằng cách chuyển id “liên kết” của thẻ neo trong phương thức “getElementbyId[]” và gọi thuộc tính “href” với nó. Tiếp theo, lấy lại nhãn đã thêm bằng quy trình tương tự và đặt giá trị của href đã tìm nạp làm nội dung của nó
hàm getUrl []{
const value1 = document.getElementById["link"] . href;
const url = tài liệu. getElementById ['getUrl'] ;
url.textContent = ` URL là ${value1}`;
}
đầu ra
Chúng tôi đã cung cấp giải pháp đơn giản nhất để lấy giá trị href trong JavaScript
Phần kết luận
Để lấy href trong JavaScript, bạn có thể sử dụng các phương thức được xác định trước của JavaScript, chẳng hạn như phương thức getAttribute[] và thuộc tính href. Điều duy nhất tách phương thức getAttribute[] khỏi thuộc tính href là nó trả về giá trị của phần tử neo trong khi href đưa ra toàn bộ đường dẫn mà phần tử neo trỏ tới. Trong hướng dẫn này, chúng tôi đã thảo luận về các cách lấy giá trị href của thẻ neo JavaScript