风清扬

导航

H5-JavaScript（五） 充实文档的内容 JavaScript&Dom - DOM艺术2nd Chapter8

一、自己做自己的事情

web 页面的主要数据结构： HTML 来呈现

web 样式：CSS

web 动态变动的内容： Javascript

理论上 JavaScript 可以对一个空的web 页面，动态生成所有 Html 标签和样式，但是我们不应该样做

牢记两个原则：

　　1、渐进增强： 个人觉得不恰当，应该叫：谁的功能谁做，且各自功能最大限度地保持独立

　　2、平稳退化： 支持低版本

二、三个例子：

　　2.1 显示缩略语列表

 HTML:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>充实文档中的内容</title>
 6     <link rel="stylesheet" href="styles/typography.css">
 7 </head>
 8 <body>
 9     <h1>What is the Document Object Model?</h1>
10     <p>
11         The <abbr title="World wide Web Consortium">W3C</abbr> defines the <abbr title="Document Object Model">DOM</abbr>
12     </p>
13     <blockquote cite="http://www.3c.org/DOM/">
14     <p>
15     A plateform and language-neutral interface that will allow programs content,structure and style of documents.
16     </p>
17     </blockquote>
18     <p>
19         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="eXtensive Markup Language">XML</abbr> documents.
20     </p>
21     <script src="js/addLoadEvent.js"></script>
22     <script src="js/displayAbbreviation.js"></script>
23 </body>
24 </html>

 CSS:

1 body {
2     font-family: "Helvetica","Arial",sans-serif;
3     font-size: 10pt;
4 }
5 abbr {
6     text-decoration: none;
7     border: 0;
8     font-style: normal;
9 }

 

JavaScript：

 1 function displayAbbreviation() {
 2     //兼容性考虑
 3     if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) 
 4         return false;
 5 
 6     //1.得到所有缩略词 text & title 属性
 7     var abbrNodes = document.getElementsByTagName("abbr");
 8     if (abbrNodes.length < 1) return false;
 9     var abbrs = new Array();
10     for (var i = 0; i < abbrNodes.length; i++) {
11         var definition = abbrNodes[i].getAttribute("title");
12         var key = abbrNodes[i].firstChild.nodeValue;
13         abbrs[key] = definition;
14     }
15     //2.创建自定义列表，文档中加入自定义列表
16     var dlist = document.createElement("dl");
17     for (key in abbrs) {
18         var definition = abbrs[key];
19         //创建dt
20         var dt = document.createElement("dt");
21         var dt_text = document.createTextNode(key);
22         dt.appendChild(dt_text);
23         //创建dd
24         var dd = document.createElement("dd");
25         var dd_text = document.createTextNode(definition);
26         dd.appendChild(dd_text);
27         //加入dl中
28         dlist.appendChild(dt);
29         dlist.appendChild(dd);
30     }
31     var caption = document.createElement("h1");
32     var caption_text = document.createTextNode("Abbreviation");
33     caption.appendChild(caption_text);
34 
35     document.body.appendChild(caption);
36     document.body.appendChild(dlist);
37 
38 }
39 addLoadEvent(displayAbbreviation); //之前文档中已经写过，次数不赘述

 效果图：

 　　2.2显示文献来源

 1 function displayCitations() {
 2     var quotes = document.getElementsByTagName("blockquote");
 3     //遍历所有blockquote
 4     for (var i = 0; i < quotes.length; i++) {
 5         if (!quotes[i].getAttribute("cite")) continue;
 6         var url = quotes[i].getAttribute("cite");
 7         //找到blockquote 中的最后一段
 8         var quoteChildren = quotes[i].getElementsByTagName("*");
 9         if(quoteChildren.length<1) continue;
10         var elem = quoteChildren[quoteChildren.length-1];
11         //创建标记
12         var link = document.createElement("a");
13         link.setAttribute("href",url);
14         var link_text = document.createTextNode("source");
15         link.appendChild(link_text);
16 
17         var superscript = document.createElement("sup");
18         superscript.appendChild(link);
19         //注入html 中
20         elem.appendChild(superscript);
21     }
22 }
23 addLoadEvent(displayCitations);

 

 效果图

 　　2.3显示快捷键清单

HTML: 加入了一个ul

JavaScript：

 1 function displayAccesskeys() {
 2     //健壮性
 3     if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) 
 4         return false;
 5     //获取导航栏的所有内容
 6     var links = document.getElementsByTagName("a");
 7     var akeys = new Array();
 8     for (var i = 0; i < links.length; i++) {
 9         var current_link = links[i];
10         if (!current_link.getAttribute("accesskey")) continue;
11         key = current_link.getAttribute("accesskey");
12         akeys[key] = current_link.lastChild.nodeValue;
13     }
14     //定义一个ul
15     var ul = document.createElement("ul");
16     for (key in akeys) {
17         var li = document.createElement("li");
18         var text = document.createTextNode(key + ": " + akeys[key]);
19         li.appendChild(text);
20         ul.appendChild(li);
21     }
22     //注入html
23     var body = document.getElementsByTagName("body")[0];
24     var caption = document.createElement("h1");
25     var text = document.createTextNode("AccessKeys");
26     caption.appendChild(text);
27     body.appendChild(caption);
28     body.appendChild(ul);
29 }
30 addLoadEvent(displayAccesskeys);

 效果图：

三、总结

　 三个例子雷同点：

　　1、代码扩展性

　　2、找页面中的元素保存有用信息

　　3、新建节点： 3.1 靠效果图得出  3.2 利用2 中的信息建立Element TextNode  3.3 关联关系建立

　　4、HTML中注入 新建的节点

四、补充

 

 

posted on 2017-09-25 19:05  卜戈的博客  阅读(149)  评论(0)    收藏  举报