You can use the native
querySelectorAll() methods to get an element or set of elements from the DOM. But did you know you can scope these methods so they only search within a particular element?
You'll most often use these methods on the
form on the page, you might do this:
// Get the first form on the page
var form = document.querySelector("form");
But now let's say you need to get all the controls within that form. Why search the entire document when you know they're inside this element?
Thankfully, these selector methods are also available to the
Element interface. To get all the controls inside the form, you can just call the
querySelectorAll() method on the form itself:
// Get all the controls inside the form
var controls = form.querySelectorAll("input, textarea, select");
Note: if you're new to vanilla JS and find it hard to give up jQuery's selector syntax, my friend Chris Ferdinandi wrote two tiny helper functions you'll appreciate:
$$.js. They still allow you to scope your selectors.