<a> element
<a>The element is used to set links. In addition to the common interfaces of web page elements (Node interface, Element interface, HTMLElement interface), it also inherits < a i=4>interface andinterface. HTMLAnchorElementHTMLHyperlinkElementUtils
Table of contents
Attributes #
URL mutual attribute #
<a>The element has a series of URL-related attributes that can be used to manipulate link addresses. The meaning of these attributes can be found in the instance attributes ofLocationobject.
- hash: fragment identifier (starting with
#) - host: host and port (default ports 80 and 443 are omitted)
- hostname: host name
- href: complete URL
- origin: protocol, domain name and port
- password: the password before the host name
- pathname: path (starting with
/) - port: port
- protocol: protocol (including trailing colon
:) - search: query string (starting with
?) - username: the username before the host name
// 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"
Except the origin attribute is read-only, all of the above attributes are read-write.
accessKey 属性 #
accessKeyThe attribute is used to read and write shortcut keys for <a> elements.
// HTML 代码如下
// <a id="test" href="http://example.com">test</a>
var a = document.getElementById('test');
a.accessKey = 'k';
The above code sets the shortcut key for the <a> element to k. In the future, as long as you press this shortcut key, the browser will jump to example.com.
Note that different browsers and different operating systems have different function key combinations to invoke shortcut keys. For example, in the Chrome browser under Linux system, you need to press to jump to . Alt + kexample.com
download attribute #
downloadThe 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 代码如下
// <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 attribute, and then clicking this link, a download dialog box will appear, asking the user for the save location, and the downloaded file will be named bar.jpg.
hreflang attribute #
hreflangThe attribute is used to read and write the HTML attribute of the <a> elementhreflang, indicating the language of the resource pointed to by the link, 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 属性 #
referrerPolicyThe attribute is used to read and write the HTML attributes of the field. , specifying how to send HTTP header information when the user clicks the link<a> elementreferrerPolicyreferer
The HTTP headerreferer field indicates where the current request comes from. Its format can be specified by the attribute of the <a> element, and there are three values to choose from. referrerPolicy
no-referrer：Not sentreferercharacter.origin: The value of therefererfield is the attribute of the<a>element, that is, protocol + host name + port.originunsafe-url: The value of therefererfield is theoriginattribute plus the path, but does not contain the#fragment. This format provides the most detailed information and may be at 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 #
relThe attribute is used to read and write the HTML attributes of the <a> elementrel, indicating the relationship between the link and 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 attribute #
tabIndexThe value of the attribute is an integer, used to read and write the tab key traversal order of the current <a> element in the document.
// HTML 代码如下
// <a id="test" href="https://example.com">test</a>
var a = document.getElementById('test');
a.tabIndex // 0
target 属性 #
targetThe attribute is used to read and write HTML attributes of the <a> element. target
// HTML 代码如下
// <a id="test" href="https://example.com" target="_blank">test</a>
var a = document.getElementById('test');
a.target // "_blank"
text attribute #
textThe 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 代码如下
// <a id="test" href="https://example.com">test</a>
var a = document.getElementById('test');
a.text // "test"
type 属性 #
typeThe attribute is used to read and write the HTML attributes of the <a> elementtype, indicating 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>The methods of elements are all inherited, mainly including the following three.
blur(): Remove keyboard focus from the current element. For details, see the introduction of theHTMLElementinterface.focus(): The current element gets keyboard focus. For details, see the introduction of theHTMLElementinterface.toString(): Should be returned<a>Elementary HTML attributehref.
This article is copied from: https://wangdoc.com/javascript/elements/a