Document.title() 在 JavaScript 中的使用?

front end technologyjavascriptweb development

可以使用 document.title 属性获取或更改文档的当前标题。如果存在，则默认使用 <title> 的值。

您可以使用 document.title 属性更改或获取文档的当前标题。通过向此属性提供新标题作为字符串，可以更改页面的标题。所选标题将立即反映在网站的标题中。

在本文中，您将看到两种用于更改或使用 JavaScript 中的 Document.title() 的方法

使用 document.title 属性 − 您可以使用 document.title 属性设置或获取文档的当前标题。通过将新标题作为字符串传递给此属性，可以修改页面的标题。通过这样做，网站的推荐标题将会改变。

语法

以下是 document.title 属性的语法

newPageTitle = '标题已改变!';
document.title = newPageTitle;

值

包含文档标题的字符串。如果通过设置修改了标题，则包含 document.title 的值。如果没有，则存在标记指定的标题。

论文的新标题是 newTitle。分配对文档的返回值有影响。title，为文档发布的标题，例如在窗口或选项卡的标题栏中，以及对页面的 DOM 有影响，例如 <title> 的内容HTML 文档中的元素。

示例 1

在继续之前，让我们先了解一下此示例中 Document.title 是如何编写并执行的。


<!DOCTYPE html>
<html>
<title>Document.title() use in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>

      // displays "Document.title() use in JavaScript - TutorialsPoint"
      document.write(document.title +'<br>');
      document.title = "Title has been changed!";
      document.write(document.title); // displays "Title has been changed!"
   </script>
</body>
</html>

注意 - 您可以在浏览器上看到更改后的标题。

示例 2

使用 document.title 属性 - 在此示例中，让我们了解如何使用 javascript 动态更改文档的标题。


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>
      Describes how to use JavaScript to dynamically modify a web page's title.
   </title>
</head>
<body style="text-align:center">
   <h1 style="color: rgba(15, 15, 151, 0.839)">
      Tutorialspoint
   </h1>
   <b>
      Once you click the button you will see the document/page title will be changed dynamically.
   </b>
   <p>
      Click on the button: "Tutorialspoint is changed title!"
   </p>
   <button onclick="switchTitle()">
      Change Page Title
   </button>
   <script type="text/javascript">
      function switchTitle() {
         switchTitle = 'Tutorialspoint is changed title!';
         document.querySelector('title').textContent = switchTitle;
      }
   </script>
</body>
</html>

注意 - 您可以在浏览器上看到更改后的标题。

使用 querySelector() 方法 - 要选择特定的文档元素，请使用 document.querySelector() 方法。可以通过将标题元素作为参数包含在选择中来选择它。页面的当前标题元素将由此返回。节点的特定文本内容通过元素的"textContent"属性返回。通过提供字符串作为新标题的"textContent"属性值，可以更新页面的标题。所需的标题将用作网站的新标题。

语法

以下是 querySelector() 方法的语法

newPageTitle = '标题已更改!';
document.querySelector('title').textContent = newPageTitle;

示例 3

使用 querySelector() 方法 − 在此示例中，让我们了解如何使用 javascript document.querySelector() 方法返回页面的当前标题元素。


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>
      Describes how to use JavaScript that will return the current title element of the page.
   </title>
</head>
<body style="text-align:center">
   <h1 style="color: rgba(15, 15, 151, 0.839)">
      Tutorialspoint
   </h1>
   <b>
      Once you click the button you will see the document/page title will be changed dynamically.
   </b>
   <p>
      Click on the button: "Tutorialspoint is changed title!"
   </p>
   <button onclick="switchTitle()">
      Change Title
   </button>
   <script type="text/javascript">
      function switchTitle() {
         newDocTitle = 'Tutorialspoint is changed title!';
         document.querySelector('title').textContent = newDocTitle;
      }
   </script>
</body>
</html>