2.1.6 href屬性的背后也有細節知識

長話短說，講三個你可能不知道的關于href屬性的細節知識。

1.自動絕對地址

如何使用JavaScript代碼將一個相對地址轉換為絕對地址？

方法一是使用new URL()方法，語法示意：

設置base參數為你希望的域名，此時就會自動返回絕對地址，例如：

不過此方法只能用在不需要考慮IE瀏覽器的產品中。

方法二是使用<a>元素的href屬性（<form>元素的action屬性亦可）。

代碼示意：

運行結果如圖2-10所示。

也就是說，當href屬性值直接訪問的時候，瀏覽器會自動將其轉換為絕對地址。

但上面的實現有一個不足之處，就是補全的域名只能是當前頁面所在的域名地址，如果希望指定域名，怎么辦呢？

可以使用<base>元素臨時指定，代碼實現示意：

上面的代碼，無論在哪個網站運行，其輸出結果都是穩定的。

href方法的優點就是兼容性非常好，哪怕是IE8瀏覽器也是支持的，以及href方法不用擔心解析報錯（非法的url字符串使用newURL()方法解析的時候，會報Uncaught TypeError錯誤）。

另外，想要了解更多<base>元素的知識，可以閱讀下一節的內容。

2.錨點定位

錨點定位的本質是頁面滾動，而與滾動相關的CSS特性非常多，若要深究，篇幅定會冗長，所以這里不做展開，只講和href屬性相關的那點知識。

href的屬性值如果以“＃”開頭，則點擊此鏈接就會觸發錨點定位。

例如：

點擊“查看案例”字樣的鏈接，瀏覽器會自動查詢頁面中有沒有id屬性值是'example'的元素（在過去，還會匹配name屬性值是'example'的鏈接元素）。如果有，則會通過改變滾動距離的方式，讓該元素定位到瀏覽器的上邊緣（默認位置，可以通過CSS屬性修改為下邊緣或垂直居中）；如果沒有匹配，則不會有錨點定位，唯一的變化是瀏覽器的URL地址的hash值會變成＃example。

但我想講的內容不是上面這個前端開發人員都知道的知識，而是下面的內容：

當href屬性值是＃top的時候，點擊該鏈接會讓頁面滾動到頂部，其效果等同于href="＃"，這是個很有趣的細節知識。

當然，如果頁面中存在id="top"的元素，那么此時還是優先定位這個元素，而不是滾動到頂部。

3.無障礙訪問

<a>元素自帶多個無障礙訪問特性，例如，能夠使用Tab鍵聚焦，可以按回車鍵觸發點擊行為。

但很多人并不知道，這些無障礙訪問行為的存在，全部都是因為有href屬性。

一個鏈接元素，如果沒有href屬性，那么，這個元素是不能被鍵盤訪問的，也不能匹配像：any-link這樣的CSS選擇器，此時，其行為表現本質上和<span>一樣，就是個普通的內聯元素。

因此，在日常開發中，當<a>元素被當作按鈕使用的時候，會有如下所示的href屬性值設置：

href="javascript："看起來不參與任何行為，實際上保留了當前元素的可訪問性，是不能刪除的。