使用Javascript从h1标签动态更改页面标题

Question

首先，感谢花时间阅读这个问题。多么棒的社区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 User Profile - undefined”。我将该页面上的h1元素设置为“test”的id。

Answer 1

你快到了。

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

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

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

Answer 2

这应该有效：

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

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

Answer 3

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这样可以避免设置h1类。

Answer 4

这非常接近，但我发现 - 无论如何使用Firefox，当你使用getElementsByTagName（“H1”）时，它会为你提供一个你认可的数组。但是，它可以更好地使用：

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

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

Answer 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”标记的第一个实例的内部文本，并将该文本值分配给头部中文档的标题标记。

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