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

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);