Document.title() 在 JavaScript 中的使用?
可以使用 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>
注意 − 您可以在浏览器上看到更改后的标题。
