In this tutorial, we will understand two approaches to display the document's title using
JavaScript.
Using document.title Property
#One of the most used methods in JavaScript to access an HTML document's title is using a document.title property. In the following example, you will learn to get access to the title. After essexing the ti in JavaScript , learn to get access to the title. After essing the tle inacc 點it and change the way it is displayed on a website.
文法
在這裡，您可以看到如何使用onClick方法，我們可以設定文件中段落的innerHTML。 document.title用於取得標題，並在按一下指定按鈕時顯示標題。
title.innerHTML = document.title;
登入後複製
演算法
Step 1
− Write a title in an HTML document file.
第二步驟
- 使用onClick方法建立一個按鈕，以便取得標題。
步驟 3
− 建立一個段落標籤，用於顯示抓取的標題。
第四步驟
- 設定文件中不同元素所需的變數。
Step 5
− Create a function for the button onClick.
Step 6
− Give the paragraph tag’s variable innerHTML using the document.title method.
Example 1
的中文翻譯為：範例 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>
登入後複製
Using the etElementsByTagName() Method
通常，我們需要使用JavaScript函數來取得標題，以便在不同平台上進行操作。在這個方法中，您將學習如何使用document.getElementsByTagName()屬性來取得標題。此方法接受一個標籤名稱作為參數，並傳回具有指定標籤名稱的所有元素的集合。
文法
document.getElementsByTagName("title")[idx];
登入後複製
「title」 is the parameter to the method.
該方法將傳回所有帶有標籤“title”
的元素的集合。
We need to apply indexing to the received collection to get the different elements. Here idx is the index of the title. For example, to get the first title we set the idx to 0, and in the same way to get the second title we set the idx to 1.
演算法
Step 1
− Write something within the title tags of the HTML document.
第二步驟
- 建立按鈕標籤以便能夠使用onClick方法。
Step 3
− Create paragraph tags and give them an id to get access in JavaScript.
第四步驟
- 您可以為文件中的所有重要元素指派id或class。
Step 5
− Create a different variable that can grab the required elements.
第六步
- 建立一個onClick方法的函數。
第7步
- 應該使用tagName()屬性來設定為段落建立的變數innerHTML。
Example 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存取標題可能是一個很好的起點。 ###
以上是如何使用JavaScript顯示文件的標題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
