【DOM编程艺术】显示"缩略语列表"
<script> alert(typeof displayAbbreviations); //undefined var displayAbbreviations=function(){ //若是function displayAbbreviations() 上面则会弹出function var abbr=document.getElementsByTagName('abbr'); var dl=document.createElement('dl'); for(var i=0;i<abbr.length;i++){ var dt=document.createElement('dt'); var dttxt=document.createTextNode(abbr[i].firstChild.nodeValue); dt.appendChild(dttxt); dl.appendChild(dt); var dd=document.createElement('dd'); var ddtxt=document.createTextNode(abbr[i].getAttribute('title')); dd.appendChild(ddtxt); dl.appendChild(dd); } document.getElementsByTagName('body')[0].appendChild(dl); } </script>
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>explaining</title> </head> <body> <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 platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content,structure the style of document.</P> </blockquote> <p> It is an <abbr title='Application Programming Interface'>API</abbr> that can be used to navigate <abbr title='HyperText Markup Language'>HTML</abbr> and <abbr title="eXtensible Markup Language">XML</abbr> documents. </p> <script> addLoadEvent(displayAbbreviations); function displayAbbreviations(){ if( !document.getElementsByTagName) return false; //不能加（）,加括号相当于执行了 if( !document.createElement) return false; if( !document.createTextNode) return false; var abbr=document.getElementsByTagName('abbr'); var dllist=document.createElement('dl'); var defs=new Array(); if( abbr.length<1 ) return false; /*取得所有缩略词*/ for(var i=0;i<abbr.length;i++){ var current_abbr=abbr[i]; var definition=current_abbr.getAttribute('title'); if(current_abbr.childNodes.length <1) return false; //专门为ie6加的（ie下不成为abbr为元素节点，length始终会返回0） 是因为那场浏览器大战微软打败了网景，但微软的IE浏览器知道IE7才支持abbr元素。 var key=current_abbr.firstChild.nodeValue; defs[key]=definition; } /*遍历这些缩略词*/ for(key in defs){ //因为defs数组是空的，所以它将不会创建出任何dt和dd元素。 var definition=defs[key]; var dtitle=document.createElement('dt'); var dtitle_text=document.createTextNode(key); dtitle.appendChild(dtitle_text); dllist.appendChild(dtitle_text); var ddesc=document.createElement('dd'); var ddesc_text=document.createTextNode(definition); ddesc.appendChild(ddesc_text); dllist.appendChild(ddesc); }
if(dllist.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(dllist); } function addLoadEvent(func){ var oldEvent = window.onload; if( typeof window.onload != 'function'){ window.onload=func; }else{ window.onload=function(){ oldEvent(); func(); } } } </script> </body> </html>
注意：即使某种特定的浏览器会引起问题，也没有必要使用浏览器嗅探代码。对浏览器的名称和版本号进行嗅探的办法很难做到面面俱到，而且往往会导致非常复杂难解的代码。
在此我们深刻地体会到标准的重要性，仅仅因为IE浏览器不支持abbr元素，就使得一大批用户没有机会看到一个自动生成的“缩略语列表”，这个事实让我感到很遗憾。如果
它真的必不可少，从一开始就应该把它包括在标记里。
