From the course: JavaScript: Ajax and Fetch

Select elements with vanilla JavaScript - JavaScript Tutorial

From the course: JavaScript: Ajax and Fetch

Start my 1-month free trial Buy for my team

Select elements with vanilla JavaScript

“

Before you can make changes to an element in the DOM, you first have to select it. The DOM interface, supported by browsers, includes several methods for selecting one or more elements, but a few methods are particularly common. querySelector takes a CSS selector as an argument and selects a single element querySelectorAll is similar to querySelector, except that if your CSS selector matches multiple elements, all of them are returned as a collection. There are also older methods, such as getElementById, which selects the element with the ID value you pass. In general, querySelector and querySelectorAll are more versatile, but you may see getElementByID in legacy code. Looking at our Explore California form, remember our first goal is to collect address city and state info and then use that to retrieve and display zip info. So we'll need to reference those four form fields in the DOM. So in the HTML code for the contact form, I'll start by searching for address and it takes me to the code for the address field with the city, state and zip just below that. The easiest way to get references to these input elements will be with their ID values, and helpfully, those are address, city, state, and zip. Back in my JavaScript, I'm going to create new constants just below my URL variables. So const addressField. Now querySelector is a method of the document object. So it's document.query Selector ('#address'). That gives me a reference to the input box where users will type the address and likewise const cityField =document.querySelector ('#address'), const stateField is document.querySelector ('#state'). Now, sometimes we have legacy code that uses a library like jQuery to select elements. Back in the day, jQuery was a lot easier, but these days, if you're only using it for DOM manipulation, then you may be able to convert everything to Vanilla JavaScript and remove jQuery as a dependency. So let's write a jQuery statement to select the zip field, and that's going to be const zip Field with dollar sign equals $('#zip'). Notice it's really similar. All we're doing is replacing the dollar with document.querySelector and leaving out the dollar in the variable name. So I'll comment this line out and then I'll replace it with the Vanilla JavaScript version. So that's const zipField with no dollar sign equals document.querySelector ('#zip'). And I'll save those changes. And now I have references saved for all the DOM elements that I'll be working with in the form.

Contents