Dynamically Change HTML & CSS Using Vanilla Javascript

So you have a sweet HTML page and it's styled up real nice using custom CSS, but now you want to dynamically update the contents based on actions taken by the user.

How the heck are you supposed to do that?!

What you're really asking here is, "How do I manipulate the HTML document structure?"

This is done using something called the Document Object Model (DOM). The DOM is a set of browser based API's, or methods, that let you manipulate the HTML and CSS of your web page based on certain actions taken by the visitor.

In JavaScript, actions taken by visitors are called 'Events'. There are 'click' events, which is when your visitor clicks on a certain part of the screen or a button. There's an 'mouseover' event that that is triggered when the mouse cursor hovers over a particular part of the web page.

You can run any bit of JavaScript code and create pretty much endless functionality based on these events. You can see a list of them here and learn more about events here.

The best way to start learning about DOM manipulation is to read this article on the MDN website entitled 'Manipulating Documents" and do the 'Active Learning' Shopping List exercise the article walks you through. I personally had a hard time understanding this until I started tinkering with code and doing simple exercises.

Show Comments

var.pop( )

Web Development Tips & Tricks