深入浅出JavaScript （四）DHTML

DHTML对象模型是将浏览器和HTML文件的标签都对象化,以便Javascript程序代码可以轻易地操控浏览器和访问HTML标签的对象.

DHTML并没有建立全新的HTML标签集和样式之间的关系,Script程序代码可以控制文件的元素,样式可以建立文件元素的编排,Script程序代码可以访问样式或初始化样式.

访问HTML文件的所有元素,将每一个HTML标签视为一个对象,使用属性id或name来访问标签对象。一下是DHTML模型。

下面介绍几个常用对象的常用方法或者属性。

【Window对象】

1. setTimeout(express,time)

启动定时器，当Time的时间到达时，运行express表达式，单位为千分之一毫秒

clearTimeout()

停止setTimeout方法启动的定时器，看下面例子：

经过1秒后，执行Count()函数，然后，停止。

<script language="javascript" type="text/javascript" >//计时function Count(){alert("执行alert");}//保存setTimeout()函数返回IDvar timeoutId;function GameBegin(){//经过1秒后，调用Count()函数timeoutId=setTimeout("Count()",1000);}function GameEnd(){//结束调用clearTimeout(timeoutId);}
</script>

2.内置对话框

alert(message)

显示一个警告信息的窗口，参数就是显示的信息内容

confirm(message)

一个确认的对话框，参数为信息内容，传回true表示单击“确定”按钮，false为“取笑”按钮

Prompt(msg,value)

显示输入文字内容的对话框，参数msg为信息内容，value为默认值，传回用户输入的字符串串

<script language="javascript" type="text/javascript" >alert("李龙生");confirm("你确定登陆吗？");prompt("请输入用户名！","李龙生");</script>

【Navigator对象】

Navigtor对象是Window对象的下一层对象，通过该对象的属性可以获取浏览器和系统资源的信息，这些属性都是只读属性。

【Document对象】

即是浏览器显示的HTML文件，对文件的理解。

1.文件是一种应用程序

当HTML支持JavaScript后，文件从静态变为了动态应用程序

2.文件是一种用户接口

文件可以响应用户操作，它也是一种用户接口

3.文件是一种数据来源

XML能够定义，给予文件全新的意义，使文件不再只是文件，XML可以使文件成为一种数据来源

4.getElementById()

getElementByName()

可以依据HTML标签的id或者name属性获取指定的HTML元素,看下面实例：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>获取文件指定元素</title><script language="javascript" type="text/javascript" >//使用ID获取元素function getElement(){var element=document.getElementById("header");alert("标签名称："+element.tagName);}//使用Name获取元素function getElementName(){var element=document.getElementsByName("buttonlist");alert("共有元素"+element.length);}</script>
</head>
<body ><h2 id="header">获取文件指定元素</h2><hr/><form><input type="button" value="获取标题标签" οnclick="javascript:getElement();" /><input name="buttonlist" type="button" value="按钮1" οnclick="javascript:getElementName();" /><input name="buttonlist" type="button" value="按钮2" οnclick="javascript:getElementName();" /></form>
</body>
</html>

运行效果如下：

【 DHTML与DOM区别】

DHTML 是 Dynamic HTML（动态 HTML）的缩写，是 HTML、CSS、Javascript 这三种技术的结合。

DOM 是 Document Object Model（文档对象模型）的缩写，是一种应用编程接口。

DHTML 出现得较早。
DOM 是在 DHTML 之后出现的。
DHTML 没有统一的标准，各浏览器有各自的 DHTML。
DOM 已经得到 W3C 的承认，并有新的标准，DOM 版本越往后，各浏览器对 DOM 的支持越相近。也即 DOM 比 DHTML 更规范。
DHTML 只适用于 Web 文档。
DOM 则涵盖了使用任何一种支持 DOM API 的程序设计语言去处理任何一种标记文档的所有情况，比如：ASP 处理 XML 文档，JavaScript 处理 Web 文档。也即 DOM 比 DHTML 功能强大。

转载于:https://www.cnblogs.com/lilongsheng/archive/2013/01/23/3226065.html

深入浅出JavaScript （四）DHTML相关推荐

深入浅出Javascript闭包
深入浅出Javascript闭包一.引子闭包(closure)是 JavaScript 语言的一个难点,面试时常被问及,也是它的特色,很多高级应用都要依靠闭包实现.本文尽可能用简单易懂的话,讲清楚 ...
深入浅出 Javascript 事件
转载自:https://www.cnblogs.com/jingwhale/p/4656869.html 深入浅出 Javascript 事件一.事件流事件冒泡和事件捕获分别由微软和网景公司提出, ...
前端开发学习笔记（一）深入浅出Javascript
从事开发工作已经有十几年时间了,但一直没有真正涉猎WEB开发,这在当今IT业界听起来有些不可思议哈.从今天开始静下心来,全面深入的学习WEB开发的有关知识.将学习的体会和要点记录下来,以作备忘. 深入 ...
Perl，Python，Ruby，Javascript 四种脚本语言比较
Perl 为了选择一个合适的脚本语言学习,今天查了不少有关Perl,Python,Ruby,Javascript的东西,可是发现各大阵营的人都在吹捧自己喜欢的语言,不过最没有争议的应该是Javascr ...
深入浅出 Javascript API（二）--地图显示与基本操作转
深入浅出 Javascript API(二)--地图显示与基本操作地图显示与基本操作(放大.缩小.移动.坐标显示)是JavascriptAPI的基本功能,也是一个WebGIS应用的基本内容,Java ...
PHP （20140510）深入浅出 JavaScript 变量、作用域和内存 v 0.5
深入浅出 JavaScript 变量.作用域和内存 v 0.5 本文主要从原理入手分享变量和作用域的相关知识,最后结合本文所分享知识,再次深入了解下闭包的运行原理. 主要参考<JS高级程序设计& ...
深入浅出Javascript的正则表达式
深入浅出的javascript的正则表达式学习教程阅读目录了解正则表达式的方法了解正则中的普通字符了解正则中的方括号[]的含义理解javascript中的元字符 RegExp特殊字符中的需要 ...
JavaScript四（DOM编程）
一.绪论 DOM是文档对象模型(Document Object Module)的简称,借助DOM模型,可以将结构化文档,转换成DOM树,程序可以访问,修改,增加,删除树的节点.程序通过操作DOM树时, ...
深入浅出 JavaScript 数组 v0.5
有一段时间不更新博客了,今天分享给大家的是一篇关于JS数组的,数组其实比较简单,但是用法非常灵活,在工作学习中应该多学,多用,这样才能领会数组的真谛. 以下知识主要参考<JS 精粹>和&l ...
深入浅出 JavaScript 中的 this
为什么80%的码农都做不了架构师?>>> 在 Java 等面向对象的语言中,this 关键字的含义是明确且具体的,即指代当前对象.一般在编译期确定下来,或称为编译期绑定.而在 ...

深入浅出JavaScript （四）DHTML

深入浅出JavaScript （四）DHTML相关推荐

最新文章

热门文章