資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 JavaScript 中查詢文件中連結的 href 屬性？
在本文中，我們將學習如何在 JavaScript 中查詢文件中連結的 href 屬性。
JavaScript 中的 DOM 屬性提供了許多屬性，例如 <head>、<title>、<body>、<link>、<a>、<style>。我們可以用兩種方法在 HTML DOM 中表示連結。DOM 物件提供 links 屬性。
錨標記中的 href 屬性指定 URL。要獲取 href 屬性，我們需要找到錨物件的引用。
為了更好地理解這個概念，讓我們進一步瞭解本文中錨物件的 href 屬性的語法和用法。
語法
獲取錨物件 href 屬性的語法如下所示。
anchorObject.href
示例 1
以下是一個示例程式，使用 getElementsByTagName() 和 getElementByID() 方法獲取錨物件的 href 屬性。
<!DOCTYPE html>
<html>
<head>
<title>To find the href attribute of a link in a document in JavaScript</title>
</head>
<body style="text-align : center">
<h3>To find the href attribute of a link in a document in JavaScript</h3>
<a name="Google" href="https://www.google.com/" title="Home page for Google">Google</a><br>
<a name="Facebook" href="https://#/" title="Home Page for Facebook">Facebook</a><br>
<a name="Youtube" href="https://www.youtube.com/" title="Home Page for Youtube">Youtube</a><br>
<p id="text1"></p>
<script>
document.getElementById("text1").innerHTML = "The link for first anchor element is : "+document.getElementsByTagName("a")[0].href+"<br/>"+" The link for the id 'yo' is : "+document.getElementById('yo').href;
</script>
</body>
</html>
執行上述程式碼後，將生成以下輸出。
示例 2
以下是一個示例程式，使用 querySelector() 方法獲取錨物件的 href 屬性。
<!DOCTYPE html>
<html>
<head>
<title>To find the href attribute of a link in a document in JavaScript</title>
</head>
<body style="text-align : center">
<h3>To find the href attribute of a link in a document in JavaScript</h3>
<a name="Google" href="https://www.google.com/" title="Home page for Google">Google</a><br>
<a name="Facebook" href="https://#/" title="Home Page for Facebook">Facebook</a><br>
<a name="Youtube" href="https://www.youtube.com/" title="Home Page for Youtube">Youtube</a><br>
<p id="text1"></p>
<script>
// The document.querySelector('a') will return the first element within the document that matches the specified selector.
document.getElementById("text1").innerHTML = "The link for the first anchor element is : "+document.querySelector('a').href;
</script>
</body>
</html>
執行上述程式碼後，將生成以下輸出。
示例 3
以下是一個示例程式，獲取文件內所有 href 標記連結。
<!DOCTYPE html>
<html>
<head>
<title>To get all the href links in a document in JavaScript</title>
</head>
<body style="text-align : center">
<h3>To display all the href links in a document in JavaScript</h3>
<a name="google" href="https://www.google.com/" title="Google Home Page">Google</a><br>
<a name="Facebook" href="https://#/" title="Home Page for Facebook">Facebook</a><br>
<a name="youtube" href="https://www.youtube.com/" title="Youtube Home Page">Youtube</a><br>
<p id="text1"></p>
<script>
var result="";
for(var i=0;i<document.links.length;i++){
result += "Title "+(i+1)+" : "+document.getElementsByTagName('a')[i].title+"<br/>"+" Link "+(i+1)+" : "+document.links[i].href+"<br/>";
}
document.getElementById("text1").innerHTML = "The links in the document are : "+'<br/>'+result;
</script>
</body>
</html>
執行上述程式碼後，將生成以下輸出。
更新於: 2022-12-08
3K+ 瀏覽量
廣告