Dynamically change page title from h1 tag using Javascript

Question

First off, thanks for taking the time to read this question. What a great community Stack Overflow has :)

I need to change the title tag of a page based on the text contained in the h1 element on that page.

I've been searching around, and I have found the "document.title" Javascript function. I've been playing around with it, trying to pull the text from my h1 element that has the class of "Category-H1".

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

However, it is just setting the page title to "[object HTMLCollection]", which as I understand is a null value. Is JS the best was to do this? I know my code is jacked, any tips?

Thanks in advance! - Alex

Edit

I have been informed that line of code returns a collection object and not a string. It was pointed to a code example of:

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

However, this code produces a page title of "iFinity User Profile - undefined". I have the h1 element on that page set to the id of "test".

Answer 1

You're almost there.

[object HTMLCollection] is not a null value--it is the string representation of a collection of html elements. You want to choose the first one and then get the inner html from it.

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

Also, make sure you do this after the document has loaded. You can either do this by adding the script at the end of your document, or have it run on the onload event of the body.

Answer 2

This should work:

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

The getElementsByClassName() function returns a collections of elements ( [object HTMLCollection], so you need to get an element out of it, I'm assuming the first one.

Answer 3

A better solution may be the following:

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

This would save from setting a h1 class.

Answer 4

This is very close, but I found that - working with Firefox anyway, when you use the getElementsByTagName("H1") it gives you an array as you have recognized. However, it works better using:

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

Note the addition of the .item(0).innerHTML after getting the element rather than the [0].innerHTML.

Answer 5

I don’t know if you have any experience in it or not, but another alternative that seems to be very popular these days is the use of jQuery. As in the earlier discussions, the code below assumes that you are interested in grabbing the first instance of the “H1” tag or the “Category-H1” class. This is an important point because unless you target an “ID” attribute, you will get a collection of items.

This code also assumes that you have already implemented the inclusion of the jQuery library either directly from your website or by referencing a CDN.

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

The $(document).ready will call it’s enclosed function only after the Document Object Model (DOM) has finished loading, and before the browser’s rendering engine displays the page.

The content inside the function will grab the inner text of the first instance of the “H1” tag and assign that text value to the document’s title tag in the head section.

I hope this adds another layer of help.