WIWO: JavaScript and the DOM
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!]
Course title
JavaScript and the DOM on Treehouse
Instructor
Guil Hernandez (Treehouse instructor)
Description
JavaScript lets you create interactive web pages which can respond to a user’s actions. In this course, you’ll learn how to bring web pages to life using the power of JavaScript.
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)
Topics Overview
A lot of the things I learned in JavaScript and the DOM are centered around changes brought by ES6, or topics that just weren’t given enough individual attention in previous classes. I entered this course looking for a full refresher on the
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.
🛠 Using Node.querySelector() and Node.querySelectorAll() instead of document.getElementById() or document.getElementsByClassName(). (I didn’t get the impression that there is any great advantage, but Node.querySelector makes 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 Node.textContent and Element.innerHTML before, so they weren’t anything new. Both can set the text content of a targeted element.
Setting styles is another powerful feature of JavaScript. A little bit of practice here in Treehouse’s Workspaces proved very helpful, and makes plenty of sense now.
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
Node.appendChild()
I did get one giant reminder of a glaring vanilla JavaScript oddity: in order to delete DOM elements, you need to target their parents.
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 and event.target.className or 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 element.parentNode, element.children, element.nextElementSibling and element.previousElementSibling.
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.
CodePen
Current Challenges
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 li.
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.
