充实文档的内容

最新推荐文章于 2019-06-26 15:33:05 发布

原创最新推荐文章于 2019-06-26 15:33:05 发布 · 285 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dom

DOM 专栏收录该内容

5 篇文章

订阅专栏

内容
选用HTML、XHTML还是HTML5
对于标记而言，选用HTML还是XHTML是你的自由，重要是不管选用哪种文档类型，使用的标记必须与你选用的DOCTYPE声明保持一致。一般XHTML规则对允许使用的标记有着更严格的要求，例如标签属性必须使用小写字母，所有标签必须闭合，但是HTML就没有这么严格了。
若要使用XHTML DOCTYPE，应将下列内容写在文档开头：

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

若使用HTML5的文档类型说明，则非常简单：

<!DOCTYPE html>

一.显示“缩略语列表”
标签：缩略语，是对单词或短语的简写形式的统称。
标签：首字母缩写词。
缩略语（标签）的title属性在浏览器中是隐藏的，当把鼠标指针悬停在缩略语上时，就会弹出title属性的提示消息。
例如，要得到如下一个定义列表来显示这些标签包含的文本和title属性：

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

使用DOM创建这个定义列表的具体步骤如下：
（1）遍历这份文档中的所有abbr元素。
（2）保存每个abbr元素的 title属性。
（3）保存每个abbr元素包含的文本。
（4）创建一个“定义列表”元素（即dl元素）。
（5）遍历刚才保存的title属性和abbr元素的文本。
（6）创建一个“定义标题”元素（即dt元素）。
（7）把abbr元素的文本插入到这个dt元素。
（8）创建一个“定义描述”元素（即dd元素）。
（9）把title属性插入到这个dd元素。
（10）把dt元素追加到第4步创建的dl元素上。
（11）把dd元素追加到第4步创建的dl元素上。
（12）把dl元素追加到explanation.html文档的body元素上。
1.编写displayAbbreviations函数
第一步，定义这个函数。找出这个文档中所有的abbr元素，并把节点集合数组保存到变量abbreviations里。

function displayAbbreviations(){
    var abbreviations=document.getElementsByTagName("abbr");
    if(abbreviations.length<1) return false; //若数组长度小于1，说明没有缩略语，返回false
}

