資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 顯示文件標題？
在本教程中，我們將瞭解兩種使用 JavaScript 顯示文件標題的方法。
使用 document.title 屬性
在 JavaScript 中，訪問 HTML 文件標題最常用的方法之一是使用 document.title 屬性。在以下示例中，您將學習如何訪問標題。在 JavaScript 中訪問標題後，您可以對其進行操作並更改其在網站上的顯示方式。
語法
在這裡您可以看到，如何透過使用 onClick 方法，我們可以設定文件中段落的 innerHTML。document.title 用於獲取標題，並在單擊指定按鈕時顯示標題。
title.innerHTML = document.title;
演算法
步驟 1 - 在 HTML 文件檔案中編寫標題。
步驟 2 - 建立一個按鈕，使用 onClick 方法訪問標題。
步驟 3 - 建立一個段落標籤，以便顯示獲取的標題。
步驟 4 - 為文件中的不同元素設定所需的變數。
步驟 5 - 為按鈕的 onClick 建立一個函式。
步驟 6 - 使用 document.title 方法為段落標籤的變數 innerHTML 賦值。
示例 1
您可以在下面看到，我們如何在不為 HTML 檔案中的標題提供任何 id 或 class 的情況下訪問文件的標題。document.title 可用於訪問標題。
<html> <head> <title> This is the title accessed from the document </title> </head> <body> <h3> Please click the button to get the title of the document</h3> <button id="titleBtn" onClick="titleButton()">Check Title</button> <p id="result"></p> <script> var paraTitle = document.getElementById('result'); function titleButton() { paraTitle.innerHTML = document.title; document.getElementById('titleBtn').style.visibility = 'hidden'; } </script> </body> </html>
使用 etElementsByTagName() 方法
通常，我們必須使用 JavaScript 函式來獲取標題，以操作其在不同平臺上的顯示方式。在這種方法中，您將學習如何使用 document.getElementsByTagName() 屬性獲取標題。該方法接受標籤名稱作為引數，並返回具有指定標籤名稱的所有元素的集合。
語法
document.getElementsByTagName("title")[idx];
這裡“title”是該方法的引數。
該方法將返回所有具有標籤“title”的元素的集合。
我們需要對接收到的集合應用索引才能獲取不同的元素。這裡idx是標題的索引。例如，要獲取第一個標題，我們將idx設定為0，同樣，要獲取第二個標題，我們將idx設定為1。
演算法
步驟 1 - 在 HTML 文件的 title 標籤內寫入一些內容。
步驟 2 - 建立按鈕標籤以便能夠使用 onClick 方法。
步驟 3 - 建立段落標籤併為其提供 id 以便在 JavaScript 中訪問。
步驟 4 - 您可以為文件中的所有重要元素提供 id 或 class。
步驟 5 - 建立一個不同的變數，可以獲取所需的元素。
步驟 6 - 建立一個 onClick 方法函式。
步驟 7 - 為段落的建立的變數使用 tagName() 屬性賦予 innerHTML。
示例 2
在本例中，我們將按標籤名稱選擇標題。您將學習如何使用 document.getElementsByTagName() 方法快速從 HTML 文件中獲取標題。我們在 HTML 文件中添加了兩個標題。我們使用兩個按鈕找到這兩個標題。
<html> <head> <title> This is the first title accessed using index 0. </title> <title> This is the second title accessed using index 1.</title> </head> <body> <h3>Getting the Title of the document using Tag Name. </h3> <button id="titleBtn" onClick="titleButton()">Check First Title</button> <button id="secondBtn" onClick="secondButton()">Check Second Title</button> <p id="paraTitle"> </p> <script> var paraTitle = document.getElementById('paraTitle'); function titleButton() { var title = document.getElementsByTagName("title")[0]; paraTitle.innerHTML = title.innerHTML; } function secondButton() { var title = document.getElementsByTagName("title")[1]; paraTitle.innerHTML = title.innerHTML; } </script> </body> </html>
在這裡您可以看到，我們添加了兩個按鈕來顯示文件中的不同標題。透過此輸出，您可以瞭解到，在 tagName() 屬性後新增 0 索引可以幫助訪問第一個標題。
document.title 屬性和 getElementByTagName() 方法都用於訪問文件的標題。在選擇首選方法之前，您可以嘗試使用 JavaScript 中的這兩種方法。如果您想操作文件標題的行為，那麼使用 JavaScript 訪問標題可以是一個良好的起點。
3K+ 瀏覽量
