JavaScript/hacks

A collection of little JavaScript hacks.

Note that you can play with JavaScript at Mozilla's MDN Playground or more commercial options like JSFiddle or Scrimba

Load video

YouTube

YouTube might collect personal data. Privacy Policy

Continue Dismiss

Pull headings out of a page

Array.from(document.getElementsByTagName("h1")).forEach(function (item) { console.log(item.textContent); });

Using the browser's developer console, you can pop this one-liner in to see the list of headings in your web page.

• document.getElementsByTagName("h1") returns an HTMLCollection from the DOM.
• The Array.from() converts the HTMLCollection NodeList into an actual array.
• The forEach loop creates an anonymous function to handle each item in the array.
• We console.log() it to see the values; and use the textContent property instead of innerHTML since the latter would almost certainly be 'messy'. (In other words, innerHTML would contain far more than what we want - which is just the text of the headings).

A little different approach would be to build up the text content instead of dumping it to the console on each iteration

const headings = document.getElementsByTagName("h3");
let result = ''; 
for (let i = 0; i < headings.length; i++) {  
    result += `\n ${headings[i].textContent }`; 
    
} 
console.log(result);