<a>
元素用來設(shè)置鏈接。除了網(wǎng)頁元素的通用接口(Node
接口、Element
接口、HTMLElement
接口),它還繼承了HTMLAnchorElement
接口和HTMLHyperlinkElementUtils
接口。
屬性
URL 相關(guān)屬性
<a>
元素有一系列 URL 相關(guān)屬性,可以用來操作鏈接地址。這些屬性的含義,可以參見Location
對象的實(shí)例屬性。
- hash:片段識別符(以
#
開頭) - host:主機(jī)和端口(默認(rèn)端口80和443會省略)
- hostname:主機(jī)名
- href:完整的 URL
- origin:協(xié)議、域名和端口
- password:主機(jī)名前的密碼
- pathname:路徑(以
/
開頭) - port:端口
- protocol:協(xié)議(包含尾部的冒號
:
) - search:查詢字符串(以
?
開頭) - username:主機(jī)名前的用戶名
// HTML 代碼如下
// <a id="test" href="http://user:passwd@example.com:8081/index.html?bar=1#foo" rel="external nofollow" target="_blank" >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"
除了origin
屬性是只讀的,上面這些屬性都是可讀寫的。
accessKey 屬性
accessKey
屬性用來讀寫<a>
元素的快捷鍵。
// HTML 代碼如下
// <a id="test" rel="external nofollow" target="_blank" >test</a>
var a = document.getElementById('test');
a.accessKey = 'k';
上面代碼設(shè)置<a>
元素的快捷鍵為k
,以后只要按下這個快捷鍵,瀏覽器就會跳轉(zhuǎn)到example.com
。
注意,不同的瀏覽器在不同的操作系統(tǒng)下,喚起快捷鍵的功能鍵組合是不一樣的。比如,Chrome 瀏覽器在 Linux 系統(tǒng)下,需要按下Alt + k
,才會跳轉(zhuǎn)到example.com
。
download 屬性
download
屬性表示當(dāng)前鏈接不是用來瀏覽,而是用來下載的。它的值是一個字符串,表示用戶下載得到的文件名。
// HTML 代碼如下
// <a id="test" href="foo.jpg">下載</a>
var a = document.getElementById('test');
a.download = 'bar.jpg';
上面代碼中,<a>
元素是一個圖片鏈接,默認(rèn)情況下,點(diǎn)擊后圖片會在當(dāng)前窗口加載。設(shè)置了download
屬性以后,再點(diǎn)擊這個鏈接,就會下載對話框,詢問用戶保存位置,而且下載的文件名為bar.jpg
。
hreflang 屬性
hreflang
屬性用來讀寫<a>
元素的 HTML 屬性hreflang
,表示鏈接指向的資源的語言,比如hreflang="en"
。
// HTML 代碼如下
// <a id="test" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" hreflang="en">test</a>
var a = document.getElementById('test');
a.hreflang // "en"
referrerPolicy 屬性
referrerPolicy
屬性用來讀寫<a>
元素的 HTML 屬性referrerPolicy
,指定當(dāng)用戶點(diǎn)擊鏈接時,如何發(fā)送 HTTP 頭信息的referer
字段。
HTTP 頭信息的referer
字段,表示當(dāng)前請求是從哪里來的。它的格式可以由<a>
元素的referrerPolicy
屬性指定,共有三個值可以選擇。
no-referrer
:不發(fā)送referer
字段。origin
:referer
字段的值是<a>
元素的origin
屬性,即協(xié)議 + 主機(jī)名 + 端口。unsafe-url
:referer
字段的值是origin
屬性再加上路徑,但不包含#
片段。這種格式提供的信息最詳細(xì),可能存在信息泄漏的風(fēng)險(xiǎn)。
// HTML 代碼如下
// <a id="test" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" referrerpolicy="no-referrer">test</a>
var a = document.getElementById('test');
a.referrerPolicy // "no-referrer"
rel 屬性
rel
屬性用來讀寫<a>
元素的 HTML 屬性rel
,表示鏈接與當(dāng)前文檔的關(guān)系。
// HTML 代碼如下
// <a id="test" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="license">license.html</a>
var a = document.getElementById('test');
a.rel // "license"
tabIndex 屬性
tabIndex
屬性的值是一個整數(shù),用來讀寫當(dāng)前<a>
元素在文檔里面的 Tab 鍵遍歷順序。
// HTML 代碼如下
// <a id="test" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >test</a>
var a = document.getElementById('test');
a.tabIndex // 0
target 屬性
target
屬性用來讀寫<a>
元素的 HTML 屬性target
。
// HTML 代碼如下
// <a id="test" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" target="_blank">test</a>
var a = document.getElementById('test');
a.target // "_blank"
text 屬性
text
屬性用來讀寫<a>
元素的鏈接文本,等同于當(dāng)前節(jié)點(diǎn)的textContent
屬性。
// HTML 代碼如下
// <a id="test" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >test</a>
var a = document.getElementById('test');
a.text // "test"
type 屬性
type
屬性用來讀寫<a>
元素的 HTML 屬性type
,表示鏈接目標(biāo)的 MIME 類型。
// HTML 代碼如下
// <a id="test" type="video/mp4" href="example.mp4">video</a>
var a = document.getElementById('test');
a.type // "video/mp4"
方法
<a>
元素的方法都是繼承的,主要有以下三個。
blur()
:從當(dāng)前元素移除鍵盤焦點(diǎn),詳見HTMLElement
接口的介紹。focus()
:當(dāng)前元素得到鍵盤焦點(diǎn),詳見HTMLElement
接口的介紹。toString()
:返回當(dāng)前<a>
元素的 HTML 屬性href
。
更多建議: