How to Get Headings and IDs for Your freeCodeCamp Blog Post Table

of Contents
In this post we're going to get all the headings from a freeCodeCamp blog post to make a Table
of Contents (ToC) in Ghost CMS.

I recently published quite a large post here on freeCodeCamp and needed to add a table of
contents to the post.

There's a really good supporting post written by Colby Fayock on how to do this. It details the
process really clearly.

You can check out the video and really comprehensive guide on that for all the details:

How to Add a Table of Contents to Your Blog Post or Article

Providing a table of contents [https://en.wikipedia.org/wiki/Table_of_contents] helps preview and prioritize

content when writing lengthier articles. But notevery platform makes it easy to add one. How can we
implement one when we lackfirst class tooling? Want to skip ahead of the “what” and “wh…

Col
by FayockfreeCodeCamp.org
Colby's post details why you would want a Table of Contents (ToC) and how to create one using
the Ghost editor (the editor used for writing this post in the Ghost CMS).

The thing is, I had 33 headings in the post I needed to add links for. And the thought of scrolling
through a 10,000 word document to get a heading then scroll to the top to add it to the table of
contents made me wonder if there was a better way to do it!

Table of contents:

 JavaScript to the rescue!

 Get the element properties
 Get the element id and innerText
 Filter on the localName
 Conclusion

JavaScript to the rescue!

With this thought in mind I did a quick search and found a Stack Overflow answer that I could
use. Here's the snippet:

var ids = document.querySelectorAll('[id]');

Array.prototype.forEach.call( ids, function( el, i ) {
// "el" is your element
console.log( el.id ); // log the ID
});

So, let's hop on over to the browser now and try that out.

I'll go over to that published post now in the browser and open the developer tools. (In Chrome
and Edge it's F12 to open the dev tools.) Then I'll paste in that example code into the console and
hit enter, here's the output: