Unit 2 at Lambda School is called Applied JavaScript. It focuses on using JavaScript to manipulate the DOM to create rich user interfaces. Its the unit that I specifically targeted to repeat when I flexed from full-time to part-time, because even though I completed the material and successfully passed the sprint challenge, it was a lot to soak up and I wanted to do it over again.

I’m a bit behind in my blogging, so the posts for the next two sprints are a bit of a retrospective for me, since I’m now 2 sprints ahead. Since completing Applied JavaScript twice, I’ve finished Intro to React and am now halfway through Single Page Applications. Its all part of Unit 2 though, and will conclude with my 2nd build week, starting on November 11th.

The DOM

The DOM (Document Object Model) is a language-agnostic programming interface that features an object-oriented representation of a web page which can be modified by scripting languages such as JavaScript. Its basically an API for the browser that depicts the HTML (and other) elements of a web page as objects called nodes. When we write HTML and it renders onscreen, its actually rendering through the DOM.

The DOM takes each HTML element, whether its a <div> or a <p> or something else and turns it into an individual object, called a node. These objects have relationships with each other – mainly in where they’re placed onscreen via a hierarchy called a tree structure. Nodes have property keys. Some are purely informational, but others are methods which can be used to interact with the node using event objects.

When a web page is loaded, the browser first reads the HTML file. It uses this to construct the page and then looks for CSS to style it after. The browser builds a model of how the page should look and behave using JavaScript – this is the DOM. Its a JavaScript object that contains every element (in order) on a page. The DOM is built as a data structure called a tree. Parent elements have nested child elements called leaves. Programmers can traverse branches of the tree to access specific leaves. Individual branches of the DOM can also be their own tree.

As per the Lambda text:

When the DOM is built and the webpage is loaded, developers get access to it in the form of the global Javascript object document. document contains the entire hierarchy of the page, each element (or DOM node), and it also contains dozens of built in methods and properties. We can use these methods and properties to manipulate what we see on the screen.

When I first learned about the DOM, it was interesting to me to learn that my HTML and CSS weren’t just being rendered as I wrote them. They were essentially passing through an intermediary that translated them into something else – namely nodes, which are objects. I didn’t see the point of it, but then I learned that, being language-agnostic, it allows different languages to be used for web development and still render page elements in a standard way. JavaScript is the dominant language, in this regard. While I can see the usefulness of this, it doesn’t impact me yet.

What I did learn that affected my perception of the usefulness of the DOM is that page elements/nodes can be manipulated on the fly – which includes being newly generated or removed on the fly. This allows for the creation of dynamic content that interacts with the user – clicks, right-clicks, scrolling, drag-and-drop, hovering (which I did use with CSS, but is expanded upon with the DOM) and more. And that’s all with the mouse. Keyboards and other devices can also be tied to DOM events to allow for more robust or specialized application interaction.

• Mozilla Developer Network: Document Object Model
• Eloquent JavaScript: The Document Object Model
• freeCodeCamp: What’s the Document Object Model, and why you should know how to use it.

Portfolio

At some point, I’ll post about my portfolio more. Its a project that I’ve been working on over time and has had several refactors. The latest of these made use of what I learned in this unit at Lambda – namely, DOM manipulation and JavaScript components. The first incarnation of my portfolio relied on a template from HTML5UP, which we were asked to use as a basis for our portfolio project early on at Lambda. Later on, I took it upon myself to recode the entire thing from scratch, using only HTML and LESS, because I wanted to have more control of the site, and I wanted to reduce the thousands of lines of code that it included for features that I didn’t need.

When I rewrote the site, each project that I included had its own block of HTML, which was absolutely not DRY (Don’t Repeat Yourself). I basically copy/pasted the project HTML block, had it reference the same CSS/LESS as the other projects, and the site worked. As I added projects, the number of lines of code that I had to maintain grew, and if I added to the structure of the project cards (like, adding in the tech stack or just last week giving more descriptive names to each project and separating out the project’s sprint name or other category name, like “personal project”) I had to manually make that change by adding in the new HTML field to every project, across different pages and revising the text for each project, across different pages.

