DHTML【11】--DOM

时间:2020-12-12 22:56:30

大家好,从今天开始,我们将进入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中的部分常用对象和方法,内容很多,但是我只介绍其中最常用的对象,剩下的要靠自己查阅帮助文档进一步学习,学习的时候应该有所侧重,重在基础。好的,今天就到这里,我们下一节再见!