4a.19. A final test drive Type in the JavaScript for startOver() from the last page, and don't forget to add the onClick handler to your HTML's <input> button. Then take the Top 5 CD listings page for a final test drive. You should be able to click on CD covers, add them to the Top 5 listings (along with a nice overlapping ranking), remove all the CDs by clicking "Start Over", and then do it all over again. Country blues? Electric guitars? The old Delta or the back alleys in Texas... pick your favorites. 4a.19.1. The Great Chapter 4 Coding Challenge Write a killer web application that uses the Document Object Model to create a dynamic user interface, without writing any Ajax code. Remember this? You just built a slick web app, without a single line of asynchronous JavaScript. Nice job! Don't think we've left asynchronous programming altogether... we're getting ready to dive back in as soon as you turn over to Chapter 5. Check it out for yourself! 60 Second Review The browser represents the HTML, CSS, and JavaScript that makes up a web page as a tree full of objects, using the Document Object Model, or DOM. You can view and change the DOM using JavaScript code. Changes you make to the DOM are automatically reflected in the web page that the browser is displaying. You can use the JavaScript document object to access the browser's DOM tree for the current web page. You can use the DOM from any web application, not just asynchronous ones. A DOM tree is made up of different types of nodes: elements nodes, attribute notes, and text nodes. Element nodes can have only a single parent. If you change an element's parent, or add the element as the child of another node, you are moving the element in the DOM tree. You can add CSS styles and JavaScript event handlers to DOM nodes using JavaScript code.
Just Do It Solutions It's time to exercise your DOM skills one more time. The startOver() function needs to do several things: Run through each of the children of the "top5" <div>. Any CD cover images need to be added back to the top of the page. And other elements, like <span>s, need to be removed from the page.
function startOver() { var top5Element = document.getElementById("top5"); Start out by getting the two <div>s you'll need to work with. var cdsElement = document.getElementById("cds"); while (top5Element.hasChildNodes(Keep working on this <div>'s children until none are left.)) { var firstChild = top5Element.firstChild; if (firstChild.nodeName.toLowerCase() == "img") { cdsElement.appendChild(firstChild);If the node is an <img> element, add it back to the top of the page... } else { top5Element.removeChild...if it's a <span>, or whitespace, or anything else, just remove it from the page.(firstChild); } } addOnClickHandlers();This calls the addOnClickHandlers() function you wrote earlier, and adds event handlers back to all the CD cover <img> elements. }
|
|
