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
- 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.
Setting Up Our HTML Document
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.
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”;
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:
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.
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.
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!
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.