【javascript】充实文档的内容

一、显示缩略语
缩略语(<abbr>标签)的title属性在浏览器中是隐藏的,我们可以通过JS来动态加载并显示缩略语
希望得到的定义列表:

<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>

【编写displayAbbreviations函数】
首先找出所有的abbr元素:使用getElementByTagName方法,它返回一个数组,保存在变量abbreviations中。

var abbreviations = document.getElementsByTagName("abbr");

开始遍历数组:(1)首先检查文档是否有缩略词,没有就结束函数。(2)使用数组defs将每个bbr元素提供的信息保存起来,即<abbr>标签中的文本及其title属性。(3)为了得到缩略语中的解释词语,使用getAttribute方法得到title的属性值,并把它保存在变量definition中。(4)为得到缩略语文本,使用nodeValue属性,这个文本节点是<abbr>的最后一个节点,使用lastChild属性。

if (abbreviations.length < 1) return false;
var defs = new Array();
//遍历缩略词
for (var i=0;i<abbreviations.length;i++){
	var current_abbr = abbreviations[i]
	var definition = current_abbr.getAttribute("title");
	var key = current_abbr.lastChild.nodeValue;
    defs[key] = definition;
}

创建标记:(1)使用createElement方法创建定义列表,并把该元素存在变量dlist中。(2)遍历数组defs,每次循环要创建一个dt和dd元素,还需要创建文本节点并把它们分别添加到dt和dd元素,最后把新创建的dt和dd元素追加到dl元素上。

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);
}

插入定义列表:(1)先给这个定义列表一个标题,先创建一个h2,再创建一个文本节点并添加到h2上。(2)将缩略列表标题和缩略列表插入到body中。
【引用<body>标签的方法】
DOM Core:即引用给定文档的第一个body标签,document.getElementByTagName(“body”)[0]
HTML-DOM:即给定文档的属性,document.body

var header = document.createElement("h2");
var header_text = document.createTextNode("Abbreviations");
header.appendChild(header_text);
//把标题添加到页面主体
document.body.appendChild(header);
//把定义列表添加到页面主体
document.body.appendChild(dlist);

由于IE浏览器知道IE7才支持<abbr>元素,因此displayAbbreviations函数在早期浏览器无法使用。
【可供解决办法】

  • 把abbr元素统一替换成acronym元素。不提倡。
  • 在元素中使用html命名空间(<html:abbr>abbt</html:abbr>),这样IE就可以认出这些元素。但这个方法涉及到修改标记,如果在其他文档中使用该函数,问题依然无法解决。
  • 保证该函数在IE中平稳退化。

这里,第三种方式:
1.在负责从abbr元素中提取title属性值和文本值的for循环中添加一条语句。如果当当前元素没有子节点就开始下一次循环。

if (current_abbr.childNodes.length < 1) continue;

2.在负责创建缩略语列表的for循环中添加一条语句。如果dl元素没有子节点,就立刻退出该函数。

if (dlist.childNodes.length < 1) return false;

displayAbbreviations函数完整代码:

function displayAbbreviations(){
	if (!document.getElementsByTagName) return false;
	if(!document.createElement) return false;
	if(!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_abbr = abbreviations[i]
        //
        if (current_abbr.childNodes.length < 1) continue;
        var definition = current_abbr.getAttribute("title");
        var key = current_abbr.lastChild.nodeValue;
        defs[key] = definition;
	}
	//创建定义列表
	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);
	}
	//
	if (dlist.childNodes.length < 1) return false;
	//创建标题
	var header = document.createElement("h2");
	var header_text = document.createTextNode("Abbreviations");
    header.appendChild(header_text);
	//把标题添加到页面主体
    document.body.appendChild(header);
	//把定义列表添加到页面主体
    document.body.appendChild(dlist);
}

二、显示文献来源链接表
blockquote元素包含一个cite属性,用来标明出处,即文章的url地址。这里,通过JS将地址动态地加载到引用段落的最后位置。
【编写displayCitations函数】
首先,找出文档中所有blockquote元素,通过getElementByTagName,它返回一个数组,保存在变量quotes中。

var quotes = document.getElementsByTagName("blockquote");

遍历数组quotes,(1)首先测试本段落是否有cite属性,使用getAttribute方法,如果没有改属性,就跳到下一次循环。(2)获取当前blockquote元素的cite属性值并存入变量url。

if (!quotes[i].getAttribute("cite")) continue;
var url = quotes[i].getAttribute("cite");

决定文献来源链接存放位置,一个blockquote元素必定包含块级元素,以容纳大量文本。我们想要放在该元素所包含的最后一个元素节点之后。

var quoteChildren = quotes[i].getElementsByTagName("*");
if (quoteChildren.length < 1) continue;
var elem = quoteChildren[quoteChildren.length-1];

创建链接,用createElement方法创建一个a标签,并创建一个文本标签加载a标签上。然后把href属性添加给新链接。

var link = document.createElement("a");
var link_text = document.createTextNode("source");
link.appendChild(link_text);
link.setAttribute("href",url);

插入链接,使用元素sup包装该链接,使它在浏览器中呈现出上标的效果。首先,创建sup元素节点,并存入变量superscript中,再将新链接放入sup元素。最后将其插入到blockquote元素包含的的最后一个元素节点,即elem变量中。

var susperscript = document.createElement("sup");
susperscript.appendChild(link);
elem.appendChild(susperscript);

三、快捷显示清单
accesskey属性可以把一个元素与键盘的某个特定按键联系起来。
一些约定俗成的快捷键设置:

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

利用DOM技术,可以动态地创建一份快捷键清单。

function displayAccessKeys(){
	if (!document.getElementsByTagName) return false;
	if(!document.createElement) return false;
	if(!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];
        //如果没有accesskey属性,继续循环
        if(!current_link.getAttribute("accesskey")) continue;
        //取得accesskey的值
        var key = current_link.getAttribute("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);

四、检索和添加信息
在需要对文档里的信息进行检索时,以下DOM方法最有用:

  • getElementById
  • getElementsByTagName
  • getAttribute

在需要把信息添加到文档里去时,以下DOM方法最有用:

  • createElement
  • createTextNode
  • appendChild
  • insertBefore
  • setAttribute

以上DOM方法组合可以让我们编写出功能非常强大的DOM脚本来。
注意:javascript脚本只应该用于充实文档的内容,要避免用DOM技术来创建核心内容。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值