Since refactoring the site to use components, I have a component that reads data from an array and renders each project. So, now I have a single component, which I can modify as needed, and each project is just 7 elements in an array, or one line of data (image, name, type, view URL, code URL, descriptor and tech icons stack). Its much easier to add new projects, change the format of the card itself and just maintain, in general. I have a different array for each page of projects (the ones on the home page, the HTML/CSS page and the JavaScript/React page) but I could also now easily merge all of these into a single array and add a field that lets the component know which page(s) to render a given project on.

The small hamburger menu (the menu with an icon that’s 3 horizontal bars) at the top of my portfolio is also a component, which I just render around the top of each page. Later on, I’m likely going to refactor it yet again, using React, as a single-page application.

DOM Selectors

In order to manipulate elements on a web page and build rich user experiences, we need to be able to select specific nodes, or groups of nodes, on the DOM. Some elements can be accessed easily, like document.head or document.body. Others require the use of built-in methods to access more specifically.

getElement selector methods

getElement selectors are the original methods for selecting DOM elements. They each take a single string as their only argument, containing the tagname, ID or class being sought – all HTML items.

document.getElementsByTagName('p');
document.getElementById('idName');
document.getElementsByClassName('className');

• getElementByTagName will return an array-like object called an HTMLCollection which contains all of the page elements that are of the supplied type.
• getElementById searches through the DOM and returns the specific element called.
• getElementByClassName returns an HTMLCollection containing all the elements on the page that are of the supplied class.

querySelector methods

querySelector methods are the newest DOM selectors. They make use of CSS style selectors to return elements instead of HTML selectors. Both methods (getElements and querySelectors) allow selection by element, ID or class.

document.querySelector('.custom-style');
document.querySelectorAll('queryString');

• querySelector will return the first element that matches the supplied value. If we pass (‘some-style’) and not (‘.some-style’) it will return an error. Remember the leading period for CSS classes!
• querySelectorAll returns ALL elements matching the query string in an array-like object called a NodeList.

HTMLCollection vs NodeList vs Array

getElementsByClassName() or querySelectorAll() return either an HTMLCollection or a NodeList, respectively. These are referred to as ‘array-like objects’. The only other one I’ve seen so far is the arguments object in a function, which I didn’t realize was an array-like object until the Lambda text pointed it out. They both have numerical zero-based indices, and the length property, but that’s where the similarities with arrays ends. NodeList (which is returned from the querySelectors) does also have access to .forEach. There is no .reduce or .map or any other array method.

As per the Lambda text:

Pro tip: The Array class does contain a method we can use to create an array from an array-like object, called .from(). To use this we would simply give .from the array-like object as it’s only argument.

Array.from(arrayLikeObject)

Manipulating DOM elements

Being able to change live DOM elements allows us to update text, HTML attributes, or styles. Its a key tool in building interactive websites and apps. Once we have access to an element, we can manipulate it and change its characteristics, including those that weren’t initially set when it was written as HTML (like adding a class). After an element has been selected, there are dozens of properties and methods which can be used to manipulate it. These are some of the more common ones:

When working on the project component for my portfolio site, the methods from the above list that I used the most were .textContent (mostly assigned to variables fed into the component), .style (with a bunch of CSS properties like display, alignItems, flexDirection & verticalAlign), .classList.add() (used to assign classes to newly-generated HTML elements), and .appendChild() (to attach newly-generated HTML elements to other elements.

One method that we’ll look at in a later post that was key to using ALL of the above was .createElement, which let me place new HTML elements onscreen, then manipulate them with other methods.

There was also a warning against using a method called .innerHTML. We were cautioned not to use it. Its been deprecated in newer versions of JavaScript because it can allow online attackers to insert code into a web page.

Updating the DOM usually takes two steps:

1. Select the element:
   const mainHeader = document.querySelector(‘.main-header’);
2. Update the element with the desired attribute property:
   mainHeader.style.color = ‘red’;

Its also important to remember that JavaScript can’t take dashes in names. It treats dashes as a subtraction operator, so when modifying CSS, we use camelCase. For example, CSS background-color becomes JavaScript backgroundColor.

Ok. Its 7:30 AM on a chilly Sunday in November. I’m going to go nap for a few.