参考资料

  1. HTML DOM 获取第一个链接ID的实例
  2. HTML DOM 返回和设置一个iframe中的scrolling属性的值
  3. HTML DOM为表格创建一个标题
  4. HTML DOM 给image加上border
  5. HTML DOM 改变iframe的高度和宽度
  6. HTML DOM 返回文档中第一个图像的ID
  7. HTML DOM 事件
  8. 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：标题文档标签实例主要属性动态网页详细方法