在 JavaScript 中獲取 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"
Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.
LinkedIn