DOM Access Assignment

Completing this assignment depends on knowing:

• how to set up an event handler or use the onClick function
• basic JavaScript to create variables, work with arrays, if/else statements and for loops
• methods for selecting and navigating the DOM Tree, adding and removing attributes, creating a new element and appending it to the DOM

GitHub Repository

https://github.com/htc-ccis2591/dom-access

You’ll want to begin each assignment by forking the repository and cloning it locally. When you are done, you’ll push to GitHub and submit a pull request.

Moonflower’s Coffee Shop

Open the web page in a browser. You’ll see that it loads a page with an image for each item on the menu.

In the spirit of progressive enhancement, the page may not be amazingly beautiful, but all the info is visible without any JavaScript.

For this assignment, the object is to transform the page with JavaScript, altering the DOM with the techniques discussed in class, so that when the page loads, all images are hidden. Add text under the “Menu” heading to indicate that you can click on an item to see an image. Then when an item is clicked, such as the Cappuccino or the Latte, the corresponding image should show off to the side.

If you look at the HTML provided, you’ll see an image tag in the aside on line 14. This is the image that displays on the right side. You can show one of the menu item images by filling in the appropriate value for the src attribute. That value comes from the corresponding “hidden” image in the menu list.

DOM Access Review

Remembering the following functions and properties will help you navigate the DOM:

• getElementById() - used to select a single element by its id attribute
• getElementsByTagName() - used to select all elements (that are children of the target - the object before the dot) with the specified tag name. REMEMBER: This always, always gives you back an array. It may have one item, but it is an array with one item in it. This is different than the result of getElementById().
• querySelector() and querySelectorAll - used to select one or more elements by CSS selector
• the properties (meaning you don’t have () after them): parentNode, previousElementSibling, nextElementSibling, firstElementChild, lastElementChild

If your result is more than one element (such as when using getElementsByTagName()) then you need to use a for loop to look at or do something with each individual item.

var paras = document.getElementsByTagName("p");
for (int i = 0; i < paras.length; i++) {
    current = paras[i];
    current.setAttribute("class", "hide");
}

You can also use array notation to access individual items. Note: Before using syntax like this, it is a good idea to first check that you actually got items back.

para1 = paras[0];
para2 = paras[1];

Event Handlers

We looked at two ways to add events to objects:

Setting the property:

document.getElementById("submit").onclick = 
   function() {
      alert("The button was clicked!");
      
      // You can see which thing was clicked by using this
      // this = the element clicked on
      console.log(this);
   };

With an event listener:

document.getElementById("submit")
.addEventListener( "click", function() {
      alert("The button was clicked!");
      
      // You can see which thing was clicked by using this
      // this = the element clicked on
      console.log(this);
   });

Adding to the DOM

Getting the text in the right place is tricky. We looked at the appendChild function in class to add something in as a child of another element. This makes it the last child, at the bottom. You won't want your "click on the items" text to be at the bottom of the browser. So using the insertBefore method will be handy. If you are having trouble with this, I encourage you to ask Google for help. BUT make sure you understand how the solution you find works. Remember there are many, many ways to get this done.

DOM Access Practice

Use the index.html file as the DOM to answer the following questions. Put the answers in your pull-request comment.

1. Which JavaScript function is most appropriate to select the aside element on line 13, the getElementsByTagName() function or the getElementById() function?

2. Which function is most appropriate to select the img element on line 14?

3. How would you select all of the items with the menu-item class?

4. How would you select all of the list item elements?

5. Assuming that you had a list item element, how would you get the menu-item that is inside the list item? How would you get the image inside that list item?

6. How would you select only the list item elements in the div under the Bakery Goods header? (using multiples step is OK.)