在 JavaScript 中獲取 href

1. 在 JavaScript 中獲取 href 或位置
2. 在 JavaScript 中使用 getAttribute() 獲取 Href
3. 在 JavaScript 中使用 href 屬性獲取 Href

本文將介紹如何在 JavaScript 中獲取 href/location。JavaScript 元件提供兩種選擇；第一個使用 location 屬性，第二個使用 open 方法。

在 JavaScript 中獲取 href 或位置

location 介面表示它所連結的物件的位置 (URL)。Document 和 Windows 介面有一個關聯的位置，可以通過 document.location 或 window.location 訪問。

它們之間最大的區別是它們的瀏覽器相容性。window.location 被所有支援的瀏覽器讀取/寫入。

document.location 在 IE 中是隻讀的，但在基於 Gecko 的瀏覽器（如 Firefox）中是讀/寫的。

為了與瀏覽器通訊，JavaScript 提供了主視窗物件。表示瀏覽器視窗。

所有全域性變數和函式都成為元件的成員。視窗位置物件用於獲取當前頁面的 URL 並更改重定向 URL。

在 JavaScript 中使用 getAttribute() 獲取 Href

Element 介面的 getAttribute() 方法返回元素的指定屬性的值。如果指定的屬性不存在，則返回值為 null 或" "（空字串）。

語法：

const attributeOutput = element.getAttribute(attributeName);

attributeName 是你要檢索其值的屬性名稱。它返回包含 attributeName 值的字串。

關於 getAttribute 函式的更多資訊可以在 getAttribute 的文件中找到。

<a id="google" href="https://www.google.com"></a>
<a id="local" href="aboutUs"></a>

const value1 = document.getElementById('google').getAttribute('href');
const value2 = document.getElementById('local').getAttribute('href');
console.log(value1);
console.log(value2);

在上面的程式碼中，我們使用元素的 getAttribute 方法來獲取與請求元素關聯的 select 屬性的值。在任何瀏覽器中執行上述程式碼後，它會列印出類似這樣的內容。

輸出：

"https://www.google.com"
"aboutUs"

在 JavaScript 中使用 href 屬性獲取 Href

HTMLAnchorElement.href 屬性是一個字串化器，它返回一個包含完整 URL 的 USVString 並允許更新 href。

getAttribute() 和 href 屬性之間的唯一區別是先驗返回 anchor 元素的值。相反，後者返回 anchor 元素指向的完整路徑。

語法：

// Getting href
string = anchorElement.href;
// Setting href
anchorElement.href = string;

例子：

<a id="google" href="https://www.google.com"></a>
<a id="local" href="aboutUs"></a>

const value1 = document.getElementById('google').href;
const value2 = document.getElementById('local').href;
console.log(value1);
console.log(value2);

在上面的程式碼中，我們使用了 anchor 元素的 href 屬性，它將給出 anchor 元素指向的完整路徑。在任何瀏覽器中執行上述程式碼後，它會列印出類似這樣的內容。

輸出：

"https://www.google.com/"
"https://fiddle.jshell.net/_display/aboutUs"