关于JavaScript的学习（5）

利用DOM技术动态创建一些辅助信息：

1,将隐藏在属性里的信息检索出来

2,把这些信息动态地创建为一些HTML内容

3,把这些HTML内容插入到文档里

原始内容：
<blockquote cite="http://www.w3.org/DOM/">
   <p>
     A platform and language neutral interface
   </p>
</blockquote> 
blockquote元素包含着一个属性cite， 用来告诉人们blockquote元素的内容来自哪个URL。但浏览器会完全忽略cite属性的存在，虽然信息在那里，但是用户看不到。下面我们利用上面的三部曲，将此属性显示到文档中。

1.检索属性信息：遍历文档里的所有blockquote元素，从blockquote元素里提取cite属性的值：
                var block=document.getElementsByTagName('blockquote')
                for (i=0;i<block.length;i++)
                {
                    if (!block[i].getAttribute('cite')) continue;//如果该节点没有cite属性，将跳出本次循环，进行下一次循环
                    var current_quote=block[i];
                     var url=current_quote.getAttribute('cite'); //获取cite属性的值
                 }

2.将得到的属性动态地创建为HTML内容：上一章讲了如何动态的创建HTML内容，可以采用document.write、innerHTML、createElement等方法创建，这里，我们使用createElement方法创建：
cite作为一个引用的链接地址，那么我们创建链接标签<a>
            var link=document.createElement('a');
            var link_text=document.createTextNode('source');//将链接命名为source
            link.appendChild(link_text);
            link.setAttribute('href',url);//设置herf属性及其value

3.将创建的HTML内容插入到文档中：由于我们创建的这个HTML内容是作为一个引用的网址存在，所以我们希望将其插入到引用文字的后面，如果采用block[i].lastChild，由于</p>和</blockquote>标签之间还存在一个换行符，有些浏览器会把这个换行符解释为一个文本节点，那么，blockquote元素节点的lastChild属性将是一个文本节点，而不是那个p元素节点。而有些DOM方法只能用于元素节点，那么我们就需要把blockquote里的所有元素节点都找出来：
                                    var quoteChildren=block[i].getElementsByTagName('*');

通配符*作为参数传递给getElementsByTagName方法，它会把所有的元素返回给我们，现在quoteChildren数组包含着blockquote元素的所有元素节点，而blockquote元素的最后一个元素节点将对应着quoteChildren数组中的最后一个元素。
数组中最后一个元素的下标=数组长度-1
var elem=quoteChildren[quoteChildren.length-1]，现在变量elem对应着blockquote所包含的最后一个元素节点

var superscript=document.createElement('sup');//sup标签里的内容将会以当前文本流中字符高度的一半来显示
superscript.appendChild(link);
elem.appendChild(superscript);

函数整体：

function displayCitations() {
    var block=document.getElementsByTagName('blockquote')
    for (i=0;i<block.length;i++)
    {
        if (!block[i].getAttribute('cite')) continue;//如果该节点没有cite属性，将跳出本次循环，进行下一次循环
        var current_quote=block[i];
        var url=current_quote.getAttribute('cite'); //获取cite属性的值
        var quoteChildren=block[i].getElementsByTagName('*');
      
        if (quoteChildren.length<1) continue;
        var elem=quoteChildren[quoteChildren.length-1]//数组中的最后一个元素的下标=数组的长度-1
        var link=document.createElement('a');
        var link_text=document.createTextNode('source');//将链接命名为source
        link.appendChild(link_text);
        link.setAttribute('href',url);//设置herf属性及其value
        var superscript=document.createElement('sup');//sup标签里的内容将会以当前文本流中字符高度的一半来显示
        superscript.appendChild(link);
        elem.appendChild(superscript);


    }
}