Nhận giá trị href từ chuỗi javascript

Question

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách lấy phần băm của thuộc tính href của một vùng trong JavaScript

Nội dung chính Show

Sử dụng Thuộc tính băm Vùng DOM HTML
Get the hash part of the href attribute of an area using the hash property
Bằng cách đặt Thuộc tính băm HTML DOM
thông số kỹ thuật
Tính tương thích của trình duyệt web
Tìm thấy một vấn đề với trang này?
JavaScript. Lời khuyên trong ngày
Làm cách nào để nhận giá trị href trong JavaScript?
Làm cách nào để lấy thẻ neo từ chuỗi trong JavaScript?
Làm cách nào để chọn một href trong JavaScript?
Làm cách nào để lấy giá trị của thẻ trong JavaScript?

The HTML elementestablishes an area within an image map with predetermined clickable zones. An image map allows you to correlate geometric regions of a picture with hypertext links. This element can only be used within the < map> element.

Thuộc tính href cung cấp mục tiêu siêu liên kết của khu vực. Phần tử không phải là siêu liên kết nếu không có thuộc tính href

Sau đây là một phương pháp được sử dụng để lấy phần băm của thuộc tính href của một vùng trong JavaScript−

Sử dụng Thuộc tính băm Vùng DOM HTML

Trong HTML DOM, Thuộc tính hàm băm Vùng DOM được sử dụng để trả về phần neo của giá trị thuộc tính href. Phần neo là thành phần URL xuất hiện sau dấu thăng (#)

Tên này có tên liên kết một giá trị, chỉ định phần liên kết của URL. Nó tạo ra một giá trị chuỗi phản ánh phần neo của URL, bao gồm ký hiệu băm (#)

cú pháp

area_object.hash;

area_object được gọi bằng cách sử dụng thuộc tính hash và trả về phần neo của URL có chứa hàm băm (#)

ví dụ 1

Trong ví dụ này, chúng tôi đã sử dụng thuộc tính hash để lấy phần băm của thuộc tính href. Khu vực có id "area_javascript" có thuộc tính href và văn bản của nó sau khi hàm băm được trả về (bao gồm cả hàm băm) khi thuộc tính hàm băm được sử dụng

Get the hash part of the href attribute of an area using the hash property

Bằng cách đặt Thuộc tính băm HTML DOM

Bằng cách sử dụng thuộc tính băm này, thành phần neo của giá trị thuộc tính href có thể được đặt. Sau dấu thăng (#) là URL anchor. Để đặt neo, hãy xóa ký hiệu băm (#)

cú pháp

area_object.hash = anchor_name;

area_object đã được gọi và giá trị băm của phần neo được đặt thành một giá trị khác, như đã thấy trong anchor_name

ví dụ 2

Trong ví dụ này, chúng tôi đã sử dụng thuộc tính băm để thay đổi phần neo của URL. Giá trị băm được tìm thấy bằng cách sử dụng thuộc tính băm và sau đó văn bản được thay đổi tương ứng

Trong hướng dẫn này, những gì chúng ta đã học được là hai cách để lấy phần băm của thuộc tính href của một vùng trong JavaScript. Cách thứ nhất là sử dụng thuộc tính hash. Trong cách tiếp cận thứ hai, chúng tôi đặt thuộc tính băm với giá trị khác và sau đó truy cập giá trị băm được cập nhật

Thuộc tính HTMLAnchorElement.href là một trình xâu chuỗi trả về một chuỗi chứa toàn bộ URL và cho phép cập nhật href

Giá trị

Một chuỗi

ví dụ

// An <a id="myAnchor" href="https://developer.mozilla.org/en-US/HTMLAnchorElement"> element is in the document
const anchor = document.getElementById("myAnchor");
anchor.href; // returns 'https://developer.mozilla.org/en-US/HTMLAnchorElement'

thông số kỹ thuật

Thông số tiêu chuẩn HTML
# dom-siêu liên kết-href-dev

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt có bật JavaScript. Bật JavaScript để xem dữ liệu

Xem thêm

Giao diện HTMLAnchorElement mà nó thuộc về

Tìm thấy một vấn đề với trang này?

Chỉnh sửa trên GitHub
Nguồn trên GitHub
Báo cáo sự cố với nội dung này trên GitHub
Bạn muốn tự khắc phục sự cố?

Sửa đổi lần cuối. Ngày 9 tháng 9 năm 2022, bởi những người đóng góp MDN

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.
Tiếp theo. 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

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

Hoán đổi giá trị với phá hủy mảng

Cú pháp gán phá hủy là một biểu thức JavaScript cho phép giải nén các giá trị từ mảng hoặc thuộc tính từ các đối tượng thành các biến riêng biệt

Làm cách nào để nhận giá trị href trong JavaScript?

Bạn có thể làm như thế này. tài liệu. getElementById("link")[0]. getAttribute("href"); để truy cập mảng thẻ

Làm cách nào để lấy thẻ neo từ chuỗi trong JavaScript?

Sự mô tả. Phương pháp này tạo một neo HTML được sử dụng làm mục tiêu siêu văn bản

cú pháp. Cú pháp của nó như sau - chuỗi. neo (tên neo)

chi tiết thuộc tính. anchorname - Xác định tên cho anchor

Giá trị trả về. Trả về chuỗi có thẻ neo

Thí dụ. Hãy thử ví dụ sau. .

đầu ra

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

Sử dụng phương thức querySelector() để lấy phần tử theo thuộc tính href , e. g. tài liệu. querySelector('a[href="https. //thí dụ. com"]'). 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 với bộ chọn được cung cấp tồn tại trong DOM. Đây là HTML cho các ví dụ trong bài viết này.

Làm cách nào để lấy giá trị của thẻ trong JavaScript?

Đầu tiên, chọn phần tử liên kết có id js bằng phương thức querySelector(). Thứ hai, lấy thuộc tính đích của liên kết bằng cách gọi hàm getAttribute() của phần tử liên kết đã chọn . Thứ ba, hiển thị giá trị của mục tiêu trên cửa sổ Console.

programming javascript