1

首先，感谢您花时间阅读这个问题。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。

4

5 回答 5

3

您快到了。

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

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

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

于 2012-10-26T21:04:54.383 回答
2

这应该有效：

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

该getElementsByClassName()函数返回一个元素集合 ( [object HTMLCollection]，因此您需要从中获取一个元素，我假设是第一个元素。

于 2012-10-26T21:01:43.893 回答
0

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

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

这样可以避免设置 h1 类。

于 2016-07-21T18:49:23.910 回答
0

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

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

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

于 2017-01-12T18:11:00.170 回答
0

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

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

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

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

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

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

于 2017-08-17T17:23:18.613 回答