锁定老帖子 主题:用javascript来充实文档的内容
精华帖 (14) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2008-03-06
最后修改:2008-12-04
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Image</title> <style rel="stylesheet" type="text/css"> <!-- body{ background:#666; margin:0 0 0 20px; padding:0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#fff; } a:link,a:hover,a:visited,a:active{ color:#ffffff; font-size:10px; } --> </style> <script language="javascript" type="text/javascript"> function addLoadEvent(func){ var oldonload = window.onload; if (typeof window.onload != 'function'){ window.onload = func; } else { window.onload = function(){ oldonload(); func(); } } } function displayAbbreviations(){ if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false; var abbreviations = document.getElementsByTagName("abbr"); if (abbreviations.length < 1) return false; var defs = new Array(); for (var i=0;i<abbreviations.length;i++){ var current_abbr = abbreviations[i]; if (current_abbr.childNodes.length<1) continue; var definition = current_abbr.getAttribute("title"); var key = current_abbr.lastChild.nodeValue; defs[key] = definition; } var dlist = document.createElement("dl"); for (key in defs){ var definition = defs[key]; var dtitle = document.createElement("dt"); var dtitle_text = document.createTextNode(key); dtitle.appendChild(dtitle_text); var ddesc = document.createElement("dd"); var ddesc_text = document.createTextNode(definition); ddesc.appendChild(ddesc_text); dlist.appendChild(dtitle); dlist.appendChild(ddesc); } if (dlist.childNodes.length<1) return false; var header = document.createElement("h2"); var header_text = document.createTextNode("Abbreviations"); header.appendChild(header_text); document.body.appendChild(header); document.body.appendChild(dlist); } function displayCitations(){ if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false; var quotes = document.getElementsByTagName("blockquote"); for (var i=0;i<quotes.length;i++){ if(!quotes[i].getAttribute("cite")) continue; var url = quotes[i].getAttribute("cite"); var quoteChildren = quotes[i].getElementsByTagName('*'); if (quoteChildren.length < 1) continue; var elem = quoteChildren[quoteChildren.length - 1]; var link = document.createElement("a"); var link_text = document.createTextNode("source"); link.appendChild(link_text); link.setAttribute("href",url); var superscript = document.createElement("sup"); superscript.appendChild(link); elem.appendChild(superscript); } } function displayAccesskeys(){ if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false; var links = document.getElementsByTagName("a"); var akeys = new Array(); for (var i=0;i<links.length;i++){ var current_link = links[i]; if(!current_link.getAttribute("accesskey")) continue; var key = current_link.getAttribute("accesskey"); var text = current_link.lastChild.nodeValue; akeys[key] = text; } var list = document.createElement("ul"); for (key in akeys){ var text = akeys[key]; var str = key + ": "+text; var item = document.createElement("li"); var item_text = document.createTextNode(str); item.appendChild(item_text); list.appendChild(item); } var header = document.createElement("h3"); var header_text = document.createTextNode("Accesskeys"); header.appendChild(header_text); document.body.appendChild(header); document.body.appendChild(list); } addLoadEvent(displayAbbreviations); addLoadEvent(displayCitations); addLoadEvent(displayAccesskeys); </script> </head> <body> <ul id="navigation"> <li><a href="index.html" accesskey="1">Home</a></li> <li><a href="search.html" accesskey="4">Search</a></li> <li><a href="contact.html" accesskey="9">Contact</a></li> </ul> <h1>What is the Document Object Model?</h1> <p>The <abbr title="World Wide Web Consortium">W3C</abbr> defines the <abbr title="Document Object Model">DOM</abbr> as:</p> <blockquote cite="http://www.w3.org/DOM/"> <p>A plateform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content,structure and style of documents. </p> </blockquote> <p>It is an <abbr title="Application Programming Interface">API</abbr> that can be used to navigate <abbr title="extensible Markup Language">XML</abbr> documents.</p> </body> </html> 一:addLoadEvent()函数非常实用,尤其是在代码变得复杂的时候。无论在页面加载完成时执行多少个函数,都只要多写一条语句就可以了。 addLoadEvent()函数的思路主要分3步: 1.把现有的window.onload事件处理函数的值存入变量oldonload。 2.如果在这个处理函数上还没有绑定任何函数,就像平时那样把新函数添加给它。 3.如果在这个处理函数上已经绑定了一些函数,就把新函数追加到现有指令的末尾。
二:在displayAbbreviations();displayCitations();displayAccesskeys()这三个函数的开头部分,我都安排了一些测试,测试下面我用到的getElementsByTagName();createElement();createTextNode()方法,以确保浏览器能够正确理解我在这些函数里用到的DOM方法。用下面这个语句就能检测: if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false; 或者写成: if (!document.getElementsByTagName) return false; if (!document.createElement) return false; if (!document.createTextNode) return false; 这两种写法没有本质区别,你可以根据自己的个人习惯加以选择。
虽然绝大多数浏览器都能或多或少地支持javascript,而且对DOM的支持都非常不错。但比较古老的浏览器确很可能无法理解DOM提供的方法和属性。虽然只是条简单的if语句,但它可以确保那些古老的浏览器不会因为我写的脚本代码而出错。
三:因为IE浏览器在统计abbr元素的子节点个数时总会“正确地”返回一个错误的值:0,所以 if (current_abbr.childNodes.length<1) continue; 这条语句会让IE浏览器不再继续执行这个循环中的后续代码。这条语句的含义是:“如果当前元素没有子节点,就立刻开始下一次循环。”
四:巧妙的用for循环。 for循环的独特之处是,它可以把某个数组的下标临时地付给一个变量。 比如:for(variable in array) 在for循环进入第一次循环时,变量variable将被赋值为数组array的第一个元素的下标值;在进入第二次循环时,变量variable将被赋值为数组array的第二个元素的下标值;依次类推...直到遍历完数组array里的所有元素位置。 在上面的例子displayAbbreviations()函数里:在第一次循环时,变量key的值是“W3C”,变量definition的值是“World Wide Web Consortium”;在第二次循环是,变量key的值是“DOM”,变量definition的值是“Document Object Model”;...。 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
浏览 1966 次