Làm cách nào để có được HREF trong JavaScript?

Question

Phương thức trả về phần tử đầu tiên khớp với bộ chọn hoặc null nếu không có phần tử nào có bộ chọn được cung cấp tồn tại trong DOM

Nội dung chính Show

Lấy phần tử đầu tiên bằng thuộc tính href
Nhận tất cả các phần tử có thuộc tính href được chỉ định
Nhận (các) phần tử bằng cách khớp một phần thuộc tính href của chúng
Thu hẹp kết quả xuống
JavaScript. Lời khuyên trong ngày
Làm cách nào để có được một href trong JavaScript?
Tôi có thể sử dụng href trong JavaScript không?
Làm thế nào bạn có thể nhận được giá trị href từ?
Href nghĩa là gì trong JavaScript?

Đây là HTML cho các ví dụ trong bài viết này



  
    
    bobbyhadz.com
  

  
    Example

Lấy phần tử đầu tiên bằng thuộc tính href

Ví dụ đầu tiên sử dụng tài liệu. phương thức querySelector để lấy phần tử đầu tiên có thuộc tính href với giá trị là https://example.com

Mẫu mã chọn phần tử đầu tiên trên trang có thuộc tính href được đặt thành https://example.com

Nếu một phần tử với bộ chọn được cung cấp không tồn tại trong DOM, phương thức querySelector() trả về null

Nhận tất cả các phần tử có thuộc tính href được chỉ định

sử dụng tài liệu. phương thức querySelectorAll để lấy tất cả các phần tử có thuộc tính href với giá trị đã chỉ định

Mẫu mã chọn tất cả các phần tử trên trang có thuộc tính href với giá trị là https://example.com

Phương thức querySelector()3 lấy bộ chọn CSS làm tham số và trả về một bộ sưu tập chứa tất cả các phần tử khớp với bộ chọn đã cho

Nếu bạn cần lặp lại bộ sưu tập, hãy sử dụng phương pháp querySelector()4

Hàm mà chúng ta đã truyền cho phương thức querySelector()5 được gọi với từng phần tử trong NodeList

Nhận (các) phần tử bằng cách khớp một phần thuộc tính href của chúng

Bạn có thể sử dụng dấu hoa thị trong bộ chọn CSS để lấy phần tử bằng cách khớp một phần giá trị của thuộc tính href của phần tử đó

Bộ chọn này kiểm tra xem chuỗi querySelector()7 có được chứa ở bất kỳ đâu trong giá trị thuộc tính href của phần tử hay không

Nếu bạn cần lấy tất cả các phần tử bằng cách so khớp một phần thuộc tính href, hãy sử dụng phương thức document.querySelector('a[href="https://example.com"]')0

Mẫu mã trả về một NodeList chứa tất cả các thành phần trên trang có thuộc tính href có giá trị chứa chuỗi querySelector()7

Thu hẹp kết quả xuống

Nếu bạn cần thu hẹp mọi thứ xuống một yếu tố cụ thể, e. g. thẻ document.querySelector('a[href="https://example.com"]')3, bạn có thể bắt đầu bộ chọn bằng tên thẻ

Ví dụ trên lấy phần tử document.querySelector('a[href="https://example.com"]')3 đầu tiên có thuộc tính href với giá trị là https://example.com

Điều này sẽ không khớp với bất kỳ phần tử nào khác với giá trị href được chỉ định

Cách tiếp cận tương tự có thể được sử dụng với phương thức document.querySelector('a[href="https://example.com"]')0

Mẫu mã chọn tất cả các phần tử document.querySelector('a[href="https://example.com"]')3 có thuộc tính href với giá trị là https://example.com

Viết hàm JavaScript để lấy giá trị của các thuộc tính href, hreflang, rel, target và type của liên kết đã chỉ định

Tệp HTML mẫu


<!DOCTYPE html>
<html><head>
<meta charset=utf-8 />
</head>
<body>
<p><a id="w3r" type="text/html" hreflang="en-us" rel="nofollow" target="_self" href="https://www.w3resource.com/">w3resource</a></p>
<button onclick="getAttributes()">Click here to get  attributes value</button>
</body></html>

Giải pháp mẫu. -

Mã HTML

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Collect the value of href, hreflang, rel, target, and type attributes of a link</title> 
</head> 
<body> 
<p><a id="w3r" type="text/html" hreflang="en-us" rel="nofollow" target="_self" href="https://www.w3resource.com/">w3resource</a></p> 
<button onclick="getAttributes()">Click here to get the attribute's value</button>  
</body> 
</html>

Mã JavaScript

function getAttributes()
{
 var u = document.getElementById("w3r").href;
 alert('The value of the href attribute of the link is : '+u);
 var v = document.getElementById("w3r").hreflang;   
 alert('The value of the hreflang attribute of the link is : '+v);
 var w = document.getElementById("w3r").rel; 
  alert('The value of the rel attribute of the link is : '+w);
 var x = document.getElementById("w3r").target; 
  alert('The value of the taget attribute of the link is : '+x);
 var y = document.getElementById("w3r").type; 
  alert('The value of the type attribute of the link is : '+y);  
}

Đầu ra mẫu

Sơ đồ

Bản thử trực tiếp

Xem Bút javascript-dom-exercise-4 của w3resource (@w3resource) trên CodePen

Cải thiện giải pháp mẫu này và đăng mã của bạn qua Disqus

Trước. Viết chương trình JavaScript để đặt màu nền cho đoạn văn
Kế tiếp. Viết hàm JavaScript để thêm hàng vào bảng

Mức độ khó của bài tập này là gì?

Dễ dàng trung bình khó

Kiểm tra kỹ năng Lập trình của bạn với bài kiểm tra của w3resource

Theo dõi chúng tôi trên Facebook và Twitter để cập nhật thông tin mới nhất.

JavaScript. Lời khuyên trong ngày

Rút ngắn một mảng bằng thuộc tính độ dài của nó

Một cách tuyệt vời để rút ngắn một mảng là xác định lại thuộc tính độ dài của nó

let array = [0, 1, 2, 3, 4, 5, 6, 6, 8, 9]
array.length = 4
// Result: [0, 1, 2, 3]

Tuy nhiên, điều quan trọng cần biết là đây là một cách phá hoại để thay đổi mảng. Điều này có nghĩa là bạn mất tất cả các giá trị khác đã từng có trong mảng

Làm cách nào để có được một href trong JavaScript?

Để 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 .

Tôi có thể sử dụng href trong JavaScript không?

Trong JavaScript, bạn có thể gọi một hàm hoặc đoạn mã JavaScript thông qua thẻ HREF của liên kết . Điều này có thể hữu ích vì điều đó có nghĩa là mã JavaScript đã cho sẽ tự động chạy khi ai đó nhấp vào liên kết. HREF đề cập đến thuộc tính “HREF” trong thẻ A LINK (siêu liên kết trong HTML).

Làm thế nào bạn có thể nhận được giá trị href từ?

Nhận giá trị href của thẻ liên kết bằng JavaScript/jQuery .

Sử dụng jQuery. Trong jQuery, bạn có thể sử dụng. prop() để lấy giá trị href của thẻ neo. .

Sử dụng JavaScript. Trong vanilla JavaScript, bạn có thể sử dụng querySelector() , sẽ trả về thẻ neo đầu tiên trong tài liệu

Href nghĩa là gì trong JavaScript?

(Tham khảo siêu văn bản) Mã HTML được sử dụng để tạo liên kết đến một trang khác . HREF là một thuộc tính của thẻ neo, cũng được sử dụng để xác định các phần trong tài liệu.

programming javascript