接下来就是获取并保存每个abbr元素的信息，包括文本及其title的属性，用一个defs的新数组来存储：

    var defs=new Array();  //定义一个defs新数组
    for(var i=0;i<abbreviations.length;i++){   //遍历abbreviations数组
        var definition=abbreviations[i].getAttribute("title"); //将title属性的值保存到变量definition里
        var key=abbreviations[i].lastChild.nodeValue;  //将文本节点nodeValue属性赋给变量key
        defs[key]=definition; //key和definition的值就是要保存在defs数组中的内容，将key作为下标，将definition作为数组元素的值，例如下标为W3C的数组元素值为World Wide Web Consortium

2.创建标记
定义列表是表现缩略语及其解释的理想结构，定义列表

由一系列定义标题和相应定义描述

构成。

<dl>
  <dt>Title 1</dt>
  <dd>Description 1</dd>

先用createElement方法创建这个定义列表，并把这个新建元素赋值给变量dlist；

var dlist=document.createElement("dl");

下面要编写一个循环，对刚刚创建的defs数组进行遍历：

    for(key in defs){     //变量key的值是当前正在处理的数组元素defs的键，由此得到相应数组元素的值
        var definition=defs[key];  //第一次循环时，key的值为W3C，definition值为World wide web consortium
        var dtitle=document.createElement("dt"); //创建一个定义标题的dt元素
        var dtitle_text=document.createTextNode(key); //然后用变量key的值去创建一个文本节点
        dtitle.appendChild(dtitle_text); //将文本节点添加到元素节点
        var ddesc=document.createElement("dd"); //创建一个定义描述的dd元素
        var ddesc_text=document.createTextNode(definition); //用变量definition的值创建一个文本节点
        ddesc.appendChild(ddesc_text); //将文本节点添加到元素节点
        dlist.appendChild(dtitle); //将dt和dd元素追加到dl元素上
        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);  //再插入缩略语表本身

检查兼容性
在函数开头部分，应该增加一些检查以确保浏览器能够理解这个函数里的DOM方法：

if(!document.getElementsByTagName) return false;
    if(!document.createElement) return false;
    if(!document.createTextNode) return false;

这个函数应该在页面加载时被调用，可以用window.onload事件来做到这一点，但是为了日后能将多个事件添加到window.onload处理函数上，可使用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文件里：

addLoadEvent(displayAbbreviations);

现在,JS脚本文件准备好了，接下来为了调用这两个脚本，我们要在html文件的部分添加

<script src="scripts/addLoadEvent.js"></script>
<script src="scripts/displayAbbreviations.js"></script>

现在带有缩略语的html文件加载到Web浏览器里就可以看到定义列表了。

二.显示“文献来源链接表”
blockquote元素是一个引用元素，它有一个属性cite，值是URL地址，这是一种把文献资料与相关网页链接起来的好办法。我们可以将此信息收集起来显示在网页上。
按照以下步骤就能将文献以链接形式显示出来：
（1）遍历这个文档里所有blockquote元素。
（2）从blockquote元素提取出cite属性的值。
（3）创建一个标识文本是source的链接。
（4）把这个链接赋值为blockquote元素的cite属性值。
（5）把这个链接插入到文献节选的末尾。
1.编写displayCitations函数
定义这个函数，找出所有的blockquote元素：

function displayCitations(){
    if(!document.getElementsByTagName || !document.createElement 
    || !document.createTextNode) return false;   //增加测试
    var quotes=document.getElementsByTagName("blockquote");
}

接下来遍历这个集合：

for (var i=0;i<quotes.length;i++) {
        if(!quotes[i].getAttribute("cite")) continue; //测试节点集合quotes中的当前元素是否有cite属性
        var url=quotes[i].getAttribute("cite");  //将当前元素cite属性值存入变量url
        //下一步确定要将文献来源链接放到何处
        var quoteChildren=quotes[i].getElementsByTagName("*"); //找当前blockquote元素的所有节点
        if (quoteChildren.length<1) continue;  //如果没有元素节点，继续循环
        var elem=quoteChildren[quoteChildren.length-1]; //找所有节点的最后一个元素节点，则为要插入的位置
        //创建链接
        var link=document.createElement("a"); //创建一个链接元素
        var link_text=document.createTextNode("source"); //创建一个内容为source的文本节点
        link.appendChild(link_text); //把新的文本节点插入新链接
        link.setAttribute("href",url); //把href属性添加给新链接
        var superscript=document.createElement("sup"); //创建一个sup上标元素并把它存入变量
        superscript.appendChild(link); //把新链接放入这个sup元素
        elem.appendChild(superscript); //最后将标记插入文档，将变量superscript追加为elem的最后一个子节点
    }

用addLoadEvent函数调用displayCitations函数：

addLoadEvent(displayCitations);

三.显示“快捷键清单”
accesskey属性可以把一个元素（如链接）与键盘上的某个特定按键关联在一起，一般来说，在适用于windows系统的浏览器里，快捷键的用法是在键盘上同时按下Alt键和特定按键；在适用于mac系统的浏览器里，快捷键的用法是同时按下ctrl键和特定按键。
下面是accesskey属性的一个例子：

<a href="index.html" accesskey="1">Home</a>

利用DOM技术可以动态的创建一份快捷键清单，下面是步骤：
（1）把文档里的所有链接全部提取到一个节点集合里。
（2）遍历这个节点集合里的所有链接。
（3）如果某个链接带有acesskey属性，就把它的值保存起来。
（4）把这个链接在浏览器窗口里的屏显标识文字也保存起来。
（5）创建一个清单。
（6）为拥有快捷键的各个链接分别创建一个列表项。
（7）把列表项添加到“快捷键清单”里。
（8）把“快捷键清单”添加到文档里。
按以上步骤编写函数：

function displayAccesskeys(){
    if(!document.getElementsByTagName || !document.createElement ||
        !document.createTextNode) return false;   
    var links=document.getElementsByTagName("a");   //取得文档中的所有链接
    var akeys=new Array();   //创建一个数组，保存访问键
//遍历链接
    for(var i=0;i<links.length;i++){
        var current_link=links[i];
        if(!current_link.getAttribute("accesskey")) continue;  //如果没有accesskey属性，继续循环
        var key=current_link.getAttribute("accesskey");  //取得accesskey的值
        var text=current_link.lastChild.nodeValue;   //取得链接文本
        akeys[key]=text;  //添加到数组
    }
    var list=document.createElement("ul");  //创建列表
    for(key in akeys){   //遍历访问键
        var text=akeys[key];
        var str=key+": "+text;   //创建放到列表项中的字符串
        var item=document.createElement("li");  //创建列表项
        var item_text=document.createTextNode(str);
        item.appendChild(item_text);
        list.appendChild(item);把列表项添加到列表中
    }
        var header=document.createElement("h3");   //创建标题
        var header_text=document.createTextNode("Accesskeys");
        header.appendChild(header_text);
        document.body.appendChild(header);    //把标题添加到页面主体
        document.body.appendChild(list);   //把列表添加到页面主体
   }
addLoadEvent(displayAccesskeys);