In this post, we explain the Javascript: (DOM) eventListener & Loops method using the Feynman Technique as part of my Feynman/20-hour challenge. For more info, click here.
In Javascript, DOM is an acronym for Document Object Model, in laymen’s terms, it’s a hierarchy tree of what’s inside a website. It breaks the items of a website (specifically the HTML – the structure of a website) into parent and child pieces. Think of it like this:
If HTML is the actual architecture of the house, the DOM is kind of like the blueprint for that house: it explains where things are. Blueprints are helpful when making a house because it tells the electrician and the plumbers where they would need to hook up cable, pipes, and sewer. JavaScript is that electrician and that plumber that helps your “home”, or in our case “website” do what we need it to do.
How is the DOM like the Blueprints of a House?
const kitchen = document.querySelector(".stove")Let’s break down the elements in the above code:
- Kitchen – the name of the following box of code.
- document – go through the HTML document that this javascript code is tied to.
- querySelector – scan for the following item…
- (“.stove”) – the class name of “stove” (this will also mean that “stove” is listed as a grouping in the HTML file).
In essence, what the code is saying is ” this is a list of instructions for “kitchen”: look in the HTML code and find where the stove is.
The DOM uses API (Application Programming Interface) to work its magic. If we are using the house example above, the API is like the list of instructions used to attach the wiring and plumbing to the house to make sure the shower isn’t set up over your bed and your dishwasher door isn’t installed immediately facing a wall. In the above case, that API was “document.querySelector”.
The reason we need this kind of info is so we can get our website to do stuff.
Javascript DOM eventListener:
Continuing with the house example, let’s say I need to hook up the electricity to our HTML “bedroom”. This is an example of what that code would look like:
const bedroomLight = document.querySelector(".bedroomLamp);
const bedroom = document.querySelector(".bed");
const bedroomLit = bedroom.addEventListener('click', function(){
bedroomLight.classList.add('on');
});Here’s the breakdown:
- “bedroomLight = document.querySelector(“.bedroomLamp);” – look through the HTML code to find the class name “bedroomLamp. Save this search under the name bedroomLight. We have the same group of instructions for the name “bedroom”. We’re going to need them both later.
- bedroomLit = this will be the name of the list of following instructions.
- bedroom.addEventListener = Use the bedroom search, then wait for the following signal before running the list of instructions…
- (‘click’, function(){bedroomLight.classlist.add(‘on’)} – When you you hear the “click”, go through the search bedroomLight and in that (class) group, include the word “on”.
…essentially, “look for the room with a bed, when you do, wait until you hear a “click” to turn on the light”.
JavaScript DOM Loops:
What if you want to turn on all the lights in the house, one at a time, to make sure the electrical is working? Is there a way we can do that? The answer is “yes”.
const circuit = document.querySelectorAll(".lights").length;
for (i = 0; i < circuit; i++) {
circuit[i].addEventListener("click", function (){
circuit.classList.add('on');
});Let’s go over the new elements in the code above:
- document.querySelectorAll(“.lights”).length; – go through the html file and select all the places where “.lights” show up.
- for (i = 0; i < circuit; i++) – this is what we call a “for” loop. It’s a set of instructions that says this: start off as “i”=0, if the number of items in the “circuit” search is more than what “i” presently is, then “i”+1 and run this series again, this time with i= the new value. Keep on doing this until the “i” becomes equal to a response from the “circuit” search.
- circuit[i].addEventListener – every room that aligns with the “circuit” search, starting from the first (aka [i]) will go through the following instructions.
- (“click”, function (){circuit.classlist.add(‘on’);}); – when you hear “click” in that room, then turn the lights in that room “on”.
Essentially… every room in the house that has a light, if I click it, will turn on.
As for more APIs and what they look like, here are some examples that we used in this post:
- document.addEventListener
- document.querySelectorALL
- document.querySelector
- classList.add
Hope I was able to shed some “light” on this topic for you. 😋