Let's look at the JavaScript that powered that amazing example:
document.querySelector('button').addEventListener('click', (e) => {
document.querySelector('p').innerHTML = `Hello! It is currently ${
new Date()}.`
})
The first thing to notice is that we're operating on the document object. document is JavaScript's conception of what the page in the browser consists of. Remember when I mentioned that the DOM is an API exposed by the browser? This is the vector by which you access the DOM: document.
Before we dissect the JavaScript, let's see how the DOM and HTML differ. Here's our HTML for our page:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<p></p>
<button>Click me!</button>
<script src="index.js"></script>...
