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 deliveringtechnical documents to an essential part of daily life, making and breaking relationshipsand fortunes along the way. “Looking something up on the Internet,”by which is almost always meant the Web, is now within reach of almost anyoneliving in a first-world country, and the idea of conducting conversations andbusiness (and probably orchestras) in your Web browser is no longer foreign, butpart of life....
Nội dung trích xuất từ tài liệu:
DHTML Utopia Modern Web Design Using JavaScript & DOM- P17 Chapter 10: DOM Alternatives: XPath ... 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 10.2. The blogroll, showing retrieved items for the first blog. 300Licensed to siowchen@darke.biz 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 10.2. Building the Scripts Like most good DOM page scripting enhancements, there isn’t anything revolu- tionary 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: read-rss.js (excerpt) var rR = { init: function() { ... }, loadRssData: function(rssURL, liTag, aTag) { ... }, showAndHide: function(e) { ... }, addEvent: function(elm, evType, fn, useCapture) { ... } } rR.addEvent(window, load, rR.init, 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: read-rss.js (excerpt) init: function() { if (!document.getElementById || !document.createElement || !document.getElementsByTagName || !Sarissa) return; // Find all elements with an rss attribute that are // inside elements with id blogs var blogs = document.getElementById(blogs); var as = blogs.getElementsByTagName(a); for (var i = 0; i < as.length; i++) { var rssURL = as[i].getAttribute(rss); if (rssURL) { rR.loadRssData(rssURL, as[i].parentNode, as[i]); } } }, 301Licensed to siowchen@darke.biz 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 processing shown in bold: File: read-rss.js (excerpt) loadRssData: function(rssURL, liTag, aTag) { // Asynchronously request the data from the appropriate RSS // file, and insert it into the document var xmlhttp = new XMLHttpRequest(); xmlhttp.open(GET, rssURL, true); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4) { var dom = Sarissa.getDomDocument(); dom.loadXML(xmlhttp.responseText); dom.setProperty(SelectionLanguage, XPath); dom.setProperty(SelectionNamespaces, xmlns:xhtml=http://www.w3.org/1999/xhtml); Sarissa.setXpathNamespaces(dom, xmlns:my=http://purl.org/rss/1.0/ + xmlns:rdf=http://www.w3.org/1999/02/22-rdf-syntax-ns# ); var items = dom.documentElement.selectNodes(/rdf:RDF/my:item); if (items.length > 0) { var ul = document.createElement(ul); for (var j = 0; j < items.length && j < 5; j++) { var i = items[j]; var li, a, p, tn, dn; // new elements var title, desc; // existing elements li = document.createElement(li); a = document.createElement(a); p = document.createElement(p); a.href = i.selec ...