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

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

  1. 企业IT管理员IE11升级指南【11】—— 通过SCCM 2012和WSUS部署Internet Explorer 11

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  2. 【11】JMicro微服务-配置管理

    如非授权,禁止用于商业用途,转载请注明出处作者:mynewworldyyl 往下看前,建议完成前面1到10小节 JMicro目前仅支持基于Zookeeper做配置管理,全部配置信息可以在ZK做增删改查 ...

  3. LeetCode：盛最多水的容器【11】

    LeetCode:盛最多水的容器[11] 题目描述 给定 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为  ...

  4. 剑指Offer：旋转数组的最小数字【11】

    剑指Offer:旋转数组的最小数字[11] 题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4 ...

  5. 【11】specified value,computed value,used value计算方法

    [11]specified value,computed value,used value计算方法 specified value(规范值): 计算方法如下: 如果样式表设置了一个值,使用这个值 如果 ...

  6. 【转载】Dom篇

    一. 初探Dom     1. Dom介绍 二. Dom基础     1. window顶级对象     2. body.document对象事件     3. 通用的HTML元素的事件     4. ...

  7. 【前端】:Dom

    前言: 昨天写了篇关于JavaScript的,今天写篇Dom的(插入4个实例),写完之后感觉知识点还不少~ 内容当然会用到[前端]:JavaScript的知识.下篇博客会写关于jQuery~~ 一.D ...

  8. 奇妙的算法【11】LeetCode-专属算法面试题汇总

    这个是LeetCode上面的编程训练专项页面,地址:https://leetcode-cn.com/explore/interview/card/top-interview-quesitons-in- ...

  9. js【jquery】 - DOM操作

    1.修改元素样式 js方式: var div2 = document.getElementById("") div2.style.width = '200px'; div2.cla ...

随机推荐

  1. live555学习经验链接一

    live555学习经验链接:http://xingyunbaijunwei.blog.163.com/blog/#m=0&t=1&c=fks_084071082087086069082 ...

  2. /export/App/zz/phantomjs-1.9.7-linux-x86_64/bin

    /export/App/zz/phantomjs-1.9.7-linux-x86_64/bin

  3. android项目 之 记事本（6）----- 加入手写

    想必大家都用过QQ的白板功能,里面主要有两项,一个是涂鸦功能,事实上类似于上节的画板功能,而还有一个就是手写,那记事本怎么能没有这个功能呢,今天就来为我们的记事本加入手写功能. 先上图,看看效果: 看 ...

  4. webform基础介绍及页面传值（session,cookie）、跳转页面

    一,IIS 1.首先知道IIS是个什么东西:它是web服务器软件,安装在服务器上,接受客户端发来的请求,并传送给服务器端,然后响应请求并送回给客户端.类似于饭店里的服务员. 2.会安装IIS——控制面 ...

  5. SQL数据库语句练习题目

    一.            设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表( ...

  6. database schema

    数据中有4个Schema无法被删除 ● dbo, 具有db_owner或者db_ddl_admin 的用户,新创建对象默认schema就是dbo ● guest , 用来给guest 用户使用,这个s ...

  7. 把Orchard部署到Windows Azure Web Sites

    很久前就想做个人站点,主要用来记录自己的生活,我喜欢摄影,烘焙…然后又刚刚入皮坑,这些都可以放在网站上展示一下,或许还能为自己带来收入. 然后手上刚好有Azure的试用,于是乎动力就上来了. 以下是部 ...

  8. 关于UITableview刷新笔记

    今天在做项目的时候 发现调用tableview 的 reloaddata 方法的时候出现崩溃. - 具体操作是执行某个方法后将数据数组中的某条数据删除(数组中存数组)发现调用刷新方法后 程序崩溃,查看 ...

  9. 「OC」block 和 protocol

    一.block   (一)简介 block 是什么?苹果推荐的类型,效率高,在运行中保存代码.用来封装和保存代码,有点像函数,block 可以在任何时候执行.在多线程.异步任务.集合遍历.集合排序.动 ...

  10. 在QuartusII 中使用tcl对工程进行复制——半自动

    最近在看coyoo的博客,加上手上有一本coyoo老师的书籍.本人是脚本小白,怎么看都没有看懂这个自动化是怎么实现的. 先说我的半自动化,后面在说我对自动化的一点疑惑—— 目前没有实现 目录环境: 首 ...