JavaScript DOM and how to navigate it with a <form> example, Part 1: The DOM and CSS Selectors

Occasionally, you may have to write a program, or at least some functions that traverse the DOM in ways that are not the most straight forward. I certainly did while learning to program, for the sake of getting more comfortable with the DOM, and it’s also pretty common in coding challenges.

I actually have been working on a coding challenge that’s testing some fundamental JavaScript concepts, and I thought that writing a blog post would help me strategize and document my thought process and the resources I found.

(I am not going to post the solution to the challenge that I come up with here, because I think that would not be fair, but in later parts, I will include the major concepts that I’m thinking about in solving it with examples.)

A refresher on the DOM

The DOM (Document Object Model) is a way of understanding how HTML or XML is rendered on a page.

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page. https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

The DOM is typically represented as a tree, like in the example below.

When interacting with the DOM, it’s important to know how to access different elements and attributes on the DOM so that you can either collect values (such as with a form) or render values (such as data being returned from a call to an API).

Thinking Through What a Form Should Do

I find it very helpful to think about real-world or tangible examples whenever I’m tackling a programming problem, because I can usually break the problem down into small manageable pieces that way, and it makes thinking about how to write code seem far less intimidating.

When thinking about collecting data from a form, for example, I think about just a real-life form. If you’re at a doctor’s office, you probably have some paperwork to do before your visit. You write in your name, birthdate, sex, contact information, and check off any illnesses or conditions you might have. You then submit the form to the receptionist or nurse, and they enter that information into a database. To do that, they look through the form, and for each field, they take the appropriate information, and copy it into the corresponding location in the database. Each bit of information matches up with a spot in the database, but it isn’t stored in exactly the same way, because if it were a perfect copy, then it wouldn’t exactly be a database.

An HTML/JavaScript form works the same way, just with code! A blank form is presented to the user. The user fills in the form, and may occasionally input fields, check boxes, radio buttons, and/or something like an “add” button to add multiples of a particular item. Then the user submits. The JavaScript function(s) need to look through the DOM, select the elements that are where the user input went, carry along the meaning of that data point, and bring it to the database in a way that it can be parsed and stored correctly.

How To Do It

For those new to JavaScript, I’d recommend reading some tutorials (see “Resources” at the end) before starting. Following are refreshers or some additional strategies for how to become more familiar and comfortable with selecting and finding elements.

Check out your HTML. If you have some HTML that has been provided to you, first look over the file. It’s sometimes easier to see this with developer tools than just trying to follow along the lines of HTML if you haven’t written it yourself. It can allow you to easily identify the element as it appears on the page and the corresponding code.

The highlighted element in the top right corner matches the blue highlighted line of code on the bottom left. credit: Google Developers

Options for identifying and collecting values

If the form doesn’t have an id, you can use document.forms[i] where “i” is the index of the form you want to select. For example, if you have only one form on the page, you could use document.forms[0].

var form = document.forms[0]

For values that don’t have an id, you can’t use getElementById(). There are other CSS selectors that are available, the most commonly used are using class and element.

An extensive table is available here at W3 schools along with an excellent live tester that shows the CSS selectors used to grab each element here.

Portion of the W3 school table on CSS selectors

Once you have these strategies ready, it’s easier to start playing around with testing out different selectors for different elements and attributes on the page.

There are also many selectors that I was totally unaware of before this that are very useful, including

For forms:

:valid | input:valid | Selects all input elements with a valid value

:optional | input:optional | Selects input elements with no “required” attribute

:invalid | input:invalid | Selects all input elements with an invalid value

:checked | input:checked | Selects every checked <input> element

In part 2, I’ll go through an HTML form using some of these CSS selectors with event listeners to capture information that could then be sent to the back end.

Resources

CSS Selectors Reference_Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript…_www.w3schools.com

Try CSS Selector_Edit description_www.w3schools.com