JavaScript学习笔记(2)——JavaScript和DOM的关系
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。
说通俗点，DOM就是把HTML语言包装成各种对象并以树的组织形式存放于系统内存，再由浏览器将其渲染成丰富的网页呈现出来。而通过JavaScript对DOM对象的操作就可以反映在浏览器渲染出来的网站上。这样就可以达到制作出功能丰富，交互性强，具有动态特效的网站。
下面我们用一个简单的例子说明JavaScript与DOM的关系。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function change(){
//通过ID获取DOM对象。
var deng=document.getElementById("deng");
//获取DOM对象的属性，并通过属性值判断
if (deng.src.indexOf("off")>=0) {
//修改DOM对象的属性值
deng.src="img/on.png";
} else{
deng.src="img/off.png";
}
}
</script>
</head>
<body>
<img id="deng" src="img/off.png" width="350px" height="500px"/>
<img id="kaiguan" src="img/kaiguan.png" width="197px" height="197px" onclick="change()"/>
</body>
</html>
1.页面拥有两个img，一个id为"deng"，一个id为" kaiguan"
2.为id＝" kaiguan"的img的onclick事件添加一个JavaScript方法change()
3.通过JavaScript的语法获取id为"deng"的DOM对象
4.获取该DOM对象的src属性
5.改变改DOM对象的src属性
此页面可以实现点击开关，img分别加载状态为“开”和“关”的两张灯泡图片，实现点击开关动态开关灯的网页特效。
JavaScript学习笔记(2)——JavaScript和DOM的关系的更多相关文章
- Javascript学习笔记1 javascript的特点
..对于网页而言,Javascript无处不在,对于英语不好的人它简直是噩梦般的存在,但形式所逼,今天开始着手学习!希望自己能坚持下去.从什么地方着手,我的目标是从大处着眼,从应用着眼,不抠细节,反正 ...
- Javascript学习笔记3 Javascript与BOM简介
什么是BOM BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象 ...
- JavaScript学习笔记(4)——JavaScript语法之变量
一.变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume). 变量必须以字母开头 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做 ...
- JavaScript学习笔记（四）——DOM
第五章 网页交互——文本对象模型[Document object model] 1 简单介绍DOM,dom是将html与javascript进行交互的工具. [使用innerHTML时注意:html中 ...
- 1.2（JavaScript学习笔记）JavaScript HTML DOM
一.DOM DOM全称为document object model(文档对象模型). 此处的文档指当前HTML文档,对象指HTML标签. 当网页被加载时,浏览器会创建页面的文档对象模型. 下面结合具体 ...
- JavaScript学习笔记(10)——JavaScript语法之操作DOM
1.页面输出用document.write()方法,但是不可以在window.onload中用,否则整个html页面将被覆盖. 2.通过javascript获取对象后,改变对象中的html内容:doc ...
- JavaScript学习笔记(3)——JavaScript与HTML的组合方式
一.JavaScript可以写在HTML页面内部, 可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中. 通常的做法是把函数放入 <h ...
- JavaScript学习笔记(12)——JavaScript内置对象
1.Number Javascript只有一种数字类型,可以有小数也可以没有,也可以使用科学计数法. var z=123e-5; // 0.00123 JavaScript 不是类型语言.与许多其他编 ...
- JavaScript学习笔记(12)——JavaScript自定义对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- FreeModbus for stm32（Keil工程）——精简Modbus slave协议【worlsing笔记】
FreeModbus For stm32:点击下载源码 1.测试环境Keil MDK 4.7a stm32f103c8, PB12为输出线圈, 可以通过Modbus Poll来控制线圈的输出状 ...
- Android开发中常用的Eclipse快捷键
关闭所有窗口Ctrl + Shift + W 关闭所有已打开的编辑窗口 重命名Alt + Shift + R 文件或变量重命名(先选中文件或变量再同时按下快捷键) 快速引包Ctrl + Shi ...
- 关于七牛云存储，HTTPS资源上传不成功问题
关于七牛云存储,HTTPS资源上传不成功问题 官方给出了一个解决方案,亲测可用.特此记录一下. 找到QNConfiguration.m文件.然后重写两个方法,直接上代码. + (instancetyp ...
- Activity详解
Activity是android应用的重要组成单元之一(另外3个是Service,BroadcastReceiver和ContentProvider).实际应用包含了多个Activity,不同的Act ...
- 使用CSS3和jQuery可伸缩的搜索条
使用CSS3和jQuery可伸缩的搜索条 helloweba.com 作者:月光光 时间:2013-12-09 21:23 标签: CSS3 jquery 搜索条在我们网站是必不可少的,尤其是在有限的 ...
- thinPHP中多维数组的遍历
$drug=array( 'ACEI'=>array(array('ch_name'=>'卡托普利','en_name'=>'captopril'),array('ch_nam ...
- StageFright框架流程解读
1. StageFright介绍 Android froyo版本号多媒体引擎做了变动,新加入�了stagefright框架,而且默认情况android选择stagefright,并没有全 ...
- android学习日记19--四大组件之BroadcastReciver(广播接收者)
二.BroadcastReciver(广播接收者) 1.简述 BroadcastReciver位于android.content包下,主要用于对广播消息(Intent)的过滤并响应的控件.可以理解为全 ...
- WebGL on iOS8 最终等到了这一天
WWDC2014刚结束,这次的大会是名符事实上的开发人员大会.更贴切的应该说的确是一次软件开发人员的大会.对于OSX和iOS的很多其它功能特性让人兴奋.Swift新语言促成了如上图片 但我更感兴趣的是 ...
- pomelo流程
1.首先第一次会加载master服务器.这个比较特别..他负责启动其他服务器 加载master组件和monitor组件..然后执行所有组件的start.. master组件有自己的ConsoleSer ...