Okay, so I assume you have heard of the almighty DOM — that’s why you are here, right? If you are finding it difficult, I can assure you that after reading this article, you will feel comfortable enough with the whole DOM manipulation thing.

But please before I start, permit me to share with you my little story on how I got to know about the DOM (its a funny story).

How I learned about the DOM

A few months into my web development career, I was still learning the good old HTML and CSS. I mistakenly stumbled upon a DOM course on w3schools. The first example they had was one with a light bulb and two buttons.

The onclick of one of the buttons would “switch on” the light bulb and the onclick of the second button would “switch off” the light bulb. I was literally blown away.

How could a button on a website switch on a light bulb? How!?

I even twitted about it. Then I found out that they were just changing the source attribute (src) of the images. I was heart broken, but regardless that little experience made me fall in love with the DOM. It made me want to know more.

And in this article I’m going to walk you through it. I promise that if you stick with me until the end and practice all that I write about, the whole DOM thing won’t be an issue for you ever again. So are you ready? Ok Allons-y (let’s go!).

To make this easier to understand, I have grouped everything into the following sections below.

• Definition of the DOM and Basic concepts
• How to Select Elements in the DOM
• How to Traverse and Move Around the DOM
• How to Manipulate Elements in the DOM
• General Styling
• Event handling in the DOM

So grab a coffee or anything you like and relax as I walk you through each section.

Definition of the DOM and Basic concepts

What is the DOM?

The DOM stands for Document Object Model. It can simply be understood as a tree of nodes created by the browser. Each of these nodes has its own properties and methods which can be manipulated using JavaScript.

The ability to manipulate the DOM is one of the most unique and useful abilities of JavaScript.

The image below gives a visual representation of what the DOM tree looks like.

Here we have the document object. This is the core/foundation of the DOM. To perform any form of DOM manipulation, you have to access the document object first.

Next we have the html root element which is a child of the document object.

Next on the line are the body and head elements which are siblings to each other and children of the html element.

Under the head element we have the title element which you can agree is the child of the head element and parent to the text node - “my text”.

Directly under the body element we have two elements (a tag and h1 tag) which are siblings to each other and children of the body element.

Finally the href attribute and the text node - “my link” - are children of the a tag. Exactly the same way the text node, “My header”, is a child of the h1 element.

This might seem a little confusing if you are an absolute beginner, but trust me - it always gets better (with practice of course).

#javascript #react #web-development #developer #programming