In WIWO (What I’m Working On), I discuss what languages and technologies I am currently learning using Treehouse, so you can follow along with another student learning web development. We won’t take a very deep dive into the technologies, because Treehouse already does an amazing job of that… so feel free to sign up for a free 7-day trial and learn along with me!
[I’d also like to note that my overall goal is sharing my learning experience with other students. If you see something inaccurate, please let me know!This entire blog deal is an exercise for me in learning and vulnerability, in and of itself. Thanks!]
Guil Hernandez (Treehouse instructor)
What you’ll learn
- What is the Document Object Model (DOM)?
- Making Changes to the DOM
- Responding to User Interaction
- Travelling Through the DOM (Traversal)
A tool icon (🛠) indicates brand new skills/tools that I picked up.
The Browser Environment
Ah, the DOM: an old friend. I can’t believe that this isn’t new content to me, but I have covered a lot since I started teaching myself to code in the summer of 2015!
The DOM is the backbone of web pages. I tend to think of it as sets of bones within the skeletal system of the web page itself. When something changes as the result of you doing something on a page, the DOM has been manipulated (or changed) in some way.
This segment promises to teach me how to:
- Select elements in the DOM (known)
- Manipulate those elements (needed work)
- Set up the browser to listen for user events, like clicks, keystrokes, etc. (definitely not comfortable)
I should be able to get a good amount of information out of this.
Getting a Handle on the DOM
Already having used
document.getElementById() in the past, and occasionally its class variant
document.getElementsByClassName(), I thought I knew a thing or two.
This module taught me to use
Node.querySelector() instead. It’s easier to read my code, as opposed to a whole lot of other different functions to accomplish the same means.
Node.querySelectorAll() instead of
document.getElementsByClassName(). (I didn’t get the impression that there is any great advantage, but
Node.querySelectormakes me happier)
Making Changes to the DOM
This module covers the fun part of DOM manipulation: doing things with the stuff you target.
I had used
Element.innerHTML before, so they weren’t anything new. Both can set the text content of a targeted element.
Creating and appending nodes to the DOM was an area I definitely needed work on. This course refreshed a lot of fuzzy details I had learned many months ago.
- Create a node using
document.createElement()and save it to a variable
- Attach that node to the DOM by selecting a node to be its parent, using
There is no way around this without using a library like jQuery. jQuery is a set of tools for JS that allow you to do things with less code, and add some functionality that doesn’t normally exist (like this).
Responding to User Interaction
Adding event listeners in vanilla JS has been a grey area for me up until this point. I know that I touched on it, but have only really used jQuery to accomplish it more easily.
One new concept I picked up this time around was Event Capturing and Bubbling.
🛠 Event Capturing and Bubbling: The important concept that when a user performs an action like clicking on a DOM element, that element’s parent (and its parent’s parent, and so on) also receive that click event. This entire concept and understanding why it was important was really difficult for me. This video helped to clear things up significantly.
Rather than having a bazillion event handlers (one for every
li, for instance, in a
ul), you can set one handler on the
ul itself, and use the
event.target.id to reference the
ul that was actually clicked. Just a few lines of code to cover all of
ul‘s children, and itself.
Traversing the DOM
This module was indispensable. What do you do when you already have your hands on one element, but want to grab another one nearby?
You could go all the way back out to the document and call to it from there, but all elements that we target have handy reference functions like
After completing Traversing the DOM (and taking some time in between videos to play in CodePen), I can say that I feel much more confident working with DOM manipulation overall.
For this project, I loosely followed Treehouse’s project, adding in challenges for myself via the CodePen linked above.
As of right now, I’m trying to add logic to check whether or not a passed-in parameter
li is the first or last child of the
ul, and show or hide the Up and Down buttons. For example, the last list item cannot be moved down any further, and as such, should not include a Down button.
When a new item is created in the list, the
attachListItemButtons() function ensures that buttons are attached to the newly-created
Any ideas? Feel free to comment below with hints or suggestions!
Did you find this edition of WIWO helpful? Feel free to share the love, and click the purple heart 💜 below to recommend this post to other Medium readers.
Note: This post contains affiliate links for Treehouse, where I earn a small commission (about $3! so a cup of coffee 😊) every time my readers find value in my blog posts, and sign up for a Treehouse trial. If you have questions about affiliate links, check out my Affiliate disclaimer.