The DOM

Last night’s lessons introduced us to the concept of the Document Object Model (DOM), which is essentially a tree structure representation of an HTML document that’s made up of Nodes — JavaScript objects that represent things like elements, attributes, and styles.

Example of a node tree

We spent most of today reviewing some of the concepts that were introduced in our readings — DOM manipulation, selecting DOM nodes, using query selectors, and creating DOM events.

I can definitely appreciate the functionality and see glorious future uses for this code application, but for now, am still having a little trouble wrapping my head around how to be consistently effective at manipulating objects without always having a precise focal point to call out. Definitely get the sense that utilizing the pen-to-paper, diagram sketch approach is going to come in verrrrrry handy while I try to internalize the flow and commands of using JavaScript in conjunction with the DOM.

Still plugging away on my daily project, but I think I’m starting to hit a wall. May just put the brakes on that for tonight and pick back up tomorrow morning when I’m feeling fresh.

Cool Tools —I was listening to the #CodeNewbie CSS Tricks episode earlier today, which introduced me to the site CodePen. If you haven’t heard of/played around with it a bit, I’d definitely recommend taking a look. It’s an awesome front-end resource that lets you share, explore, and play around with code in a user-friendly, text-editor context. This thing is kind of blowing my mind right now.