您的位置：首页 > Web前端 > JavaScript

javascript DOM编程艺术学习笔记（4）缩略语列表：

2014-04-18 13:51 916 查看

*****

缩略语列表：

主要把文本段落中的缩略词的标题名称给提取出来；

是通过DOM来生成的，假如浏览器不支持js则会不显示；

步骤：

1.遍历这份文档的所有abbr元素

2.保存每个abbr元素的title属性

3.保持每个abbr元素的文本

4.创建一个“定义列表”元素，即（dl元素）

5.遍历刚才保存title属性与abbr包含文本

6.创建“定义标题”元素（即dt元素）

7.把abbr元素的文本插入到这个dt元素中

8.创建“定义描述”元素（即dd元素）

9.把title属性插入dd元素

10.把dt元素追加到第四步创建的dl元素上

11.把dd元素追加到第四创建的dl元素上
12.把dl元素追加到body元素上


<body>
<h1>测试缩略语列表</h1>
<p>
<abbr title="万维网">w3c</abbr>是啊看风景拉看风景啊垃圾分类LJL：l jdfaj;lf afdkja;lfj ;a fdja f;akfa; www万维网；
</p>
<p>
<abbr title="文档对象模型">DOM</abbr>kasljfla;jdfsa;ljdfaljd;adlakjdfla;lajfd;ljflajdf;a是文档对象模型；
</p>
<p>
<abbr title="文档接口">API</abbr>fakldja;dljakfjdlsdjlsadkjlsjdlasjdlajs是文档接口；
</p>
</body>

/*CSS代码*/
abbr{
text-decoration: underline;
background-color: yellow;
}

//JSd代码：
function displayAbbrs(){
// 1.遍历这份文档的所有abbr元素
var abbrs=document.getElementsByTagName("abbr");
//defs存储abbr的title与文本（一箭双雕）
var defs=new Array();
for (var i = 0; i < abbrs.length;i++) {
//由于ie浏览器6不支持abbr元素，则此时abbr子元素结点个数为0；
//则此时需要跳出该层循环
if(abbrs[i].childNodes.length<1){
continue;
}
// 2.保存每个abbr元素的title属性
var definition=abbrs[i].getAttribute("title");
// 3.保持每个abbr元素的文本
var key=abbrs[i].firstChild.nodeValue;
//便于后面的循环使用
defs[key]=definition;

}
// 4.创建一个“定义列表”元素，即（dl元素）
var dlist=document.createElement("dl");

// 5.遍历刚才保存title属性与abbr包含文本
for(key in defs){
// 6.创建“定义标题”元素（即dt元素）
var dtitle=document.createElement("dt");
var dtitleText=document.createTextNode(key);
// 7.把abbr元素的文本插入到这个dt元素中
dtitle.appendChild(dtitleText);
// 8.创建“定义描述”元素（即dd元素）
var ddes=document.createElement("dd");
var ddesText=document.createTextNode(defs[key]);
// 9.把title属性插入dd元素
ddes.appendChild(ddesText);
// 10.把dt元素追加到第四步创建的dl元素上
dlist.appendChild(dtitle);
// 11.把dd元素追加到第四创建的dl元素上
dlist.appendChild(ddes);
}
//由于ie6上面abbr不支持导致dlist的元素子节点数也会为0；
//则此时ie6会屏蔽该功能，如果没有这些判断语句会报错
if(dlist.childNodes.length<1){
return false;
}
// 12.把dl元素追加到body元素上
var Contant=document.getElementsByTagName("body")[0];
//创建一个新定义标题说明
var header=document.createElement("h2");
var headerText=document.createTextNode("下面的内容时通过DOM生成的");
header.appendChild(headerText);
Contant.appendChild(header);
Contant.appendChild(dlist);

}

addLoadEvent(displayAbbrs);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航