DOM动态创建标记实例-蒲公英云

本文实例来源于《JavaScript DOM编程艺术（第二版）》第8章
知识点可参考上一篇博客《DOM动态创建标记》，地址：http://blog.csdn.net/ruirui_1996/article/details/78158925

1.实例描述
2.创建“缩略语列表”函数
3.创建“文献来源链接”函数
4.创建“快捷键清单”函数

1.实例描述

这里写图片描述
有这样一个网页，HTML代码如下：

<h1>What is the Document Object 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://www.w3.org/DOM/">
    <p>
        A plantform- and language-neutral interface that will allow programs and scripts to dynamically access and
        update the content,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>

我们可以看到这段文本包含大量的缩略语，用<abbr>标签把他们识别出来了

2.创建“缩略语列表”函数

在页面中，如果能把<abbr>标签和其中的title属性值单独提取出来，并放到一个列表里显示在页面上可能会更好，就比如下面这个效果：
这里写图片描述
那么如果要运用dom来实现上面的效果，首先可以先把预想效果的代码“准备”出来：

最上面还有一个h1标签。
接下来分析一下实现的步骤：
上一篇文章说过，用DOM来插入一个元素分为两个步骤，一是创建一个新的元素，如使用createElement，二是把这个新元素插入节点树，如使用appendChild。那么在这个实例中，情况可能稍微会复杂一点。
首先我们可以先创建一个h1标签，再用createTextNode方法为其添加文字，接着传入到页面（也可以和后面的dl标签一起传入）。
接下来创建dl标签，用getElementsByTagName方法找到代码中所有的abbr标签并用for循环来遍历，在循环中，获取abbr标签的title值（用getAttribute方法），获取到中间的文字（节点的方法），可以将这两个值保存在一个数组中，数组的下标是中间的文字，对应的值是title值。
遍历数组，每循环一个创建一个dt标签，并传入数组的下标；创建一个dd标签，传入下标对应的值，在将这些加到dl标签中。
此时整体dl标签虽然内容已经全部导入完成，但仍处于游离状态，最后将dl传入到body末尾即可（document.body表示整个body部分）。
所以综上，还是那两个步骤：创建新元素、插入到节点树。只不过在反复的运用。
创建一个函数displayAbbreviations，将上述过程实现，代码如下：

function displayAbbreviations() {
    //创建H1标签及内容
    var oH1 = document.createElement("h1");
    var h1_text = document.createTextNode("Abbreviations");
    oH1.appendChild(h1_text);
    document.body.appendChild(oH1);
    //创建dl标签及内容
    var oDl = document.createElement("dl");
    var oAbbr = document.getElementsByTagName("abbr");
    var str = [];
    for (var i = 0; i < oAbbr.length; i++) {
        var text = oAbbr[i].getAttribute("title");
        var context = oAbbr[i].lastChild.nodeValue;
        str[context] = text;
    }
    for (var key in str) {
        var oDt = document.createElement("dt");
        var oDd = document.createElement("dd");
        var oDt_text = document.createTextNode(key);
        var oDd_text = document.createTextNode(str[key]);
        oDt.appendChild(oDt_text);
        oDd.appendChild(oDd_text);
        oDl.appendChild(oDt);
        oDl.appendChild(oDd);
    }
    document.body.appendChild(oDl);
}

在书中，对这个函数进行了一些兼容性的改进：

首先检查函数中运用的DOM方法浏览器是否支持
创建一个window.onoad事件来执行函数
由于低版本的IE不能识别abbr标签，所以需保证displayAbbreviations函数能够平稳退化

实现第一点：在函数中加：

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

window.onoad事件：

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

实现第三点：

在获取title和文本值前面加：if(oAbbr[i].Childnode<1) continue;
此时将不会生成任何一个dt和dl标签，所以在函数最后加：if (oDl.childNodes.length < 1) return false;

3.创建“文献来源链接”函数

在HTML代码中，我们可以看到这样几句：

<blockquote cite="http://www.w3.org/DOM/">
    <p>
        A plantf......ents.
    </p>
</blockquote>

blockquote标签中的cite属性后面的网址告诉了我们该段文字的出处，但是在页面中浏览器无法显示出来，所以我们可以运用DOM来将其显示在页面上。
最终效果如图：
这里写图片描述
代码如下：

function displayCitations() {
    var oBlock = document.getElementsByTagName("blockquote");
    for (var i = 0; i < oBlock.length; i++) {
        var newBlock = oBlock[i];
        var url = newBlock.getAttribute("cite");
        var oP = newBlock.getElementsByTagName("*");
        var _oP = oP[oP.length - 1];
    }
    var oA = document.createElement("a");
    var a_text = document.createTextNode("sourse");
    oA.appendChild(a_text);
    oA.setAttribute("href", url);
    _oP.appendChild(oA);
}

改进同上

4.创建“快捷键清单”函数

accesskey属性可以把一个元素（如链接）与键盘上的某个特定按键关联在一起，一些基本的快捷键都有约定俗成的设置办法，如：

accesskey=”1”对应着一个“返回到本网站主页”的链接
accesskey=”2”对应着一个“后退到前一页面”的链接
accesskey=”4”对应着一个“打开本网站的搜索表单/页面”的链接
accesskey=”9”对应着一个“本网站联系办法”的链接
accesskey=”0”对应着一个“查看本网站的快捷清单”的链接

如把网站导航加入到页面，可在HTML中加入以下代码：

<ul>
    <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">Content</a></li>
</ul>