《JavaScript DOM编程艺术》实例——文档里的缩略表、生成文献来源链接、创建快捷清单

最新推荐文章于 2020-12-22 14:14:16 发布

Cziker

最新推荐文章于 2020-12-22 14:14:16 发布

阅读量194

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/Cziker/article/details/84389336

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文通过一个实例，展示了如何使用JSDOM操作HTML文档，包括解析缩略词、展示文献引用源和显示访问键等功能，深入理解DOM模型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个实例主要是巩固上面几章学到JS DOM用法

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	body{
		font-family: "Helvetica ","Arial",sans-serif;
		font-size: 16px;
	}
	abbr{
		text-decoration: none;
		border: 0;
		font-size: normal;
	}
	</style>
</head>
<body>
 <ul id="ullist">
   <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 Objecr 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://wwww.w3.org/DOM/">
         <p>
         	A platform and language-neutral interface that will allow programs 
          and scripts to dynamicallly access and update the cpntent, 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="HyperText Markup language ">HTML</abbr> and <abbr title="eXtensible Markup Language">XML</abbr> documents.
        </p>

  <script type="text/javascript" src="js/addLoadEvent.js"></script>
  <script type="text/javascript" src="js/displayAbbreviations.js"></script>
  <script type="text/javascript" src="js/displayCitations.js"></script>
  <script type="text/javascript" src="js/showAccesskey.js"></script>
 
</body>
</html>

JS部分：
addLoadEvent.js

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

displayAbbreviations.js

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_arr = abbreviations[i];
  			if(current_arr.childNodes.length < 1) continue; 
  			//早期的IE浏览器不能识别abbr元素 会试图从abbr元素中提取属性节点和文本节点
  			var definition = current_arr.getAttribute("title");
  			var key = current_arr.lastChild.nodeValue;
  			defs[key] = definition;//用数组来保存这两个变量，defs的第一个元素的下标是W3C，值是World Wide Web Consortium
  		}
  		//创建定义列表
  		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);

displayCitations.js

function displayCitations(){
      ////简单的兼容性测试 要是不兼容 则退出这个函数
      if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) { return false;} 
      var quotes = document.getElementsByTagName("blockquote");
      //检测判断本次循环中的文献节选有没有这个cite属性，如果!quotes.getAttribute("cite")为真，说明这个节点没有cite属性，跳入到下一个循环
      for (var i = 0;i<quotes.length;i++) {
         if (!quotes[i].getAttribute("cite")) { continue;}
          var url = quotes[i].getAttribute("cite"); //把当前节点的属性存入到url变量中
          //有些浏览器会把换行符解释为一个文本节点，这样一来blockquote的lastChild不是p元素节点
          var quteElements = quotes[i].getElementsByTagName("*"); //quteElements包含quotes[i]的所有元素
          if(quteElements.length < 1) {continue;}//如果 quteElements.length的长度少于1 则退出此循环
          var elem = quteElements[quteElements.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);
  }
addLoadEvent(displayCitations);

Accesskey.js

function showAccesskey(){
  if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) {return false;}
    var  links = document.getElementsByTagName("a");
    //创建一个数组 保存访问键
    var list = new Array();
    for(var i = 0; i<links.length;i++){
     //如果没有accesskey 属性 ，继续循环
       if ( !links[i].getAttribute("accesskey")) {continue;}
       var key = links[i].getAttribute("accesskey");
       var key_text = links[i].lastChild.nodeValue;
       list[key] = key_text;
    }
    var ullist = document.createElement("ul");
    for(key in list) {
        var text = list[key];
        //创建放入到数组里的字符串
        var str = key + ":" + text;
        var liitem = document.createElement("li");
        var str_text = document.createTextNode(str);
        liitem.appendChild(str_text);
        ullist.appendChild(liitem);
     }
     var header = document.createElement("h3");
     var header_text = document.createTextNode("Accesskey");
     header.appendChild(header_text);
     document.body.appendChild(header);
     document.body.appendChild(ullist);
}
addLoadEvent(showAccesskey);