Let’s look at the options:
The easiest of the pack:
Returns a single Node.
As easy as the ID selector, the tag name selector returns a NodeList too:
Let’s look at some examples, read the comments for better clarification:
querySelectorAll is powerful, and definitely the future. It also supports more complicated selectors like so:
You can also create a smart wrapper function for this, to save typing out document.querySelectorAll(‘‘) each time:
You could use a $ symbol instead of an underscore, totes up to you. It’s not ideal to begin a function expression with an underscore, but for demonstration purposes I have.
IE8 supports querySelector CSS2 selectors, I’m not sure why you’d want to perform DOM operations with CSS3 selectors entirely as CSS3 is used for progressive enhancement, whereas functionality can be broken whereas styling isn’t nearly as important. If you’re doing it right, you’re using efficient class names and minimal selectors.
Adding a class is easy in jQuery, it does it all for you, taking care of the NodeList array too, we’ll come onto this soon.
Same as the above, super simple:
Toggle was a really important to the language, often tricky to replicate via prototype methods. Thankfully it’s here:
Recently, we received an upgrade from this rather manual method to the dedicated forEach method, which is however slower than the above, but does provide callback functionality similar to jQuery’s $.each();:
Looking at the jQuery side of things, here’s a quick comparison of the two:
Attributes, setting, getting and removing
In jQuery, the naming convention isn’t as good as native, as the attr(); can callback the value as well as set the value, in a way it’s clever, but to those learning it could cause confusion. Let’s look at how we can set attributes in both:
Removing attributes is just as easy:
This is how we would log the attribute’s vale in the Console:
HTML5 introduces the dataset API, which browser support isn’t bad, I don’t think IE9/10 even support it. For heavy .data(); usage, I recommend jQuery as it works in all browsers - even legacy.
I actually recommend going with jQuery’s .on(); method should you want to use the click handler:
Two reasons, you can chain the ‘on’ part like so:
This chains (well, binds) a couple of event handlers to register your function with. Any of them will run it. Not to mention you can easily swap them in and out.
This captures the DOM event via a parent event listener. Look up event bubbling and capturing for homework if you’re unsure of the difference.
You see my point…
Document Ready Function
jQuery comes built-in with a DOM ready function handler, in which we can safely execute all of our functions knowing the DOM tree is fully populated and any manipulation we do will work and not return undefined (undefined usually means it doesn’t exist, or in this case it would).
As we progress towards a future of amazing technology, browsers now fire their own DOM ready function handler, in modern browsers this is called the DOMContentLoaded event and can be fired like so:
Embrace new technologies now, I’m not suggesting throw away your jQuery workflow and start going native instantly, but a native future is coming - are you ready!