tailieunhanh - DHTML Utopia Modern Web Design Using JavaScript & DOM- P17

DHTML Utopia Modern Web Design Using JavaScript & DOM- P17:In a single decade, the Web has evolved from a simple method of delivering technical documents to an essential part of daily life, making and breaking relationships and fortunes along the way. “Looking something up on the Internet,” by which is almost always meant the Web, is now within reach of almost anyone living in a first-world country, and the idea of conducting conversations and business (and probably orchestras) in your Web browser is no longer foreign, but part of life | Chapter 10 DOM Alternatives XPath li ul These new ul elements should be hidden by default. 4. Finally alter the main link to the remote Weblog so that instead of navigating to that Weblog it shows and hides the nested ul. Figure . The blogroll showing retrieved items for the first blog. 300 Licensed to siowchen@ Building the Scripts Once all this has happened clicking a link to a Weblog should not take you there instead it will show the retrieved items as in Figure . Building the Scripts Like most good DOM page scripting enhancements there isn t anything revolutionary here in fact it s all glued together from bits of scripts that we ve used before. It s a familiar process start up on page load walk through the DOM of the page to find particular elements load some content from a URL and parse it into an XML DOM manipulate the DOM of the page to add new content later on show and hide an element on click. Here s the library object s signature File excerpt var rR init function . loadRssData function rssURL liTag aTag . showAndHide function e . addEvent function elm evType fn useCapture . window load false We have three methods to create init to complete initialization loadRssData to pull in the feed content via Sarissa and showAndHide to expand and collapse the blogroll. Firstly here s the init method File excerpt init function if Sarissa return Find all a elements with an rss attribute that are inside ul elements with id blogs var blogs blogs var as a for var i 0 i i var rssURL as i .getAttribute rss if rssURL rssURL as i .parentNode as i 301 Licensed to siowchen@ Chapter 10 DOM Alternatives XPath All this does is scan through the content and load matching RSS feeds wherever one is specified. Here s that loadRSSData method with the XPath .