In my last post, I wrote about the 5 different Document Object methods and in this post I’m going to expand on that and talk about Document Object Manipulation in JavaScript.

If HTML is the page structure and CSS is the page styling then JavaScript is there to control the page behaviour.

The 4 main areas of DOM manipulation are:

1. Style manipulation
2. Class manipulation
3. Tag manipulation
4. Attribute manipulation

Editing an elements style with the “Style” property

When we talk about the style of something when it comes to JavaScript we’re really talking about a huge object that contains many variables that can be set. Examples include margin, font-size, colour etc. Although all the properties may not be set, the style object will still contain these properties for us to manipulate.

The first thing would be to create a variable that will be used to store the selected element.

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

This will store the element with the ID “highlight” into the variable “tag” for us to use further. Once the variable has been populated with the correct element we can begin to manipulate the various properties in style as shown below.

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

Note that because we are using JavaScript we need to pass through strings of CSS values (denoted by the quotation marks above).

When we change the value of a style property on a webpage using this method the CSS will immediately be updated on the page to the new style. We wouldn’t use this method to initialise our web page we would rather use the pages CSS file. This type of manipulation is to make the elements on our web page interactive (change colour after certain period of time or disappear when the user clicks on it).

For the example shown above we wouldn’t necessarily implement the changes to the element with the “highlight” ID because it involves a lot of repetition of the same terms.

Editing an element with the “Class” property

A better way would be to assign a new class in the CSS document (as it contains more than one styling element to be changed) and assign the ID to the new class (rather than update each value in the style object manually).

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

Once the style class has been added to the CSS style sheet the element can be changed using the following.

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

classList methods for manipulating style sheet:

The classList is not an array and therefore we can not update it how we usually would with an array so instead we use the following:

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

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

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

The “add” and “remove” methods are self explanatory but when we use “toggle” we’re essentially looking for an element that has (or doesn’t have) a specific ID and then toggling it (on or off).

Editing an element with the “Tag” property

This section we’re going to look at changing the actual text inside of a HTML tag. Let’s say that we wanted to change the text within a “p” tag.

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

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

Once we have selected the tab we can either view it or update it using the following:

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

NOTE: how the returned value doesn’t contain any of the internal tags (in this instance the <strong> tags). JavaScript will go down as deep as it needs to within the <p> tag and will return a string.

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

The content of the HTML (the actual text) can be updated using the code above. Note that this method doesn’t parse HTML both ways so if you include HTML tags when updating the values the HTML will show as text on the web page.

If we wanted to keep the formatting on the returned paragraph (or update the formatting) then we would use the innerHTML property (instead of textContent).

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

Once the desired tag is selected we can view it using the following:

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

Editing an element with the “Attribute” property

The last thing we’re going to look at updating in this post are tag attributes. An attribute is something within a tag i.e. a src tag for a picture or a href tag for an external link as shown below in the following HTML.

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

In each instance we can use the getAttribute method to view it or the setAttribute method to set it. An example for looking at and then setting the link (href property) inside of the a tag shown above can be seen below.

var link = document.querySelector("a");
link.getAttribute("href");  // returns "www.google.com" 

link.setAttribute("href","www.dogs.com"); 
/// <a href="www.dogs.com">I am a link</a>