javascript每日一学（三）

最新推荐文章于 2024-07-23 11:32:13 发布

dabentuaipangou

最新推荐文章于 2024-07-23 11:32:13 发布

阅读量206

点赞数

分类专栏： javascript js 学习文章标签： javascript header 文档 function object mysql

本文链接：https://blog.csdn.net/dabentuaipangou/article/details/7637282

版权

javascript js 学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

编辑这个帖子

真的做什么都要专心，在写完JS代码的时候，我去看了写PHP。结果在安装mysql上弄了两个多小时都没解决。原因是我不小心删除了一些文件。呜呜。还是老老实实写javascript代码先。
昨天写了一个显示文档缩略词的JS脚本，和书上的代码很不一样，但基本思路是一样的，都是遍历文档中的abbr标签，然后提取其title属性和文本子节点，最后将这些数据生成一个dl表插入到文档的尾部。效果图：

HTML源代码：

<html>
<head>
<title>-- javascript DOM 编程艺术 第七章 练习--!</title>
<script type = "text/javascript" src = "../scripts/ex04.js">
</script>
<body>
<p>这是一个小小的练习</p>
<p>在<abbr title = "World Wide Web Consortium">W3C</abbr>中，有一个叫<abbr title = "Document Object Model">DOM</abbr>的模型。</p>
</body>
</head>
</html>

JS代码：

//编写缩略词显示
//首先获取所以abbr标签，保存它的文本子节点和title
//把上面获取的信息生成一个dl表
function addAbbrList()
{
	var i;
	//var abbrArray = document.getElementByTagName("abbr"); 错误 复数形式
	var abbrArray = document.getElementsByTagName("abbr");
	//创建一个<dl>
	var abbrList = document.createElement("dl");
	for(i = 0;i < abbrArray.length;i++){
		if(!(abbrArray[i].getAttribute("title")))
			continue;                               //这个abbr没有title属性，进入下一个
		else{
			var defination = abbrArray[i].getAttribute("title");
			var key = abbrArray[i].lastChild.nodeValue;
			var a_dt = document.createElement("dt");
			var a_dd = document.createElement("dd");
			//转换成文本节点
			var tnKey = document.createTextNode(key);
			var tnDefination = document.createTextNode(defination);
			a_dt.appendChild(tnKey);
			a_dd.appendChild(tnDefination);
			abbrList.appendChild(a_dt);
			abbrList.appendChild(a_dd);
		}
	}
	//再创建一个缩略词列表的标题
	var header = document.createElement("p");
	var headText = document.createTextNode("缩略词知识");
	header.appendChild(headText);
	document.body.appendChild(header);
	//将我们创建的<dl>插入到body尾部
	document.body.appendChild(abbrList);
}
window.onload = addAbbrList;

因为是初学者对一些方法和属性不是特别熟悉。所以在写的时候也出错了。最后调试后在发现。比如说document.getElementsByTagName("abbr");刚开始我少写了那个代表复数的s.Firebug果断报错。历经“千辛万苦”终于找到了s。还有我忘记了将提取出来的title属性转换成文本节点。这些都是我遇到的问题，当然这也是由于不熟悉的原因。以后只要多写JS代码，这些错误就能避免了。

（全文完）

dabentuaipangou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript每日一学（三）

编辑这个帖子真的做什么都要专心，在写完JS代码的时候，我去看了写PHP。结果在安装mysql上弄了两个多小时都没解决。原因是我不小心删除了一些文件。呜呜。还是老老实实写javascript代码先。昨天写了一个显示文档缩略词的JS脚本，和书上的代码很不一样，但基本思路是一样的，都是遍历文档中的abbr标签，然后提取其title属性和文本子节点，最后将这些数据生成一个dl表插入到文档的尾部。效
复制链接

扫一扫

专栏目录