Convert jQuery to JavaScript

JavaScript
#1

I created the following Chrome bookmarklet to open all Extra Examples boxes on this page:

javascript:$('.box_title').click();

It works with no problem. However, I’d prefer to use vanilla JavaScript. This is what I have for now:

javascript:Array.from(document.querySelectorAll('.box_title')).forEach(e => e.click());

Do you see any problem, or can it be improved?

#2

You can also call .forEach directly on the result of querySelectorAll. No need to wrap it in Array.from.

javascript:document.querySelectorAll('.box_title').forEach(e => e.click());

See https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

2 Likes
#3

Thanks for the answer! Why can’t I get the same result using getElementsByClassName?

#4

Because that returns a HTMLCollection that doesn’t have a forEach method.

2 Likes
#5

getElementsByClassName is an older standard, for which the array-like method of forEach didn’t exist at the time.

2 Likes