We all know in order to make an interactive website, the 3 main ingredients, we use are HTML, CSS, and JavaScript. But do we actually know how JavaScript works with HTML behind the scene? Do we really understand how HTML, CSS, and JavaScript, all blend and work together, to create websites?

In this blog, we will discuss the structure of the website, the Document structure model (DOM), the CSS Object Model (CSSOM), and then how all these come and work together.

OVERVIEW OF HOW JAVASCRIPT WORKS WITH HTML

The Anatomy of a Website

In order to make the explanation easy in understanding, I will refer to the HTML, CSS, and JavaScript and compare them with different aspects of the human body. Just like a human body, which consists of skeleton and structure, in the same way, websites also consist of content and basic structure made of HTML.

And as every human, who wear different types of clothes and accessories, in the same way, websites are also designed with different colors, images, and styles with the help of CSS. And at last, like the human body, which moves, walk or do any action, in the same way, websites also get interactive and add more functionality with the help of JavaScript.

Also read, A.I. Can Now Write Its Own Computer Code. That’s Good News for Humans.

As we read above the importance of HTML, CSS, and JavaScipt, let us now understand a few more important terms and concepts which is related to the website.

Document Object Model (DOM)

Document Object Model or DOM is an interface or tree-like structure of HTML, XML, or SVG. On the web, HTML is referred to as documents, It represents a structure view with the number of nodes and each node consists of objects that have properties and functions.

With the help of these nodes, you can change the document’s structure, style and add events to them also. The <html> the tag comes at the top, hence known as the root node, rest tags which comes under <html> know as children nodes, the nodes at the bottom order, are known as leaves, usually containing elements’ attributes, elements, and values.

CSS Object Model (CSSOM)

CSS Object Model works and behaves similarly to DOM but has significant differences when it comes to execution, like DOM which consists of all the contents and attributes, CSSOM consists of all the styles attributed to the nodes.

Also read, Simple steps to Increase your Website’s Web Performance

How does JavaScript Work with HTML?

Now the main question arises that how does JavaScript work with HTML actually? In simple words, you can think of JavaScript as an extensive library of HTML. Elements of HTML are stored as an object in the DOM structure and JavaScript lets you manipulate those objects.

When a website gets loaded on a browser, elements and properties related to an HTML document are stored in the parent document object. If you console.log the document keyword, you can get whole HTML document data.

<body>
  <h1>How does JavaScript Work with HTML?</h1>
</body>

When you console.log document.body, it display body element and everything inside it because document is object and body is the property of the object that we can access it through dot notation.

For example, we can update the background color of the body using the style attribute,

document.body.style.backgroundColor = 'crimson';

Let us understand more with an example, Look at the group of code mentioned below, here when we click on the button, the date and time is displayed.

<h2>Welcome to HTML and JS</h2>

<button class='btn'>
  Check Current Time and Date
</button>

<br/>
<br/>
<br/>
<br/>

<span id='timeDate'></span>
<script>
   const btn = document.querySelector(".btn");
   const para = document.querySelector("#timeDate");

   btn.addEventListener('click', () => {
      const date = new Date();
      para.innerHTML = date
   })
</script>

Let us see how we are able to display it, first, we are saving the reference of the button element with the help of the document object to a variable btn, as we know that HTML is represented by DOM. We can access any HTML elements/nodes using a few numbers of document methods like getElementById(), getElementsByClassName() or querySelector(). Here in the code, we are using querySelector(), to access the element, as it is one of the most robust methods in selecting any type of element.

When we use querySelector() to access the button element, we mention the class attribute which is inside the button element.

Attributes are the special keywords that contain additional information and values about the HTML elements. So we pass the class attribute in the querySelector() to access the button element and save the reference to a variable btn, and in the same way, we use the id attribute to access the span element and save the reference to a variable para.

After that, an event listener is attached to the button element with the help of btn variable, an event listener is a property that allows the element to wait and ‘listen’ to the particular event, and the event handler is passed to it. Like here we pass the ‘click’ event with a callback function which is called when the user clicks on the button element.

Once the user clicks on the button, the event is fired and the callback function is called, in which we set the inner HTML of the span element, with the date and time data.

Also read, Simple Explanation on Sorting Algorithms with JavaScript | Part 1

Final Words

In this tutorial, we studied the anatomy of the website, DOM structure and importance, how JavaScript access and manipulate the HTML document. I hope you like the article and share it more with your colleagues and friends, also bookmark this website to get more awesome article like these.

How JavaScript works with HTML you might not know