Javascript versions of jQuery functions

So I've always been too busy to write good clean javascript code. I love jQuery, the syntax is easy and the logic is simpe to follow for someone who is a full stack (jack of all trades, master of none) developer. I can acheive almost all my code needs with a quick Google -> Copy -> Paste in jQuery, but javascript needs a deeper understanding and more research to find the neater answer. 

Like my favourite CMS, Modx, there are so many ways of acheiving the same thing in plain js, that it becomes hard to find and use the one that is right for your situation. jQuery is less flexible (IMHO) and so it is often quicker and easier to find you solution. 

However, as I am learing the hard way, Google is starting to punish jQuery users over plain js. Not deliberately or maliciously, but through the Core Web Vitals (CWV) it punishes you for render blocking files and in particular, javascript files, and that has most affect via 3rd party files that you normally don't have control of.

I've always followed the Google advice: Put you javascript file at the bottom of the page and load it async if possible. CWV likes this and i am fine with doing this, but it has recently caused me some issues. 

I have a client who uses ReCaptcha on their forms, and they have several forms on the page. Cool. No spam here, thanks to ReCaptcha v3. The issue is that the CMS and the form code loads the ReCaptcha at the end of each form.... ok I get that, you need to protect each form. However, with 5 forms on the page, I don't want to load the ReCaptcha library 5 times, so I remove the Library and put it at the bottom of the page as normal. No dice. You get a function not found on evey form, as the function to "protect the form" needs the ReCaptcha library loaded. So now I need to find a way run the functions on page load. Well this won't work with the classic jQuery

$('document').ready(function(){});

as I follow the CWV/Google guidelines and load the jQuery library in the footer and use the async tag. As my functions are in the forms in the HTML body, I get jQuery not defined error. 

So what's the solution? Well it appears to be that I need to stop using jQuery for this stuff and learn some plain ol' vanilla js. Why? Because js doesn't need to be loaded. It's there before anything else, so if I wrap my jQuery functions in an js equivalent of the jQuery .ready() function, I can run my code on load, after all the needed ibraries have loaded! In my research, I came across this brilliant page http://youmightnotneedjquery.com/ of js snippets to replace jQuery functions. I think I will just keep using that rather than adding it all again here. #KeepingItDRY