Using selectors

So far, we've only been using console.log and alerts and prompts to input and output information. While these methods are useful for testing, they're not exactly what you would use in everyday life. Most of the web applications that we use, from searching to email, use the DOM to interact with the user to get input and show information. Let's take a look at a small example: https://github.com/PacktPublishing/Hands-on-JavaScript-for-Python-Developers/tree/master/chapter-6/hello.

If you open the HTML in the browser, we see a very simple page:

Figure 6.1 Our basic page

If we click the button, we don't get an alert or a console message, but instead, we have this:

Figure 6.2 An in-page response to our click!

Yay! It's our first instance of DOM manipulation.

DOM manipulation explained

Let's look at the JavaScript that powered that amazing example:

document.querySelector('button').addEventListener('click', (e) => {
 document...