資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 JavaScript 顯示文件中的連結數量？
我們使用document物件的links屬性來使用JavaScript顯示文件中的連結數量。document 物件是 DOM 的一部分，對應於瀏覽器已載入的當前網頁。它包含有關瀏覽器和網頁狀態的所有資訊。
links是document物件的屬性，它返回HTML文件中所有超連結的列表。超連結可能看起來像這樣：
"https://www.tutorialpoints.com/php"
document 物件的 links 屬性列出了所有具有 href 屬性和 <area>、<a> 標籤的 HTML 元素。
錨點標籤 <a> 用於在 HTML 中定義超連結。它包含 href 屬性，該屬性可以包含指向其他頁面、檔案等的超連結。
以下是一些示例：
<a href="https://tutorialspoint.tw/php">PHP</a> <a href="https://tutorialspoint.tw/html5">HTML</a>
<area> 標籤用於在影像內建立可點選區域。它包含各種屬性，例如shape、coords、href、alt等，用於定點陣圖像上的可點選區域。它始終用於map標籤內。
這是一個示例：
<area shape="rect" coords="184,6,253,27" href="https://mozilla.org" target="_blank" alt="Mozilla" />
使用 Document links 屬性
它是 document 物件的一個屬性。它包含文件中連結的列表及其關聯的屬性。我們可以使用length屬性獲取文件中連結的總數。
要獲取文件中連結的總數，我們可以按照以下語法進行操作。
語法
var val = document.links.length;
這裡val是文件中連結的總數。
讓我們來看一個例子以便更好地理解。
示例 1
在下面的程式碼片段中，我們在 HTML 文件中有 3 個超連結，我們將使用document.links按鈕來顯示文件中的連結數量。
<!DOCTYPE html> <html> <body> <a href="https://tutorialspoint.tw/php">PHP</a> <br> <a href="https://tutorialspoint.tw/java/">Java</a> <br> <a href="https://tutorialspoint.tw/html5/">HTML</a> <br> <a href="https://tutorialspoint.tw/css/">CSS</a> <script> var val = document.links.length; document.write("<br>Number of links in the document: "+val); </script> </body> </html>
它列印文件中的連結數量。
返回的連結列表可以迭代，並且其屬性也可以訪問。可以使用隨機訪問運算子 [] 訪問任何連結，並且其相應的屬性（如 href）可以與點 (.) 運算子連結。
語法
var ithURL = document.links[i].href
這訪問 HTML 文件中的第 i 個連結，並將其儲存在ithURL變數中。
示例 2
在下面的程式碼片段中，我們將建立一個按鈕，該按鈕首先提取 HTML 文件中存在的所有連結的列表，然後迭代該列表以記錄 HTML 主體中的每個超連結。
<!DOCTYPE html> <html> <body> <a href="https://tutorialspoint.tw/php">PHP</a> <br> <a href="https://tutorialspoint.tw/java/">Java</a> <br> <a href="https://tutorialspoint.tw/html5/">HTML</a> <br> <a href="https://tutorialspoint.tw/css/">CSS</a> <br><br> <button onclick = "findLinks()"> Find Links ! </button> <div id = "result"></div> <script> var links = document.links; var text = ""; var resultDiv = document.getElementById("result"); function findLinks(){ text += "<br>The number of links in the document is : " + links.length text += "<br>These are the " + links.length + " links in the document: <br><br>"; for(var i = 0 ; i < links.length ; i++){ text += links[i].href + "<br>"; } resultDiv.innerHTML = text; } </script> </body> </html>
查詢連結按鈕觸發findLinks()函式。在函式內部，我們使用 for 迴圈迭代列表，並使用 href 屬性在螢幕上記錄 URL。
使用 Document links item 屬性
另一種方法是使用document.links的item屬性。
var ithURL = document.links.item(i).href
它提取文件中第i個超連結，並將其儲存在ithURL變數中。
JavaScript還可以根據其 ID 從 HTML 文件中提取超連結。
var myURL = document.links.nameItem("YOUR_ID").href
讓我們透過一個示例更好地瞭解這兩個屬性：
示例 3
在下面的程式碼片段中，我們向文件添加了一個新的超連結，併為其提供了一個 ID。然後我們使用此 ID 來提取相關的超連結。
<!DOCTYPE html> <html> <body> <a id = "mylink" href="https://tutorialspoint.tw">Link to my site</a> <br><br> Link to courses: <a href="https://tutorialspoint.tw/php">PHP</a> <br> <a href="https://tutorialspoint.tw/java/">Java</a> <br> <a href="https://tutorialspoint.tw/html5/">HTML</a> <br> <a href="https://tutorialspoint.tw/css/">CSS</a> <br><br> <button onclick = "findLinks()"> Find Links ! </button> <div id = "result"></div> <script> var links = document.links; var text = ""; var resultDiv = document.getElementById("result"); function findLinks(){ text += "<br>The number of links in the document is : " + links.length text += "<br>These are the links in the document: <br><br>"; text += links.namedItem("mylink").href + "<br>"; for(var i = 0 ; i < links.length ; i++){ if(links.item(i).id == "mylink") continue; <br><br> text += links.item(i).href + "<br>"; } resultDiv.innerHTML = text; } </script> </body> </html>
“查詢連結！”按鈕觸發findLinks() JavaScript 函式。因為我們不想記錄重複的超連結，所以需要跳過 id 屬性等於“mylink”的連結。連結的id屬性用於該比較。
結論
document 物件的 links 屬性對於操作 HTML 文件中存在的超連結非常有用。各種帶有 id 標籤的超連結可以用作 Web 應用程式中的標準，從而提供便利。
627 次檢視
