traversing the dom Archives | Rob Doyle Creative

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.

Understanding DOM Manipulation with JavaScript

This last week I have been learning about accessing and manipulating the DOM using JavaScript. In order to help in processing the many commands there are, I decided to put together a DOM cheat sheet of all the basic commands I am most likely to use on a regular basis and I can refer back to.

In the DOM, all HTML elements are defined as objects.
A method is an action you can do (e.g. adding or removing HTML elements).
A property is a get or set value (e.g. changing HTML content)

Finding HTML Elements

Method:

document.getElementById (id) – Find an element by element id
document.getElementsByTagName (name) – Find elements by tag name
document.getElementsByClassName (name) – Find elements by class name
document.querySelector (css selectors) – Find first element that matches a specific CSS selector
document.querySelectorAll (css selectors) – Find all elements that match a specified CSS selector

Changing HTML Elements

Property:

element.innerHTML = new html content – Change the inner HTML of an element
element.attribute = new value – Change the attribute value of an HTML element
element.style.property = new style – Change the style of an HTML element

Method:

element.setAttribute (attribute, value) – Change the attribute value of an HTML element

Adding and Deleting Elements

Method:

document.createElement (element) – Create an HTML element
document.removeChild (element) – Remove an HTML element
document.appendChild (element) – Add an HTML element
document.replaceChild (new, old) – Replace an HTML element
document.write (text) – Write into the HTML output stream

Adding Events Handlers:

Method:

document.getElementById(id).onclick = function(){code} – Adding event handler code to an onclick event

Conclusion

So these are the commands that I have been finding most useful this last week. The DOM can get far more complex, but creating this cheat sheet has enabled me to remain focused and take action with manipulating the DOM with JavaScript. I will be sure to add to this on my blog as I develop my knowledge.

Learning DOM Manipulation with JavaScript

Learning DOM manipulation with JavaScript.

DOM Cheat Sheet for JavaScript Programming

Finding HTML Elements

Changing HTML Elements

Adding and Deleting Elements

Adding Events Handlers:

Conclusion

Web Developer Leicester

Your Privacy

Categories

Recommended Products