JavaScript - 获取、修改 title 元素的内容

最新推荐文章于 2024-07-17 02:08:11 发布

好好活着，不要熬夜

最新推荐文章于 2024-07-17 02:08:11 发布

阅读量1.9k

点赞数 2

分类专栏： HTML & CSS & JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_29761395/article/details/121008774

版权

HTML & CSS & JavaScript 专栏收录该内容

66 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何在JavaScript中获取和修改HTML文档的<title>元素内容。通过window.onload事件处理函数，展示了使用document.title和querySelector方法读取标题，并用setInterval定时更新标题，展示日期时间。文章适合前端开发者学习理解DOM操作。

摘要由CSDN通过智能技术生成

获取 title 元素的内容

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My Title</title>
    </head>
    <body>
        <script type="text/javascript">
            window.onload = function(event) {
                console.log(event)
                main()
            }

            function main() {
                // 方法一
                console.log(document.title)
                
                // 方法二
                const title = document.querySelector("title")
                console.log(title.innerText)
            }
        </script>
    </body>
</html>

修改 title 元素的内容

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My Title</title>
    </head>
    <body>
        <script type="text/javascript">
            window.onload = function(event) {
                // console.log(event);
                main();
            }

            function main() {
                window.setInterval(updateTitle, 1000);
            }
            
            function updateTitle() {
                const now = new Date();
                console.log(now.toLocaleString());
                
                // 方法一
                document.title = now.toLocaleString("zh-CN");
                
                // // 方法二
                // const title = document.querySelector("title");
                // title.innerText = now.toLocaleString("zh-CN");
            }
        </script>
    </body>
</html>