Javascript每日一学(三)

编辑这个帖子

真的做什么都要专心,在写完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代码, 这些错误就能避免了。

(全文完)

你可能感兴趣的:(JavaScript,js,学习)