資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究JavaScript - 獲取 href 值
JavaScript 獲取 href 值對於需要快速訪問 HTML 元素 href 屬性值的 Web 開發人員和設計師來說是一個有用的工具。
本文將提供逐步說明，介紹如何使用 JavaScript 獲取網頁上 href 屬性的值，以及一些技巧，以充分利用此強大功能。能夠快速獲取 HTML 元素屬性 的值可以幫助加快開發速度並提高效率，讓我們開始吧！
在 JavaScript 中，href 屬性的值是一個 URL，指示瀏覽器在單擊連結時跳轉到的位置。請注意其他特性 target= "_blank" 和 rel= "noopener" 指示瀏覽器在新標籤頁中開啟網站。
使用 JavaScript 中的 querySelector() 獲取 href 值
querySelector() 是 JavaScript 中用於查詢 DOM（文件物件模型）並返回與給定 CSS 選擇器匹配的第一個元素的方法。它可用於按 ID、類名或任何其他有效的 CSS 選擇器選擇元素。如果找不到匹配項，此方法將返回 NULL。
語法
以下是 querySelector() 的語法
element = document.querySelector(selectors);
示例 1
在以下示例中，我們使用 querySelector() 返回文件中的錨標記。稍後，我們將訪問 href 屬性以獲取 href 屬性的值。
<!DOCTYPE html>
<html>
<body>
<a href="https://tutorialspoint.tw/index.htm">Direct To Open</a>
<br><br>
<button id="submit">Click</button>
<script>
document.getElementById('submit').onclick = function() {
var href = document.querySelector('a').href;
alert(href);
}
</script>
</body>
</html>
指令碼執行後，將生成一個輸出，其中包含一個帶有“直接開啟”文字的 href 連結以及網頁上的一個點選按鈕。當用戶單擊按鈕時，事件被觸發，並在網頁上顯示 href 值的警報。
示例 2
讓我們看看下面的示例，我們使用 querySelector() 獲取 href 屬性的值。
<!DOCTYPE html>
<html>
<body>
<a href="https://www.google.com/">Open</a>
<br><br>
<button id="submit">Click</button>
<p id="tutorial"></p>
<script>
document.getElementById('submit').onclick = function() {
var anchor = document.querySelector("a")
document.getElementById("tutorial").innerHTML=(anchor.getAttribute('href'));
}
</script>
</body>
</html>
執行指令碼後，它將生成一個包含連結和點選按鈕的輸出。如果使用者單擊按鈕，則觸發事件並在 Web 瀏覽器上顯示 href 屬性的值。
使用 JavaScript 中的 getAttribute() 獲取 href 值
Element 介面的 getAttribute() 方法返回元素上提供的屬性的值。如果請求的屬性不存在，則將返回 null 或 ""（空字串）。
語法
以下是 getAttribute() 的語法
getAttribute(attributeName)
示例
考慮以下示例，我們使用 getAttribute() 獲取指定錨標記上 href 屬性的值。
<!DOCTYPE html>
<html>
<body>
<a href="https://www.youtube.com/">Direct To Open</a>
<br><br>
<button id="submit">Click</button>
<script>
document.getElementById('submit').onclick = function() {
var href = document.querySelector('a').getAttribute('href');
document.write(href);
}
</script>
</body>
</html>
執行上述指令碼後，Web 瀏覽器會在網頁上顯示 href 連結以及文字和點選按鈕。如果使用者單擊按鈕，則會觸發事件並在 Web 瀏覽器上顯示 href 值。
使用 attr() 獲取 href 值
attr() 方法用於設定或返回所選元素的屬性及其值。如果用於返回 屬性值，則返回第一個匹配的元素。
語法
以下是 attr() 的語法
$(selector).attr(attribute)
示例
執行以下程式，我們執行指令碼以獲取 href 屬性的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<ul class="getURLDemo">
<li>
<a class="demo" title="get the url" href="./mainPage.jsp/1245">Open</a>
</li>
</ul>
<script>
var hrefValue = $('ul.getURLDemo li a.demo').attr('href');
document.write(hrefValue);
</script>
</body>
</html>
指令碼執行後，事件被觸發，並顯示連結以及 href 屬性的值。
10K+ 次瀏覽
