Thus far, I've tried to keep myself fresh on ruby, ruby on rails, React, CSS, HTML, Javascript algorithms, and some JQuery. However, recently I went on a job interview that asked me about my skillset on all of the above, except for JQuery. On the contrary, they actually hated JQuery and had entirely removed it from their application. They said and I quote "Thank god we had removed all of our JQuery from our application like 2 weeks ago, now we're running on pure vanilla Javascript". Now I understand the concept of why this is a good thing for their application, but for me? Not such a great thing, because my vanilla Javascript level is what some may call "eh". So I've made it a point to do a little vanilla Javascript every day, one tiny project at a time, and I've learned a few small, miscellaneous things that I didn't necessarily know before.
Now I know all about the DOM, I'm well aware of how to manipulate it, and even how to select items I want to change. Before I began my vanilla Javascript challenge, I would mainly rely on things like "document.selectbyID" or "document.selectbyClassName" but was completely unaware of "document.querySelector" and "document.querySelectorAll". Both of which can be used effectively for grabbing certain elements. Important little tidbits about the two to note is that query selector returns a node, and querySelectorAll returns a node list, so it won't come with all the usual array commands you may be used to. Looking into its prototype you'll see you can utilize functions like forEach(), but not many others. Fear not, you can always use "Array.from()". Another big difference is the syntax and browser support. SelectById and SelectByClassName have been around a lot longer, so it may be safer to just stick with that instead, but interesting either way!
The Query selectors can also be used as a CSS3 selector as well. Setting a variable to a queryselector of a class can be altered, which can come in handy. For instance:
<div class="Random-line"></div>
const example = document.querySelector('.Random-line')
example.style.transform = `rotate(90 deg)`
Now this will go into the CSS and we can set our transoform style to 90 degrees, causing the line to shift 90 degrees.
Also, while playing around with an application that had several different controls, one being an input with the type of "range" and one being "color", i was able to grab all of the controls, by doing the following:
const inputs = document.querySelectorAll(`.controls input`)
Now I have all my inputs for all controls on the page! Also, we're able to use forEach to add eventListeners on all of them!
inputs.forEach(input => input.addEventListener('change', handleUpdate))
Now we can create a handleUpdate function to listen for changes and handle those updates! Very cool. These have come in handy and I'm sure will continue to in the future.
Top comments (1)
Hello! I'm not sure about selectbyID and selectbyClassName. Were you meaning document.getElementById? For both element and class names selector, you can use query selector or querySelectorAll.