吴瑕
（四川职业技术学院，四川 遂宁 629000）
【摘要】DOM真正将HTML/XHTML、CSS和Javascript凝聚在一起，形成了功能强大的Javascript DOM脚本程序设计，本文对DOM Javascript脚本程序设计的发展与应用方法做了简要探讨。
教育期刊网 http://www.jyqkw.com
关键词 Javascript DOM；脚本程序设计；平稳退化
0 前言
近年来网页的内容越来越富于变化与色彩，网页设计技术从最初的HTML，再到CSS、Javascript，直到W3C（万维网联盟）推出的标准化DOM（Document Object Model文档对象模型），网页设计工作从过去的混乱无序状态，逐渐发展为一种有着成熟设计原则可循的流水线作业。
1 Javascript DOM脚本程序设计的发展
Javascript是由Netscape公司与Sun公司合作开发的，诞生于1995年，它的出现使网页内容不再局限于枯燥的文本，使网页实现了可交互性。但是早期的Javascript并不受欢迎，原因有多种，如：早期的浏览器彼此很少兼容、Javascript的网页访问性差，早期的程序员对Javascript不遵守相关标准和编程准则的滥用，导致各种问题。如今，随着W3C推出的标准DOM，情况极大改变，几乎所有浏览器都支持DOM，DOM真正将HTML/XHTML、CSS和Javascript凝聚在一起，形成了功能强大的Javascript DOM脚本程序设计，只要应用得当，它将成为Web开发中又一不可缺少的重要工具。
2 Javascript DOM脚本程序的应用方法
2.1 规范应用Javascript
Javascript是Javascript DOM脚本程序设计的基础语言，易学易用，其早期的应用存在不规范，很大程度上造成了人们对Javascript的恶劣印象，所以应该做到规范应用Javascript。首先可以从以下几方面出发：
1）Javascript代码单独保存成.js文件或者把<script>标签放到最后，<body>之前；
2）掌握好基本语法；
3）每条语句末尾加上分号，养成良好编程习惯；
4）养成良好注释的习惯；
5）注意大小写的区分；
6）不要滥用浏览器对象BOM（如弹出窗口的滥用）。
2.2 遵循“用户至上”的原则
用户的体验是检验网页优劣的标准，如果要使用Javascript就必须要先确认：这么做对用户的浏览体验会产生怎样的影响。网站对Javascript的滥用持续了很久，最臭名昭著的就是在网页中弹出广告窗口，从技术层面上看，弹出窗口本是一项很实用的功能，但不少用户还是因为那些广告彻底禁用了Javascript，所以从长远来看，不遵循“用户至上”原则的网站，都是在自取灭亡。
2.3 平稳退化
实际上，一些浏览器不支持Javascript，还有些用户禁用了Javascript，如果能正确使用Javascript，让这些不支持Javascript的浏览器也能顺利浏览网站，这就是“平稳退化”，即：网页某些功能无法实现，但基本的操作仍能顺利完成。目前极少数搜索引擎能够理解Javascript代码，如果能平稳退化，那网页在搜索引擎上的排名也将提前。下面介绍一个平稳退化的经典应用。
2.3.1 超链接打开新窗口的改进
过去要打开一个新窗口，通常写一个执行打开新窗口的操作的popWin()函数，通过下面两种方法调用：
1）“Javascript：”伪协议
<a href=”javascript：popWin(‘http://www.baidu.com’);”>Baidu</a>
2）Onclick事件调用
<a href=”#” onclick=”popWin(‘http://www.baidu.com’);return false;”>Baidu</a>
这两种方法都比较糟糕，因为一旦浏览器不支持Javascript，这样的链接毫无用处。
可以这样改进：
<a href=”http://www.baidu.com” onclick=”popWin(this.href);return false;”>Baidu</a>
这样即使浏览器不支持Javascript，也可以正常的使用超链接，这一个经典的平稳退化，但是仍有改进的余地。
2.3.2 分离Javascript
如果将popWin()这样的事件处理函数都存放在单独的JS文件中，就可以做到Javascript与HTML文档分离了，但是在HTML文档中使用onclick之类的属性也是一种既没有效率又容易引发问题的做法，所以可以做一个“挂钩”，就像CSS机制中的class属性那样，将Javascript的调用行为与HTML文档彻底分离开，网页就会更加健壮。超链接可以这样写：<a href=”http://www.baidu.com” class=”popW”);return false;”>Baidu</a>
将页面上需要调用Javascript事件的超链接定义一个popW 类属性，然后在JS文件中编写preLinks()函数处理文档中的超链接。preLinks()函数如下：
Function preLinks(){
Var links=document.getElementsByTagName(“a”);
For(var i=0;i<links.length;i++) //遍节点树中的超链接
{if(links[i].getAtrribute(“class”)==”popW” //读取节点树超链接节点的class属性值判断
{links[i].onclick=function(){ //如果超链接的class属性值为”popW”，则调用popWin()函数
popWin(this.getAttribute(“href”)); //调用popWin()，获取当前节点的href属性值作为实参
} ) } }
最后只需要将对preLinks()函数的调用添加到window对像的onload事件，即：将<sript>window.onload=preLink()</script>这条脚本语句加在网页文档末尾 ，body之前，这样做不但DOM可以正常工作，而且实现了完美的平稳退化，效率极高。
2.4 性能优化
在编写Javascript DOM脚本程序时，还应该注意脚本对 web应用整体性能的影响，所以还应该注意一些问题：
1）尽量少访问DOM
程序运行document.getElementsByTagName(“a”)都会遍历一遍DOM树，如下程序：
if(document.getElementsByTagName(“a”).length>0)
{var links= document.getElementsByTagName(“a”);
For(var i=0;i<links.length;i++ )
…//对每个a节点的处理
}}
这段代码就要遍历两次DOM树，造成搜索浪费，可以将搜索的结果保存在一个变量中，如果是多个函数中还可以考虑保存在一个全局变量中，提高程序执行效率。
2）和尽量减少HTML标记
3）合并放置脚本
4）压缩脚本
3 总结
本文对DOM Javascript脚本程序设计的发展与应用方法做了简要探讨，总之对DOM Javascript脚本程序开发的学习和应用需要一定的实践经验，只有勤于思考，善于借鉴，不断总结应用技巧，才能编写出高品质的脚本。
［责任编辑：薛俊歌］