使用 Javascript 从 h1 标记动态更改页面标题答案

【问题标题】：Dynamically change page title from h1 tag using Javascript使用 Javascript 从 h1 标记动态更改页面标题
【发布时间】：2012-10-17 03:45:42
【问题描述】：

首先，感谢您抽出宝贵时间阅读此问题。 Stack Overflow 有多么棒的社区 :)

我需要根据页面上 h1 元素中包含的文本更改页面的标题标签。

我一直在四处寻找，我找到了“document.title”Javascript 函数。我一直在玩它，试图从具有“Category-H1”类的 h1 元素中提取文本。

<script type="text/javascript">
    document.title = document.getElementsByClassName("Category-H1");
</script>

但是，它只是将页面标题设置为“[object HTMLCollection]”，据我了解，这是一个空值。 JS最好是这样做吗？我知道我的代码被劫持了，有什么提示吗？

提前致谢！ - 亚历克斯

编辑

我被告知这行代码返回一个集合对象而不是一个字符串。它指向了一个代码示例：

setTimeout(function () { document.title = "iFinity User Profile - " + document.getElementById("test").outerText; }, 1000);

但是，此代码会生成“iFinity 用户配置文件 - 未定义”的页面标题。我将该页面上的 h1 元素设置为“test”的 id。

【问题讨论】：

【解决方案1】：

你快到了。

[object HTMLCollection] 不是空值——它是 html 元素集合的字符串表示。您要选择第一个，然后从中获取内部 html。

document.getElementsByClassName("Category-H1")[0].innerHTML

此外，请确保在加载文档后执行此操作。您可以通过在文档末尾添加脚本来执行此操作，或者让它在正文的onload 事件上运行。

【讨论】：

【解决方案2】：

这应该可行：

document.title = document.getElementsByClassName("Category-H1")[0].innerHTML;

getElementsByClassName() 函数返回一个元素集合（[object HTMLCollection]，所以你需要从中取出一个元素，我假设是第一个。

【讨论】：

【解决方案3】：

更好的解决方案可能如下：

<script type="text/javascript">
document.title = document.getElementsByTagName("H1")[0].innerHTML
</script>

这样可以避免设置 h1 类。

【讨论】：

【解决方案4】：

这非常接近，但我发现 - 无论如何使用 Firefox，当您使用 getElementsByTagName("H1") 时，它会为您提供一个您已识别的数组。但是，使用以下方法效果更好：

<script type="text/javascript">
    document.title = document.getElementsByTagName("H1").item(0).innerHTML;
</script>

注意在获取元素后添加 .item(0).innerHTML 而不是 [0].innerHTML。

【讨论】：

【解决方案5】：

我不知道你有没有这方面的经验，但是最近似乎很流行的另一种选择是使用 jQuery。与前面的讨论一样，下面的代码假设您有兴趣获取“H1”标签或“Category-H1”类的第一个实例。这一点很重要，因为除非您以“ID”属性为目标，否则您将获得一个项目集合。

此代码还假定您已经直接从您的网站或通过引用 CDN 实现了对 jQuery 库的包含。

<script type="text/javascript">
    $(document).ready(function () {
        document.title = $("H1")[0].innerText;
    });
</script>

$(document).ready 仅在文档对象模型 (DOM) 完成加载之后，并且在浏览器的渲染引擎显示页面之前，才会调用它的封闭函数。

函数内的内容将抓取“H1”标签的第一个实例的内部文本，并将该文本值分配给文档头部的标题标签。

我希望这会增加另一层帮助。

【讨论】：