大家好,从今天开始,我们将进入DOM的学习。
DOM?DOM是何东东呢?大家还记得我在前面提过的DOM树吗?就是我在前面讲HTML的时候画的那个图,那个其实就是一个简单的DOM树,浏览器在解析HTML代码时,会生成这样一颗DOM树,然后将节点封装成对象,DOM树占用一定的内存空间,对执行效率有一定程度的影响,因此我们在使用时要注意DOM树的优化。
DOM语法全是Javascript语法,也写在script标签中,type格式也是text/javascript.我们可以通过DOM对象实现动态的网页技术,可以动态创建HTML标签,也可以动态的加载CSS样式,因此DOM是个非常牛X的技术。
下面看一个静态页面无法实现的例子:
<html>
<head>
<title>First DOM</title>
<script type="text/javascript">
function FirstDom()
{
alert("我是第一个DOM技术!");
}
function Del()
{
if(confirm("大人,您真的要删除吗?"))
{
alert("确定");
}
else{
alert("取消");
}
}
</script>
</head>
<body>
<input type="button" onclick="FirstDom()"value="点我啊!"/>
<input type="button" onclick="Del()" value="删除"/>
</body>
</html>
FristDom方法绑定到第一个按钮的单击事件,所以当第一个按钮单击时就会执行FirstDom方法;Del方法绑定到第二个按钮,Del方法里用到了一个confirm方法,confirm方法会弹出提示对话框,如果用户选择“确定”返回true,如果选择“取消”返回false,常用于用户删除文件时让用户确认,防止误删文件带来不必要的损失。
再看下面例子:
<html>
<head>
<title>First DOM</title>
<script type="text/javascript">
function Change()
{
setInterval("alert(newDate().toLocaleTimeString())",2000);
}
</script>
</head>
<body>
<input type="button" onclick="Change()"value="大人,点我啊!"/>
</body>
</html>
setInterval方法表示每隔一段时间执行一段代码,第一个参数为代码字符串,第二个参数为间隔时间(单位毫秒),返回值为定时器的标识,可以用var类型获取,另外还有clearInterval方法,表示取消setInterval的定时执行,因为setInterval可以设定多个定时,所以clearInterval要指定消除那个定时器的标识,即setInterval的返回值,setInterval的返回值用var获取。
看到上面代码的执行效果,你是否有一种回到了Winform的感觉,通过对象事件触发方法进行交互操作,这就是DOM的强大之处,学习DOM就是学习DOM中的常用对象和常用方法,进而灵活运用对象进行各种交互操作,进而减少与服务器的数据传输以及丰富浏览器端的各种操作。
下一节将开始介绍DOM中的部分常用对象和方法,内容很多,但是我只介绍其中最常用的对象,剩下的要靠自己查阅帮助文档进一步学习,学习的时候应该有所侧重,重在基础。好的,今天就到这里,我们下一节再见!