19.2    The “document” Object

As you can see in Figure 19.1, the document object is the topmost object of the DOM tree. This document object enables you to access all elements of the HTML document with JavaScript and change them under certain circumstances. In this context, the document object represents the complete web page and is the owner of all other nodes of the web page. If you want to address an element in an HTML document, for example, you can do that via the document object and the querySelector() method as follows:

let element = document.querySelector('body'); 

If you need access to other objects (nodes) of the web page, you need to start at the top with the document object.