Online Jquery to Javascript Converter
We want to talk about using JavaScript as an alternative to jQuery especially moving forward as rails 5.1 removes jQuery as a dependency by default you'll still probably use it in a lot of applications especially ones that need good backwards compatibility because jQuery was really introduced as a compatibility layer across your browsers because JavaScript operated very differently than it does today in modern browsers so with that said we're going to talk about some various different things like how do you do queries for elements on the page how do you add events how do you hide and show items just like you would do with jQuery and so on so let's dive into this and begin now the first most common thing you want to do often times is to grab items from the Dom and query for them so that you're going to interact with them in some way so take this example we have a notifications which is a wrapper around each of those notifications on the page so this is where we can grab and interact with all of those notifications so for example.
If you wanted to insert a new one from WebSocket or an ajax request you should be able to grab this ID notifications and then either pretend or append your item into that list so if we go into the console how do we grab that item well previously you would say notifications and pass that into the dollar sign for jQuery and so jQuery would take this and see this and say ok that's an ID we need to let it go and look for an element on the page with the ID of notifications now we can do the same thing by saying document dot query selector and we also have a method called query selector all the difference between the two is that query selector will give you the very first item and that item by itself or query selector all we'll give you every single item and return an array now we are interacting with an ID which means query selector is what we want and here we can pass them the exact same string if we run that we will get that element back now if we're to run query selector all we get an array back and this is probably more similar to the way that jQuery worked because it would probably handle these always as arrays so you might want to use query selector all but if you ever know that you're only looking for a single item I would just go ahead and use query selector now this also supports the multi parameter syntax that jQuery does so if you ever wanted to grab all the paragraph tags out of the notifications give you can run query selector all and it will return you that array and have narrowed down that scope to the appropriate section so we'll grab each one of those out there for you and have the exact same syntax so you can use query selector and query selector all as a replacement for your jQuery selectors which is really nifty.
Now there's a couple other options that you have in case you want to use them you can use get element by ID elements by class name by name and by tag name and there's a couple other methods here that you can use as well but these are alternatives if you want to directly access an element by ID and so you can pass this in and say notifications without that syntax and it will know immediately that you were looking for an item by ID now you can mix and match these together so if you ever want to grab an element and then grab children out of it you can do the exact same thing here by saying query selector all and do be after that and it will do the exact same chained and scoped scoped queries that way as well so that works the exact same way as if you did a find in jQuery on another elements you're looking for children inside so that works pretty much the exact same way and is how you would convert your jQuery code over to these new selectors of course once you've added your selectors usually you want to interact with those elements in some way and a lot of times that is by adding event listeners to those things so for example turbolinks looks for all those people inks on the page and then it will make them navigate with turbo link so it installs an event listener on click.
That will intercept that stuff where if it doesn't do it on click it does something very much like that so let's work on building our own as it intercepts that so the difference here is that we can do our query selector all and we can grab all the links on the page and we can use the new add event listener method to create our event listener but the difference here is that this is going to give us an array back and we actually need to loop over each item in the array and add the event listener to it directly whereas previously if you use jQuery you could say on click run this function and it would run that function and do whatever you want it inside of it and this would internally loop across all of those anchor tags on the page so we have to explicitly do that with JavaScript so the way we would do that is say query selector all grab.
