<a>

The <a> element is used to set up links. In addition to the common interfaces of web page elements (Node interface, Element interface, HTMLElement interface), it also inherits the HTMLAnchorElement interface and the HTMLHyperlinkElementUtils interface.

Attributes

The <a> element has a series of URL-related attributes that can be used to manipulate the link address. The meaning of these attributes can be found in the instance attributes of the Location object.

-hash: fragment identifier (beginning with #) -host: host and port (default ports 80 and 443 will be omitted) -hostname: host name -href: full URL -origin: protocol, domain name and port -password: the password before the host name -pathname: path (beginning with /) -port: Port -protocol: protocol (including the trailing colon :) -search: query string (beginning with ?) -username: the username before the hostname

// HTML code is as follows
// <a id="test" href="http://user:passwd@example.com:8081/index.html?bar=1#foo">test</a>
var a = document.getElementById("test");
a.hash; // "#foo"
a.host; // "example.com:8081"
a.hostname; // "example.com"
a.href; // "http://user:passed@example.com:8081/index.html?bar=1#foo"
a.origin; // "http://example.com:8081"
a.password; // "passwd"
a.pathname; // "/index.html"
a.port; // "8081"
a.protocol; // "http:"
a.search; // "?bar=1"
a.username; // "user"

Except for the origin attribute which is read-only, the above attributes are all readable and writable.

accessKey property

The accessKey attribute is used to read and write the shortcut keys of the <a> element.

// HTML code is as follows
// <a id="test" href="http://example.com">test</a>
var a = document.getElementById("test");
a.accessKey = "k";

The above code sets the shortcut key of the <a> element to k, and then as long as you press this shortcut key, the browser will jump to example.com.

Note that in different browsers under different operating systems, the function key combination to invoke shortcut keys is different of. For example, in the Chrome browser under Linux system, you need to press Alt + k to jump to example.com.

download attribute

The download attribute indicates that the current link is not for browsing, but for downloading. Its value is a string representing the file name downloaded by the user.

// HTML code is as follows
// <a id="test" href="foo.jpg">下载</a>
var a = document.getElementById("test");
a.download = "bar.jpg";

In the above code, the <a> element is an image link. By default, the image will be loaded in the current window after clicking. After setting the download property, click this link again, and a download dialog box will ask the user to save the location, and the downloaded file name is bar.jpg.

hreflang attributes

The hreflang attribute is used to read and write the HTML attribute hreflang of the <a> element, indicating the language of the resource pointed to by the link, such as hreflang="en".

// HTML code is as follows
// <a id="test" href="https://example.com" hreflang="en">test</a>
var a = document.getElementById("test");
a.hreflang; // "en"

referrerPolicy attribute

The referrerPolicy attribute is used to read and write the HTML attribute referrerPolicy of the <a> element. It specifies how to send the referer field of the HTTP header when the user clicks on the link.

The referer field of the HTTP header indicates where the current request comes from. Its format can be specified by the referrerPolicy attribute of the <a> element, and there are three values ​​to choose from.

-no-referrer: Do not send the referer field. -origin: The value of the referer field is the origin attribute of the <a> element, that is, protocol + host name + port. -unsafe-url: The value of the referer field is the origin attribute plus the path, but does not contain the # fragment. This format provides the most detailed information, and there may be a risk of information leakage.

// HTML code is as follows
// <a id="test" href="https://example.com" referrerpolicy="no-referrer">test</a>
var a = document.getElementById("test");
a.referrerPolicy; // "no-referrer"

rel attribute

The rel attribute is used to read and write the HTML attribute rel of the <a> element, indicating the relationship between the link and the current document.

// HTML code is as follows
// <a id="test" href="https://example.com" rel="license">license.html</a>
var a = document.getElementById("test");
a.rel; // "license"

tabIndex property

The value of the tabIndex attribute is an integer, which is used to read and write the tab traversal order of the current <a> element in the document.

// HTML code is as follows
// <a id="test" href="https://example.com">test</a>
var a = document.getElementById("test");
a.tabIndex; // 0

target attribute

The target attribute is used to read and write the HTML attribute target of the <a> element.

// HTML code is as follows
// <a id="test" href="https://example.com" target="_blank">test</a>
var a = document.getElementById("test");
a.target; // "_blank"

text attribute

The text attribute is used to read and write the link text of the <a> element, which is equivalent to the textContent attribute of the current node.

// HTML code is as follows
// <a id="test" href="https://example.com">test</a>
var a = document.getElementById("test");
a.text; // "test"

type attribute

The type attribute is used to read and write the HTML attribute type of the <a> element, indicating the MIME type of the link target.

// HTML code is as follows
// <a id="test" type="video/mp4" href="example.mp4">video</a>
var a = document.getElementById("test");
a.type; // "video/mp4"

Method

The methods of the <a> element are all inherited, and there are mainly the following three.

-blur(): Remove the keyboard focus from the current element, see the introduction of the HTMLElement interface for details. -focus(): The current element gets the keyboard focus, see the introduction of the HTMLElement interface for details. -toString(): Returns the HTML attribute href of the current <a> element.