Dreamweaver program with html code
|

DOM Manipulation in JavaScript — A Brief Introduction

If you are a beginner student with JavaScript and struggling with learning how to program, this article will provide a way for you to gain two small wins for yourself with DOM manipulation in JavaScript. This walk-through is ideal for you if you already know a little HTML and CSS and want to start dipping your toe into JavaScript programming. In this article, I am going to show you how to use JavaScript to first alter the color of some text on your screen and then alter the content. We will use getElementById, a JavaScript method that allows us to access the DOM, or Document Object Model, to change the color of our text and the content of our text.

You do not need to be an expert in HTML or CSS in order to participate in these exercises. As long as you can type and get your webpages to appear in a browser, you will be able to follow along. If you’d like to try this yourself, you can create a HTML file in your favorite text editor. I am using Dreamweaver, but you can use Atom, TextWrangler, Notepad++, Sublime or whatever you’d like.

DOM Methods and Properties

Before we write our JavaScript programs that will allow us to change the color and the content of our text, we will first define the methods and properties, which compose the HTML DOM:

  • Methods: Think of methods as the actions that you’ll apply to your HTML elements.
  • Properties: Think of properties as the values that you will change, add or remove in some way.

In this tutorial, we will use one method, getElementById, and two properties. The two properties we will use are the style property and the innerHTML property. We will add an id to the HTML element that we wish to manipulate so that we can use the getElementById method to identify the element with JavaScript. This is the first step we must take in order to access the HTML elements.

Setting Up Our HTML Document

As your web applications grow in size, scope and scale, it is considered best practice to write your CSS and JavaScript in separate files and include references to those files in your HTML document. For simplicity and to show you how these different elements work together, I am including my CSS and JavaScript in the same file.

After you enter your boilerplate HTML, add a paragraph tag with an id of “changeMe” and some text.

Next, add your style tags after the title and create a CSS id called #changeMe. Set the color of this id to blue. Next save this file with a .html extension. Close the file and double click on it to run your page in your browser. You should see some blue text on your screen.

Using the JavaScript Style Property

We are now ready to add our JavaScript. Directly before your closing HTML tag, add opening and closing script tags. We will put our JavaScript between these tags.

In order to use the style property to change the color of our text, we first have to tell JavaScript which id needs to be altered. This is where the getElementById method comes into play. Even though there is only one paragraph on the page, we still need to identify the id for the browser. We do so by creating a variable and setting it to the id that needs to be changed. Note that I am using the const declaration instead of var, but you can use var if that’s what you’re familiar with. I have added comments below to show exactly what is going on:

const blueParagraph = document.getElementById(“changeMe”);

Next, we select our variable blueParagraph and add the style method so that we can change the color of our font:

blueParagraph.style.color = “green”;

Now save your document and refresh your screen. Did your text change from blue to green? If you try to follow along and find that you’re getting unexpected results, carefully proofread your code to make sure it says exactly what is below. If you forget to add quotation marks around your id or the color style, the JavaScript code will not run.

At this point, you should see the words “Change me from blue to green” on your browser. If you’re having trouble, type your code exactly as it is in this example:

interactive javascript example

Using the JavaScript innerHTML Property

We are now going to use JavaScript to change these words to say “It’s a great day to learn a little JavaScript!” We will do this with the innerHTML property. We can add this property to our selected id and assign a new value to it. Directly below the last line of your JavaScript code and before the closing script tag, type the following:

document.getElementById(“changeMe”)[removed] = “It’s great day to learn a little JavaScript!”;

Now refresh your browser. Did you see the text change? If not, take a look at the code below, type it exactly as you see it, and try again.

interactive javascript example with innerHTML property

Hopefully you enjoyed these JavaScript exercises in which we used the getElementById method to access the HTML element we wanted to change and the style and innerHTML properties to define a new text color and new text content.

If you’re feeling ready to practice what you’ve learned and take on a slightly bigger challenge, there are some decent tutorials on the W3Schools website. I encourage you to begin by reading the introductory material of the DOM to reinforce these lessons. Once you have a mastery of the basics, you can begin to explore more advanced topics, such as adding and removing elements from the DOM, animations, and events.

Similar Posts

4 Comments

  1. Wow, great information on Java Script. I kind of struggle with changing the properties, and this information will be quite useful for me! I like how you show the examples, so I am able to physically see the changes I need to make, and not just follow directions, that can quite honestly, be confusing! Great information and very easy to follow!

  2. This is definitely something I need to learn more about. I’ve actually been having trouble with my JavaScript lately and page speed. Google Insights suggests I eliminate render-blocking JavaScript as well as minify JS as well but I don’t know the first thing about how to do that. Is that something else you could touch on or give recommendations on how to achieve?

    1. Hi Charlie, Sorry to hear you’re having trouble with your website. I will definitely write about this in a future post. In the meantime, I’ll point you to an online resource that suggests a couple of plug-ins you can add to your website. This article has some good suggestions. If you get stuck, let me know, and I’ll do what I can to help.

Leave a Reply

Your email address will not be published. Required fields are marked *