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

最新推荐文章于 2022-02-01 04:13:12 发布

u010092682

最新推荐文章于 2022-02-01 04:13:12 发布

阅读量661

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/wangbinhui81218/article/details/24012395

版权

JS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

*****
缩略语列表：
主要把文本段落中的缩略词的标题名称给提取出来；
是通过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元素上

<!-- HTML代码 -->
<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);

u010092682

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript DOM编程艺术学习笔记（4）缩略语列表：

*****缩略语列表：主要把文本段落中的缩略词的标题名称给提取出来；是通过DOM来生成的，假如浏览器不支持js则会不显示；步骤：1.遍历这份文档的所有abbr元素2.保存每个abbr元素的title属性3.保持每个abbr元素的文本4.创建一个“定义列表”元素，即（dl元素）5.遍历刚才保存title属性与abbr包含文本6.创建“定义标题”元素（即dt
复制链接

扫一扫