JavaScript/hacks: Difference between revisions

Latest revision as of 21:21, 12 February 2025

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

Pull headings out of a page[edit]

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

Here's another example, using querySelector() and querySelectorAll() with class names

const container = document.querySelector( ".NavigationItem-items-container");
const mainProducts = container.querySelectorAll( ".NavigationGroup-title, .NavigationLink-title");
let result = '';
for (let i = 0; i < mainProducts.length; i++) {  
    result += `\n ${mainProducts[i].textContent.trim()}`;
}
console.log(result);

Or the same exact example, used on a Testdox HTML report to list all the elements with CSS class "defect"

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