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

时间: 2024-10-28 16:43:34

DHTML【11】--DOM的相关文章

【斗医】【11】Web应用开发20天

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://qingkechina.blog.51cto.com/5552198/1386941 本文在上文的基础上完成用户登录验证功能. 四.获取数据请求业务处理封装 1.配置数据读取方式,它的作用是使用FrameDataGainer响应以.data结尾的请求,并把处理后的数据返回给客户端.打开D:\medical\war\WEB-INF\web.xml文件,填充如下内容: 1 2 3 4

【Go语言】【11】GO语言的包和函数

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://qingkechina.blog.51cto.com/5552198/1665234 还记得<[2]Sublime配置GO开发环境>的入门例子吗? 当然不记得了:)  这篇文章距离上篇时间太久远了,遥远的我都快忘记了.还是把截图贴上吧 该例子中的func main()表示这是一个名称叫main的方法,而package main表示这个方法在main包内,这两部分的内容就是本节要

【JavaScript】DOM编程-DHTML与Windows对象

A.什么是DHTML? javascript是在浏览器中运行的,如果它仅限于加减乘除运算,而不能将运算结果 显示在浏览器当中,或者不能与用户进行交互操作,那么他就失去了存在的意义. 在程序中,创建的对象是用来描述现实世界的有行或无形的事物的. javascript将浏览器本身.网页文档.以及网页文档中的HTML元素等 都用相应的内置对象来表示,这些对象及对象之间的层次系统称为 DOM(Document Object Model,文档对象编程). 用户通过鼠标或者按键在浏览器窗口或者网页元素上执行

DHTML【2】--HTML

    通过题目,大家已经明确知道,从这一节开始介绍DHTML中的最基础的部分HTML,对于HTML等概念上一节已经做了概述,这一节不再赘余.在学习HTML之前,先告诉大家一个好消息,HTML不难,比C++.Java等语言的面向对象简单很多,并且你也不用安装庞大的Eclipse和Visual Studio,只要有浏览器就可以运行,哈哈哈,慢慢得意去吧,当然你也会慢慢发现的.     HTML是DHTML中最基础的部分,也是DHTML中最先出现的内容,因为只有有了HTML标签内容,DOM才会产生D

DHTML【8】--CSS

    在讲HTML时说过,有个Style标签是在CSS里用的,是的,在HTML中添加CSS样式必须要用到Style,在标签里单独定义标签属性时用的是Style属性.上一节我们也说过,先不用管那个Style标签,那么这一节,我们就单独来解决这个Style标签.     看一看帮助文档,他是怎么说Style的,指定页面的样式表,Style 元素只能在 HTML 文档的 Head节内使用,那么究竟该怎么指定呢? 有三种方式,看下图:       最常用的要数第一层,外部引用,这样的化程序员和美工设计

mootools框架【八】-Dom篇:Css查询支持之Dom.js

说明:mootools支持通过Css选择器语法来获取元素节点,以最少的代码做最多的事情.在Dom.js中提供了实现这些功能的工具方法以及元素级的扩展. 1.方法:$E 作用:按照css选择器语法获取第一个符合规则的元素 参数: selector:css选择器,如a,#my_div等 filter:可选,过滤范围,默认是document 例子: <div id="myDiv"> <a href="#" id="link1">

【JavaScript】DOM节点常用方法介绍02

DOM节点常用方法介绍02 1.替换节点 replaceChild() 把一个给定父元素里的一个子节点替换为另外一个子节点 var reference = element.replaceChild(newChild,oldChild); 返回值是一个指向已被替换的那个子节点的引用指针. 如果被插入的子节点还有子节点,则那些子节点也被插入到目标节点中 例子: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

DHTML【1】

        什么是DHTML呢?英文全称(Dynamic Hypertext Markup Language),即动态超文本标记语言,DHTML不是一个独立的新技术,而是多种技术的综合,它能使HTML变的更灵活.    DHTML都包括什么技术?DHTML包括HTML.Css.Javascript.DOM.    各个技术都负责什么东东呢?HTML负责将数据进行标签的封装:css负责美化标签:DOM负责将标签以及标签中的数据封装成对象:Javascript负责通过程序设计方式来操作这些对象.

DHTML【9】--Javascript

      大家好,好长时间不见了,因为博主最近在驾校学习开车,所以耽误了DHTML的更新日程,对此实感愧疚.       好了,不再得瑟了,接下来该介绍DHTML中比较核心的一个东东-Javascript. 初看Javascript有点头晕,因为名字中有个Java,Java似乎很难啊,学好那东东没有个几年是学不好的的啊,如果你有这样的心理那你就错了,Javascript是一种动态网页脚本语言,他和Java的关系就如同加州牛肉面和马华牛肉面之间的关系,虽然名字里都有牛肉面,都是做面起家的,但是两