You have just seen that the console gives you access to the variables you created. Earlier we said that these variables could be used for accessing elements on the page. You can try that now. Enter the following in the console:

document.querySelector(DETAIL_IMAGE_SELECTOR);

Press the Return key. It will show you the HTML for the detail image. Hover over this HTML in the console. You will see that the detail image is highlighted on the page, just as if you clicked HTML in the elements panel (Figure 6.11).

Figure 6.11  HTML in the console corresponds to an element on the page

In the line of code you wrote on the console, the word document is the variable built into the browser that gives you access to the web page. Its value is not one of the primitive types. It is a complex value, whose type is object.

The document object corresponds to the entire page. It gives you access to a number of methods for getting references to elements on the page. Methods are a type of function (they are functions with an explicitly designated owner, but you do not need to worry about that detail right now) – a list of steps for the browser to follow. You used the querySelector method in the line you entered in the console. The dot operator (i.e., the period) in document.querySelector is how you access an object’s methods.

You asked the document to use its querySelector method to find any element matching the string '[data-image-role="target"]'. querySelector responded with a reference to the element that it found, the detail image (Figure 6.12).

Figure 6.12  Access to the page provided by document and document.querySelector

And now, a bit of terminology. You did not really “ask” the page for matching elements. You called the document’s querySelector method and you passed it a string. The method returned a reference to the detail image element.

When you call a method, you are making it run whatever task it was designed to perform. You will often need to pass it information it needs to do that task, which you place in parentheses after the method’s name. Then, in addition to its assigned tasks, the method may return a value that you can use.

Remember that DETAIL_IMAGE_SELECTOR was assigned the value '[data-image-role="target"]', which means that this is what is passed to querySelector.

Behind the scenes, querySelector uses this string to search for any elements that match that selector. When it searches, the document is not actually searching the page, it is searching the document object model, or DOM. The DOM is the browser’s internal representation of an HTML document. It builds this representation as it reads through and interprets the HTML.

In JavaScript, you can interact with the DOM using the document object and its methods, such as querySelector. For each HTML tag, there is a corresponding element in the DOM, and you can interact with any of these elements using JavaScript. (Generally, when we refer to an “element,” we mean a “DOM element.”)

In the console, call document.querySelector again, passing it DETAIL_IMAGE_SELECTOR to get a reference to the element for the detail image. But this time, assign the reference to a new variable named detailImage:

var detailImage = document.querySelector(DETAIL_IMAGE_SELECTOR);

Press Return, and the console will print undefined (Figure 6.13). Do not panic! This is not an error.

Figure 6.13  Declaring a variable in the console

The console is just doing its job, telling you that there is no resulting value from declaring a variable. In JavaScript, the absence of a value is represented by the keyword undefined.

That does not mean that your detailImage variable was not assigned. To check it, just type detailImage in the console and press Return. You will see the HTML representation of the detail image, just as you saw when you entered document.querySelector(DETAIL_IMAGE_SELECTOR) (Figure 6.14).

Figure 6.14  Checking the value of detailImage

What is the point of all this? By assigning a reference to a variable, you can use the variable name any time you want to refer to the element. Now, instead of having to type document.querySelector(DETAIL_IMAGE_SELECTOR) every time, you can just type detailImage.

When you have a reference to the detail image, it is easy to change the value of its src attribute. In the console, assign detailImage.src to the string 'img/otter2.jpg'.

detailImage.src = 'img/otter2.jpg';

Using the dot operator, you accessed the src property of the detailImage object. A property is like a variable, but it belongs to a particular object. When you assign (or set) src to the string 'img/otter2.jpg', you will see that a different otter occupies the detail image area (Figure 6.15).

Figure 6.15  Setting the src property of the detail image

The src property corresponds to the src attribute of the <img> tag in index.html. Because of this relationship, another way to achieve the same result is to use the detailImage’s setAttribute method.

Call this method in the console and pass it two strings: the name of the attribute and the new value.

detailImage.setAttribute('src', 'img/otter3.jpg');

The detail image changes once again (Figure 6.16).

Figure 6.16  Using setAttribute to change the image

You now have all the pieces you need to create an automated way to change the detail image. Get ready to write your first function!