Learning DOM manipulation with JavaScript.

Recently I have been working through the Travis media – ‘Learn to Code Blueprint’. Up to now, I have learned the fundamentals of HTML and CSS and most recently been learning JavaScript basics. The next step for me was to learn how to manipulate the DOM and incorporate all that I had learned with JavaScript. To me, this proved more difficult to comprehend than I thought it would be.

I had to take an extra three weeks than anticipated to really drill down and learn the DOM, and now I am starting to target elements and making small changes to my webpages.

This last week I have made a modal and a countdown timer that I have added to my web developers conference website project. The main fundamentals of manipulating the DOM is the ability to target, create, update and delete elements or nodes that do not necessarily need to be in the original HTML and instead inserted via innerHTML.

Working with conditionals, arrays, and methods and connecting them to DOM elements to produce interactivity has been a big barrier that has required some breaking through on my behalf. The motivation to turn my static websites features into something interesting and useful kept me going.

With JavaScript, even the most simple of features can require several lines of code. At first, I found this somewhat overwhelming, but I have since learned how to break down larger tasks into micro ones. The real trick is to plan your code out and just think of one line at a time. Before you know it your feature will be complete and something to be very proud of.

Learning DOM manipulation is so important that you should take your time and get the fundamentals down. You can then be sure that your confidence will skyrocket and make you into a more rounded front-end web developer going forward. I have another couple of DOM projects planned this week. I will then move on to learning more about ES6.