Javascript Notes – DOM Manipulation


Manipulating Style

.style

The easiest way to change a simple style is using the .style property that is prebuilt into Javascript

This will let us manipulate any type of CSS property that exists. This is ok for one or two changes but is not great if you want to change a lot of style properties at once. The preferred property for doing that is buy adding, removing or toggling CSS classes.

.classList

.classList is used to add, remove & toggle classes.

If we add a class, we are taking a class that already exists in the CSS files and saying that that class now applies to this element, where it did not before.

If we remove a class, we are stripping a class away from an element that had been assigned to it in the html.

If we toggle a class we are either adding it to the element, or reverting the element to its previous state each time we apply the toggle property.

So for example if we create a random class in our CSS file:

and then we can add it like this:

and here is a full set of examples:

**NOTE**  classList is a read only list of classes for a given element. It is not an array.

Manipulating Content

.textContent

The .textContent property is used for replacing the text in a selected tag with something new. If we have the following html

and then we use the .textContent property we can replace the text

Note that this will replace the strong html tags inside of this paragraph. The .textContent  will only replace text strings, and nothing else! If we do want to add in some new HTML we can use…

.innerHTML

So if we take the same HTML sample above and we then use the .innerHTML property on it we will get the HTML tags inside of it also.

We would not usually set this = to something else, as like the .textContent property we would just completely overwrite the content that we have selected, which is rarely what we will want to do. But you could if you wanted to. You probably won’t… but you could…

Manipulate Attributes

Attributes are items like href and src. We can get these attributes and reset them. So we can change links and we can change images for example. A simple example of when you would use this would be changing the image link in an image slider! Here are some quick samples.

.getAttribute()

.setAttribute()

So if we take this simple bit of HTML:

We can then manipulate it like this

+ There are no comments

Add yours