参考资料

  1. HTML DOM 导航节点关系
  2. HTML DOM 返回图像映射的某个区域的pathname 实例
  3. HTML DOM禁用和启用下拉列表
  4. HTML DOM一个行的innerHTML
  5. HTML DOM 提交表单
  6. HTML DOM 访问
  7. HTML DOM 改变iframe的高度和宽度
  8. HTML DOM将下拉列表变成多行列表

HTML DOM 返回文档的标题实例

HTML DOM 返回文档标题实例

详细介绍

HTML DOM 提供了访问和操作文档标题的方法，主要通过 document.title 属性实现。这个属性可以获取或设置当前文档的标题（即 <title> 标签的内容）。

标签

主要涉及的 HTML 标签是 <title>，它位于 <head> 部分。

用法

// 获取文档标题
var currentTitle = document.title;

// 设置文档标题
document.title = "新标题";

实例

<!DOCTYPE html>
<html>
<head>
    <title>初始标题</title>
</head>
<body>
    <button onclick="getTitle()">获取标题</button>
    <button onclick="changeTitle()">修改标题</button>
    
    <script>
        function getTitle() {
            alert("当前标题是: " + document.title);
        }
        
        function changeTitle() {
            document.title = "修改后的标题";
            alert("标题已修改");
        }
    </script>
</body>
</html>

功能

  1. 动态获取网页标题

  2. 动态修改网页标题

  3. 可用于标签页切换时的标题变化

  4. 可用于SEO优化或用户体验提升

CSS 扩展

虽然不能直接用 CSS 修改文档标题，但可以通过 JavaScript 结合 CSS 类来实现样式变化：

<style>
    .highlight-title {
        color: red;
        /* 其他样式 */
    }
</style>

<script>
    function highlightTitle() {
        document.title = "★ " + document.title + " ★";
        // 虽然不能直接样式化<title>，但可以改变其内容
    }
</script>
TAG：标题文档标签实例主要属性动态网页详细方法