Extra Practice

Remember: Learning to program takes practice! It helps to see concepts over and over, and it's always good to try things more than once. We learn much more the second time we do something. Use the exercises and additional self-checks below to practice.

1. Selecting and Adding DOM Elements

Review the HTML code, then answer the questions below.

<div id="content">
    <ul id="subnav">
        <li class="menu-item"><a href="#">Home</a></li>
        <li class="menu-item active"><a href="#">Archive</a></li>
        <li class="menu-item"><a href="#">About Us</a></li>
    </ul>
    <h1 class="page-title">Archive of Posts</h1>
    <p>Use this archive listing to find old posts.</p>
</div>

What line(s) of code would select the H1 title of this page?

let pageTitle = document.querySelector('.page-title'); let pageTitle = document.getElementById('#page-title'); let pageTitle = document.querySelector('h1'); let pageTitle = document.getElementByTagName('h1'); There are several ways to select elements from the DOM and each can be used according to the context and needs of the program.

To set the menuItems variable equal to the collection of menu items in the subnav, what line of code would work?

let menuItems = document.querySelector('.page-title'); let menuItems = document.querySelectorAll('.menu-item'); let menuItems = document.getElementById('#subnav .menu-item'); let menuItems = document.querySelector('#subnav .menu-item'); The menuItem variable must be populated using a command that will select all of the matching elements in the DOM.

What do we call objects like menuItems from the previous example?

DOM Element Lists Objects Array-like Objects Arrays The menuItems variable contains the result of a document.querySelectorAll() call. That command returns an Array-like Object that can be iterated over but which has special functions, too.

What would the results of this additional code be?
let subnavUL = document.querySelector('#subnav'); let newMenuItem = document.createElement('li'); newMenuItem.innerHTML = 'Contact Us'; newMenuItem.setAttribute('class', 'menu-item'); subnavUL.appendChild(newMenuItem);

The menu items in the #subnav list would be replaced with a new one. A new menu item with a "Contact Us" link would be added to the #subnav list. A new menu item with the "active" class would be added to the #subnav list. The #subnav list would be removed. A new menu item with a "Contact Us" link would be added to the #subnav list.

What commands would select the #subnav element and set it equal to subnavUL?

let subnavUL = document.querySelector('.subnav'); let subnavUL = document.querySelector('#subnav'); let subnavUL = document.getElementById('#subnav'); let subnavUL = document.getElementById('subnav'); There are two primary ways to select using the element ID from the DOM.

2. Modifying DOM Elements

Review the HTML code, then answer the questions below.

<div id="item-123" class="content-item-wrapper">
    <h3 class="item-title">Magnificent Search Result</h3>
    <p class="item-description">Some helpful description about this search result.</p>
    <ul id="item-actions">
        <li class="action save"><a href="#">Save</a></li>
        <li class="action share"><a href="#">Share</a></li>
    </ul>
</div>

How could we select just the content item wrapper element?

let contentItemWrapper = document.querySelector('.item-123'); let contentItemWrapper = document.getElementById('item-123'); let contentItemWrapper = document.querySelector('#item-123'); let contentItemWrapper = document.getElementsByTagName('div'); There are several ways to select elements from the DOM and each can be used according to the context and needs of the program.

Which command would select the "save" list item from inside the contentItemWrapper selected in the previous example?

let saveItem = contentItemWrapper.querySelector('.save'); let saveItem = document.querySelectorAll('.save'); let saveItem = document.getElementById('#item-actions .save'); let saveItem = document.querySelectorAll('#item-actions.save'); The saveItem variable may be populated using a query inside the contentItemWrapper DOM element.

Which line of code would alter the class attribute on the saveItem element to indicate that the item has been saved?

saveItem.setAttribute('id', 'saved'); saveItem.style.background = "#aa0000"; saveItem.removeAttribute('class'); saveItem.setAttribute('class', 'action saved'); The saveItem element makes the setAttribute() method available for modifying attributes.

Which command would select the "share" list item from the contentItemWrapper element?

let shareItem = contentItemWrapper.querySelector('p.share'); let shareItem = contentItemWrapper.querySelector('#item-actions.action.share'); let shareItem = contentItemWrapper.querySelector('.action .share'); let shareItem = contentItemWrapper.querySelector('.action.share'); The shareItem can be selected using contentItemWrapper.querySelector() with the correct CSS selector.

Visit Content Online

The content on this page has been removed from your PDF or ebook format. You may view the content by visiting this book online.

results matching ""

    No results matching ""