如何使用 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 访问标题可以是一个良好的起点。

更新于: 2022-10-31

3K+ 浏览量

开启您的 职业生涯

完成课程获取认证

立即开始
广告