JavaScript第八章：显示缩略语部分

  这一节我们主要是要用一个定义列表来显示<abbr>标签包含的文本和属性。

  下面是我们想要的效果：

<dl>
   <dt>W3C</dt>
   <dd>World Wide Web Consortium</dd>
   <dt>DOM</dt>
   <dd>Document Object Model</dd>
   <dt>API</dt>
   <dd>Application Programing Interface</dd>
   <dt>HTML</dt>
   <dd>HyperText Markup Language</dd>
   <dt>XML</dt>
   <dd>eXtensible Markup Language</dd>
</dl>

1.编写displayAbbreviation函数

   var abbreviation=document.getElementsByTagName("abbr");
   if(abbreviation.length<1) return false;
   var defs=new Array();//defs数组是用来存储信息的介质
   for(var i=0;i<abbreviation.length;i++){
     var current_abbr=abbreviation[i]
     var definition=current_abbr.getAttribute("title");//获取abbr的title属性值
     var key=current_abbr.lastChild.nodeValue;//获取abbr的文本节点值
     defs[key]=definition;
   }
     

2.创建标记

var dlist=document.createElement("dl");  
for(key in defs){
    var definition=defs[key];
    var dtitle=document.createElement("dt");
    var dtitle_text=document.createTextNode(key);//dt：文本节点值
    dtitle.appendChild(dtitle_text);
    var ddesc=document.createElement("dd");
    var ddesc_text=document.createTextNode(definition);//dd：title属性值
    ddesc.appendChild(ddesc_text);
    dlist.appendChild(dtitle);
    dlist.appendChild(ddesc);
}

var header=document.createElement("h2");
var header_text=document.createTextNode("Abbreviation");
header.appendChild(header_text);
document.body.append(header);
document.body.append(dlist);

 除此之外，还需要检查兼容性。因此最终的代码为：

   function displayAbbreviation(){
   if(!document.getElementsByTagName||(!document.createElement)||
    (!document.createTextNode))
         return false;
   var abbreviation=document.getElementsByTagName("abbr");
   if(abbreviation.length<1) return false;
   var defs=new Array();//defs数组是用来存储信息的介质
   for(var i=0;i<abbreviation.length;i++){
     var current_abbr=abbreviation[i]
     var definition=current_abbr.getAttribute("title");//获取abbr的title属性值
     var key=current_abbr.lastChild.nodeValue;//获取abbr的文本节点值
     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);//dt：文本节点值
    dtitle.appendChild(dtitle_text);
    var ddesc=document.createElement("dd");
    var ddesc_text=document.createTextNode(definition);//dd：title属性值
    ddesc.appendChild(ddesc_text);
    dlist.appendChild(dtitle);
    dlist.appendChild(ddesc);
}

var header=document.createElement("h2");
var header_text=document.createTextNode("Abbreviation");
header.appendChild(header_text);
document.body.append(header);
document.body.append(dlist);
}

function addLoadEvent(func){
   var oldonload=window.onload;
   if(typeof window.onload!='function'){
      window.onload=func;
   }
  else{
     oldonload();
     func();
  }
}

addLoadEvent(displayAbbreviation);

3.一个浏览器"地雷"

      微软的IE浏览器直到IE7才支持abbr元素。displayAbbreviation函数在早期的版本失败。因此，我们要保证displayAbbreviation函数在IE中能够平稳退化。

    ①在从abbr元素提取title属性值和文本值的for循环中添加一条语句：

 for(var i=0;i<abbreviation.length;i++){
    var current_abbr=abbreviation[i];
    if(current_abbr.childNodes.length<1) continue;
   //如果当前节点没有子节点，就立刻开始下一次循环
     var definition=current_abbr.getAttribute("title");
     var key=current_abbr.childNode.nodeValue;
     defs[key]=definition;
 }

       ②我们还需在for循环后面添加：如果对应的缩略语列表的dl元素没有子节点，则立刻退出displayAbbreviation函数：

 var dlist=document.createElemnt("dl");
 for(key in defs){
   var definition=defs[key];
   var dtitle=document.createElement("dt");
   var dtitle_text=docuemnt.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;

      通过这次改动，让我们深刻地体会到标准的重要性。