Javascript 101: Combining Javascript, HTML and CSS

After having learned the basics of Javascript, we can now move to the really exciting part: Modifying the HTML content of our websites by using Javascript. When speaking about the HTML content of our website, one term you will necessarily come across is the DOM. DOM is short for Document Object Model. It basically describes the structure of your website. HTML is only a markup language that we use to create the Document Object. Consequently, the correct term for modifying our HTML content with Javascript is DOM-Manipulation.

To follow along with this post, I’d highly encourage you to use codepen.io – it’s a platform that allows you to write HTML, CSS and Javascript directly in your browser and see the results in real time. Furthermore, this post requires some foundational knowledge of HTML elements and CSS selectors. If you don't feel confident with this yet, you should revisit the basics of HTML and CSS before venturing further into this post.

Targeting DOM Elements

Let’s say you want to change the content of a DOM element using Javascript. Below is a simple example h1 heading that includes a nested span element:

<h1>Hello <span class="heading red" id="name">World</span>!</h1>  

If we wanted to say hello to a specific person instead of the entire world, we'd need to change the content of our span. Imagine the dashboard of an app that greets the user with a friendly hello username. To do this, we first need to target the right element that we want to change. document.getElementById() is one of quite a few different Javascript selectors. It allows you to target a DOM element with a unique ID.

document.getElementById("name");  

Just writing this piece of code doesn't do anything yet. However, there are several properties of DOM elements, that we can access by using this element selector. Do you remember how javascript objects and the dot notation? We can work with our DOM element like with javascript objects and access the properties by using dot notation. One property for example is innerHTML. This property contains everything that is inside of our element. In our example, document.getElementById("name").innerHTML would equal "World". Another example of a DOM element property would be classList. This property not only contains all classes of our DOM element (heading and red) but also has some useful methods for removing and adding new classes by using Javascript. Listing every property here would dramatically increase the length of this post. Luckily, w3schools has already published a comprehensive list of DOM element properties and methods.

By using properties such as innerHTML, we can not only read the content of our DOM elements - we can also add, transform and remove values as we like. Let's take a look at this example below:

HTML:

<div id="container">  
  <h1>There is no button here</h1>
</div>  

Javascript:

var myContainer = document.getElementById("container");  
myContainer.innerHTML = "<button>Click me</button>";  

With our code, we have changed the content of our div with the id container to a button instead of a heading.

A pretty common thing to do in Javascript is to execute actions when the user is interacting with the website. This could be for example clicking on a button, scrolling down the page or moving the mouse to a certain area. To respond to these actions in Javascript, we can use event listeners. Event listeners are literally listening to what the user is doing on your page and once the action that you are listening for has been executed, they will run a function that you previously defined. An event listener could look like this example below.
HTML:

<div class="form-container">  
  <button id="cool-button>Start</button>
</div>  

Javascript:

var myButton = document.getElementById("cool-button");

myButton.addEventListener('click',function(){  
  //the code in here will be executed for every click on "myButton"
});

We took two steps here. First, we targeted a DOM element with the id cool-button and assigned it to a variable. Then we added an event listener to this element. This means our website is only listening for events that happen in this element. Then we defined 'click' as the event we want to listen for. There is a multitude of events you could add instead of click. The table below shows some common events:

Event Name Description
"mouseenter" the user moves the mouse over the target element
"mousemove" the user moves the mouse above the target element
"mouseout" the user moves the mouse out of the target element
"click" the user clicks on the target element
"drag" the user drags the target element
"keypress" the user presses a key on the keyboard

For a more comprehensive list of DOM events you should have a look at the overview on w3schools.

A code example that adds a class to a heading when a certain button is pressed could look like this:

HTML:

<div class="form-container">  
  <h1 id='heading'>My cool text</h1>
  <button id="cool-button>Start</button>
</div>  

Javascript:

var myButton = document.getElementById("cool-button");  
var myHeading = document.getElementById("heading");

myButton.addEventListener('click',function(){  
  myHeading.classList.add('red');
});

By combining event listeners with DOM element methods and properties we can already achieve a wide variety of effects. In an upcoming post, we will explore different kinds of Javascript selectors and discuss their advantages and disadvantages. We will then also continue to build more complex logic such as loops and conditional cases in our code. For now, try to create a few interactive elements that will react on clicks, scrolls or other events. This will help you to become more confident with the basics before we start adding logic.

Further down the rabbit hole