JavaScript 如何动态更改网页标题

给定一个包含网页标题的网页，任务是使用JavaScript动态更改网页标题。

页面标题是对网页的简洁描述，显示在浏览器选项卡的顶部。<title>标签用于指定文档的标题，简单的文本标题将显示在页面选项卡或浏览器的标题栏中。每个访问的网页的标题应根据其内容进行调整。

有两种方法可以更改页面标题：

JavaScript的document.title属性
DOM查询选择器方法

方法1：使用JavaScript的document.title属性

这个属性用于设置或返回文档的当前标题。通过将新的标题作为字符串分配给该属性，可以更改网站的标题。

语法：

newPageTitle = 'The title has changed!';
document.title = newPageTitle;

示例: 在这个示例中，我们使用了上面解释的方法。

<!DOCTYPE html>
<html>
<head>
    <title>
        How to dynamically change a web
        page’s title using JavaScript ?
    </title>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
 
    <b>
        How to dynamically change a web
        page’s title using JavaScript ?
    </b>
 
    <p>
        Click on the button to change the page
        title to: "The title has changed!"
    </p>
 
    <button onclick="changePageTitle()">
        Change Page Title
    </button>
 
    <script type="text/javascript">
        function changePageTitle() {
            newPageTitle = 'The title has changed!';
            document.title = newPageTitle;
        }
    </script>
</body>
</html>

输出：

JavaScript 如何动态更改网页标题

方法2：使用DOM querySelector()方法

通过这个方法可以在文档中选择元素，可以通过将标题元素指定为选择器的参数来选择标题元素。这将返回页面的当前标题元素。元素的 textContent 属性返回特定节点的文本内容。可以通过将所需的新标题作为字符串赋值给textContent属性来更改页面的标题。这将把网站的标题更改为所需的标题。

语法：

newPageTitle = 'The title has changed!';
document.querySelector('title').textContent = newPageTitle;

示例: 在这个示例中，我们使用上述方法。

<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to dynamically change a web
        page’s title using JavaScript ?
    </title>
</head>
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
 
    <b>
        How to dynamically change a web
        page’s title using JavaScript ?
    </b>
 
    <p>
        Click on the button to change the page
        title to: "The title has changed!"
    </p>
 
    <button onclick="changePageTitle()">
        Change Page Title
    </button>
 
    <script type="text/javascript">
        function changePageTitle() {
            newPageTitle = 'The title has changed!';
            document.querySelector('title').textContent
                = newPageTitle;
        }
    </script>
</body>
</html>