a · JavaScript 教程

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