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中的部分常用对象和方法，内容很多，但是我只介绍其中最常用的对象，剩下的要靠自己查阅帮助文档进一步学习，学习的时候应该有所侧重，重在基础。好的，今天就到这里，我们下一节再见！
DHTML【11】--DOM的更多相关文章
- 企业IT管理员IE11升级指南【11】—— 通过SCCM 2012和WSUS部署Internet Explorer 11
企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...
- 【11】JMicro微服务-配置管理
如非授权,禁止用于商业用途,转载请注明出处作者:mynewworldyyl 往下看前,建议完成前面1到10小节 JMicro目前仅支持基于Zookeeper做配置管理,全部配置信息可以在ZK做增删改查 ...
- LeetCode：盛最多水的容器【11】
LeetCode:盛最多水的容器[11] 题目描述 给定 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 ...
- 剑指Offer：旋转数组的最小数字【11】
剑指Offer:旋转数组的最小数字[11] 题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4 ...
- 【11】specified value,computed value,used value计算方法
[11]specified value,computed value,used value计算方法 specified value(规范值): 计算方法如下: 如果样式表设置了一个值,使用这个值 如果 ...
- 【转载】Dom篇
一. 初探Dom 1. Dom介绍 二. Dom基础 1. window顶级对象 2. body.document对象事件 3. 通用的HTML元素的事件 4. ...
- 【前端】:Dom
前言: 昨天写了篇关于JavaScript的,今天写篇Dom的(插入4个实例),写完之后感觉知识点还不少~ 内容当然会用到[前端]:JavaScript的知识.下篇博客会写关于jQuery~~ 一.D ...
- 奇妙的算法【11】LeetCode-专属算法面试题汇总
这个是LeetCode上面的编程训练专项页面,地址:https://leetcode-cn.com/explore/interview/card/top-interview-quesitons-in- ...
- js【jquery】 - DOM操作
1.修改元素样式 js方式: var div2 = document.getElementById("") div2.style.width = '200px'; div2.cla ...
随机推荐
- [055] SSL 3.0曝出Poodle漏洞的解决方式-----开发人员篇
SSL 3.0曝出高危漏洞 2014年10月15日,Google研究人员发布SSL 3.0协议存在一个非常严重的漏洞,该漏洞可被黑客用于截取浏览器与server之间进行传输的加密数据,如网银账号.邮箱 ...
- 【在网页中获取截图数据】Chrome和Firefox下的实战经验
[转载自我在segmentfault的专栏:https://segmentfault.com/a/1190000004584071] 最近在实现一个功能,需求如下: 前提:当前页面无弹窗 页面任意位置 ...
- 转换DataSet中的多个表为Excel中的多个Sheets
第一种方法: 1. 在设计页面,有一个button按钮,当用户单击按钮的时候,发生转换 <asp:Button ID="Export" runat="server& ...
- 读书笔记之MERGE 语句使用
常用语法 MERGE INTO <target table> AS TGT USING <SOURCE TABLE> AS SRC ON <merge predicate ...
- 基础算法-查找：线性索引查找（II）
索引查找是在索引表和主表(即线性表的索引存储结构)上进行的查找. 索引查找的过程是: 1)首先根据给定的索引值K1,在索引表上查找出索引值等于K1的索引项,以确定对应子表在主表中的开始位置和长度. 2 ...
- vagrant 使用方法
0.介绍 Vagrant 是一款用来构建虚拟开发环境的工具,非常适合 php/python/ruby/java 这类语言开发 web 应用,"代码在我机子上运行没有问题"这种说辞将 ...
- Visual Studio调试技巧 -- Attach to Process #Reprinted#
from:http://www.cnblogs.com/lyosaki88/p/3481338.html 一般写完代码时,我们通常会启动调试运行一下看看是否正确,启动运行的方式无非是F5-- Star ...
- qemu核心机制分析-协程coroutine
关于协程coroutine前面的文章已经介绍过了,本文总结对qemu中coroutine机制的分析,qemu 协程coroutine基于:setcontext函数族以及函数间跳转函数siglongjm ...
- 设计模式总结1--observer pattern
<!-- 设计模式 --><!--是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代 码可靠性 --&g ...
- Python 第一章 基础知识
如果熟其他计算机语言,可能会习惯于每行以分号结束.Python则不同,一行就是一行,不管多少. 如果喜欢的话,可以加上分号,但是不会有任何作用(除非同一行还有更多的代码),而且这也不是同行的做法. & ...