javascript：<a> 元素

Original sentence: https: //wangdoc.com/javascript/index.html

<a> element

<a>Element is used to set the link. In addition to common interface (page elements Nodeinterface Elementinterfaces, HTMLElementinterfaces), it inherits the HTMLAnchorElementinterface and the HTMLHyperlinkElementUtilsinterface.

Attributes

URL-related properties

<a>There are a series of elements related URL attribute can be used to operate the link address. The meaning of these attributes can refer to Locationan object instance attributes.

• hash: segment identifier (in #the beginning)
• host: host and port (default port 80 and 443 will be omitted)
• hostname: hostname
• href: full URL
• origin: the protocol, the domain name and port
• password: password before the hostname
• pathname: Path (at /the beginning)
• port: Port
• protocol: Protocol (comprising trailing colon :)
• search: the query string (to ?begin with)
• username: user name before the hostname

// HTML 代码如下
// <a id="test" href="http://user:[email protected]: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:[email protected]: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"

In addition to originthe attribute is read-only, the above properties are readable and writable.

accessKey property

accessKeyProperty is used to read and write <a>shortcut key elements.

// HTML 代码如下
// <a id="test" href="http://example.com">test</a>
var a = document.getElementById('test');
a.accessKey = 'k';

The above code sets <a>the element shortcut key k, after just press the shortcut keys, the browser will jump to example.com.

Note that different browsers on different operating systems, evoke the function key shortcut key combination is not the same as the. For example, Chrome browser on Linux systems, you need to press Alt + k, will jump to example.com.

download property

downloadAttribute indicates the current link is not used to browse, but to download. Its value is a string representing the file name of the user downloaded.

// HTML 代码如下
// <a id="test" href="foo.jpg">下载</a>
var a = document.getElementById('test');
a.download = 'bar.jpg';

The above code, the <a>element is a picture link, by default, click on the picture will be loaded in the current window. Set up downloadafter the property, and then click on this link, they will download dialog box that asks the user to save the location, and download the file named bar.jpg.

hreflang attribute

hreflangProperty is used to read and write <a>elements of the HTML attribute hreflangindicates the language of links to resources, such as hreflang="en".

// HTML 代码如下
// <a id="test" href="https://example.com" hreflang="en">test</a>
var a = document.getElementById('test');
a.hreflang // "en"

referrerPolicy property

referrerPolicyProperty is used to read and write <a>elements of the HTML attribute referrerPolicy, specified when the user clicks the link, how to send information to HTTP header refererfields.

HTTP header information refererfield, indicates the current request came from. It can be formatted by the <a>element referrerPolicyspecified property, there are three values can be selected.

• no-referrer: Do not send refererfield.
• origin: refererField value is <a>the element originattributes, i.e., the protocol name + host + port.
• unsafe-url: refererField value is the originproperty plus the path, but does not contain the #fragment. Information in this format provides the most detail, there may be risk of information leakage.

// HTML 代码如下
// <a id="test" href="https://example.com" referrerpolicy="no-referrer">test</a>
var a = document.getElementById('test');
a.referrerPolicy // "no-referrer"

rel attribute

relProperty is used to read and write <a>elements of HTML attributes rel, shows the relationship between the link to the current document.

// HTML 代码如下
// <a id="test" href="https://example.com" rel="license">license.html</a>
var a = document.getElementById('test');
a.rel // "license"

tabIndex property

tabIndexAttribute value is an integer, for reading and writing the current <a>element in the document inside the Tab key traversal order.

// HTML 代码如下
// <a id="test" href="https://example.com">test</a>
var a = document.getElementById('test');
a.tabIndex // 0

The target property

targetProperty is used to read and write <a>elements of HTML attributes target.

// HTML 代码如下
// <a id="test" href="https://example.com" target="_blank">test</a>
var a = document.getElementById('test');
a.target // "_blank"

text attributes

textProperty is used to read and write <a>elements of the link text, equal to the current node textContentattributes.

// HTML 代码如下
// <a id="test" href="https://example.com">test</a>
var a = document.getElementById('test');
a.text // "test"

type properties

typeProperty is used to read and write <a>elements of the HTML attribute typeindicates the MIME type of the link target.

// HTML 代码如下
// <a id="test" type="video/mp4" href="example.mp4">video</a>
var a = document.getElementById('test');
a.type // "video/mp4"

method

<a>Element method are inherited, mainly in the following three.

• blur(): Removes keyboard focus from the current element, see the HTMLElementpresentation interface.
• focus(): The current element to obtain keyboard focus, detailed HTMLElementdescription of the interface.
• toString(): Returns the current <a>HTML attribute of the element href.