Modify DOM in Javascript, Apr/4/2023

Modifying the DOM

• Changing an Element's style
• Changing the Content of any given element.
• DOM manipulation Methods

 

How can we change an element's style??

The first method is by directy change the properties of the style property for that element.

Here is the example:

 

The second method is by changing its class using the className or classList properties.

Like this:

There was an exercise to get used to this concept. Here is what I did.

 

I tried to change the "round1" box to accept the "basic" style.

In the CSS file, the given code is this:

 

So, the round1 div looks like the same with round2 and round3. I would like to make round1 have a basic class in this exercise.

Here is the solution:

Solution

First, I used var, but "let" is better in this case. "var" is the declaration globally. so the variables declared by "var" are available throughout the function. The variables declared by "let" are only available inside the block where we defined. 

It is a good habit to use let in Javascript coding.

 

In this solution, I declare the "node1" by using getElementByID() from HTML. I have round1 in node1 now.

I add the class using ".classLlist.add()" to add basic class to node1.

In the last code, we can see the node1(round1) is now the basic class!