一、显示缩略语
缩略语(<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技术来创建核心内容。