当前位置: 代码迷 >> HTML/CSS >> DHTML【11】-DOM
  详细解决方案

DHTML【11】-DOM

热度:555   发布时间:2013-09-13 21:12:00.0
DHTML【11】--DOM

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