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 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.)
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).
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.
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.
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.
var form = document.forms
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.
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
: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.
Create your free account to unlock your custom reading experience.