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

首先，感谢您花时间阅读此问题。真是一个伟大的社会堆栈溢出:)使用Javascript从h1标签动态更改页面标题

我需要改变基于包含在该网页上的H1元素的文本页面的标题标签。

我一直在摸索，我已经找到了“document.title时” JavaScript函数。我一直在玩弄它，试图从我的H1级别的“Category-H1”元素中拉出文本。

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

然而，它只是设置页面标题为“[对象的HTMLCollection]”，这是我的理解是一个空值。 JS最好是这样做吗？我知道我的代码是顶起来的，任何提示？

在此先感谢！ - 亚历

编辑

我已被告知该行代码返回集合对象，而不是一个字符串。它指向的代码示例如下：

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

但是，此代码会生成一个页面标题“iFinity User Profile - undefined”。我将该页面上的h1元素设置为“test”的id。

你'

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

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

此外，请确保在文档加载后执行此操作。您可以通过在文档末尾添加脚本来完成此操作，也可以使其在主体的onload事件中运行。

2012-10-26 21:04:54 climbage

这就是它！它正在工作！ –

它正在将新标题加载到页面中。我是否还需要将onload事件添加到正文？我知道这对搜索引擎并不是最佳的，但我想给它一个最好的机会。 –

html中的

这应该工作：

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

的getElementsByClassName()函数返回元素（[object HTMLCollection]的集合，所以你需要把它弄出来的元素，我假设第一个

2012-10-26 21:01:43 andrux

我认为你仍然缺少一块。 – climbage

我看不到在哪里，请您详细说明一下吗？ – andrux

哦，我看到它大声笑我的不好 – andrux

一个更好的解决方案可能是以下几点：

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

这会从设置H1类保存。

2016-07-21 18:49:23 Tyler

这是非常接近的，但我发现 - 反正与Firefox的工作，当您使用的getElementsByTagName（“H1”），它给你一个数组，你已经认识。然而，它的工作原理更好用：

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

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

2017-01-12 18:11:00

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

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

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

的$（文件）。就绪将调用它包围的文档对象模型（DOM）后，才完成加载功能，和之前浏览器的渲染引擎显示网页。

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

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

2017-08-17 17:23:18

回答