Vue学习记录-显示“缩略语列表”

2020年6月11日

  
  
  
  


  
What is the Document Object Model?
  

    The W3C defines the DOM as:
  
  

    

      A platform- and language-neutral interface that will allow programs
      and scripts to dynamically access and update the content, structure and style of documents.
    
  
  

    It is an API 
    that can be used to navigate 
    HTML and XML documents.  
  
  
  
 

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Consolas";
  font-size: 10pt;
}

abbr {
  text-decoration: none;
  border: 0;
  font-style: normal;
}

function addLoadEvent(func){  //onload事件绑定函数
  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 definition = abbreviations[i].getAttribute("title");
    var key = abbreviations[i].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);
  }
  var header = document.createElement("h2");
  var header_text = document.createTextNode("Abbreviations");
  header.appendChild(header_text);
  document.body.appendChild(header);
  document.body.appendChild(dlist);
}

addLoadEvent(displayAbbreviations);