Javascript: DOM Manipulation

Manipulating Style

.style

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

//SELECT
var tag = document.getElementById("highlight");

//MANIPULATE
tag.style.color = "blue";
tag.style.border = "10px solid red";
tag.style.fontSize = "70px";
tag.style.background = "yellow";
tag.style.marginTop = "200px";

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 by 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:

/*DEFINE A CLASS IN CSS*/
.some-class {
  color: blue;
  border: 10px solid red;
}

and then we can add it like this:

var tag = document.getElementById("highlight");
//ADD THE NEW CLASS TO THE SELECTED ELEMENT
tag.classList.add("some-class");

and here is a full set of examples:

var tag = document.querySelector("h1");

//ADD A CLASS TO THE SELECTED ELEMENT
tag.classList.add("another-class");

//REMOVE A CLASS
tag.classList.remove("another-class");

//TOGGLE A CLASS
tag.classList.toggle("another-class");

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

<p>
  This is an <strong>awesome</strong> paragraph 
</p>

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

/Select the <p> tag:
var tag = document.querySelector("p");

//Retrieve the textContent:
tag.textContent //"This is an awesome paragraph"

//alter the textContent:
tag.textContent = "blah blah blah";

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.

//Select the <p> tag:
var tag = document.querySelector("p");

tag.innerHTML
//"This is an <strong>awesome</strong> paragraph"

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:

<a href="www.google.com">I am a link</a>
<img src="logo.png">

We can then manipulate it like this

var link = document.querySelector("a");
link.getAttribute("href");  //"www.google.com"
//CHANGE HREF ATTRIBUTE
link.setAttribute("href","www.dogs.com"); 
///<a href="www.dogs.com">I am a link</a>

//TO CHANGE THE IMAGE SRC
var img = document.querySelector("img");
img.setAttribute("src", "corgi.png");
//<img src="corgi.png">

Comments

Recent Work

Basalt

basalt.software

Free desktop AI Chat client, designed for developers and businesses. Unlocks advanced model settings only available in the API. Includes quality of life features like custom syntax highlighting.

Learn More

BidBear

bidbear.io

Bidbear is a report automation tool. It downloads Amazon Seller and Advertising reports, daily, to a private database. It then merges and formats the data into beautiful, on demand, exportable performance reports.

Learn More