如何使用 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 或类的情况下访问文档的标题。 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 文档的标题标签内写一些内容。
步骤 2 - 创建按钮标签以便能够使用 onClick 方法。
步骤 3 - 创建段落标签并为其指定 id 以在 JavaScript 中访问。
步骤 4 - 您可以为文档中的所有重要元素指定 id 或类。
步骤 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 获取标题访问权限可能是一个很好的起点。
