文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。

　　说通俗点，DOM就是把HTML语言包装成各种对象并以树的组织形式存放于系统内存，再由浏览器将其渲染成丰富的网页呈现出来。而通过JavaScript对DOM对象的操作就可以反映在浏览器渲染出来的网站上。这样就可以达到制作出功能丰富，交互性强，具有动态特效的网站。

下面我们用一个简单的例子说明JavaScript与DOM的关系。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script type="text/javascript">
  7.             function change(){
  8.                 //通过ID获取DOM对象。
  9.                 var deng=document.getElementById("deng");
  10.                 //获取DOM对象的属性，并通过属性值判断
  11.                 if (deng.src.indexOf("off")>=0) {
  12.                     //修改DOM对象的属性值
  13.                     deng.src="img/on.png";
  14.                 } else{
  15.                     deng.src="img/off.png";
  16.                 }
  17.             }
  18.         </script>
  19.     </head>
  20.     <body>
  21.         <img id="deng" src="img/off.png" width="350px" height="500px"/>
  22.         <img id="kaiguan" src="img/kaiguan.png" width="197px" height="197px"  onclick="change()"/>
  23.     </body>
  24. </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的关系的更多相关文章

  1. Javascript学习笔记1 javascript的特点

    ..对于网页而言,Javascript无处不在,对于英语不好的人它简直是噩梦般的存在,但形式所逼,今天开始着手学习!希望自己能坚持下去.从什么地方着手,我的目标是从大处着眼,从应用着眼,不抠细节,反正 ...

  2. Javascript学习笔记3 Javascript与BOM简介

    什么是BOM BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象 ...

  3. JavaScript学习笔记(4)——JavaScript语法之变量

    一.变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume). 变量必须以字母开头 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做 ...

  4. JavaScript学习笔记（四）——DOM

    第五章 网页交互——文本对象模型[Document object model] 1 简单介绍DOM,dom是将html与javascript进行交互的工具. [使用innerHTML时注意:html中 ...

  5. 1.2（JavaScript学习笔记）JavaScript HTML DOM

    一.DOM DOM全称为document object model(文档对象模型). 此处的文档指当前HTML文档,对象指HTML标签. 当网页被加载时,浏览器会创建页面的文档对象模型. 下面结合具体 ...

  6. JavaScript学习笔记(10)——JavaScript语法之操作DOM

    1.页面输出用document.write()方法,但是不可以在window.onload中用,否则整个html页面将被覆盖. 2.通过javascript获取对象后,改变对象中的html内容:doc ...

  7. JavaScript学习笔记(3)——JavaScript与HTML的组合方式

    一.JavaScript可以写在HTML页面内部, 可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中. 通常的做法是把函数放入 <h ...

  8. JavaScript学习笔记(12)——JavaScript内置对象

    1.Number Javascript只有一种数字类型,可以有小数也可以没有,也可以使用科学计数法. var z=123e-5; // 0.00123 JavaScript 不是类型语言.与许多其他编 ...

  9. JavaScript学习笔记(12)——JavaScript自定义对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. Javascript注意事项四【提高循环性能的策略】

    for(var i = item.length;i--){ process(item[i]); } 1.通过倒叙循环 2.最小化属性查询 3.尽量不要使用函数迭代(forEach)

  2. XMIND

    XMind 是一款非常实用的商业思维导图软件,应用全球最先进的Eclipse RCP 软件架构,全力打造易用.高效的可视化思维软件,强调软件的可扩展.跨平台.稳定性和性能,致力于使用先进的软件技术帮助 ...

  3. RefernceError : jQuery is not define

    使用ligerUI 的时候,代码没有什么错误,可是不能正常显示组件 ,火狐debug显演示样例如以下错误: 最后发现是引入文件的顺序错了,最好依照ligerui demo中的顺序引入js文件,这样就不 ...

  4. ef6 dbfirst 实现同一套代码多个数据库访问

    codefirst可以通过DbConfiguration实现,但是dbfitst无法做到,弄了一天,搞定了,下面是步骤 1.将.edmx的 元数据处理项目改成 复制输出到目录 2.bs项目添加App_ ...

  5. 从零开始学android开发-字符如何转换整形 string 转化为int

    int i = Integer.parseInt(string);

  6. HDU 5071 Chat(2014鞍山B，模拟)

    http://acm.hdu.edu.cn/showproblem.php?pid=5071 Chat Time Limit: 2000/1000 MS (Java/Others)    Memory ...

  7. iOS UICollectionView 入门 07 点击cell放大图片

    这一节,我们实现通过点击图片将图片放大显示的功能. 首先我们创建一个名为FlickrPhotoViewConroller的类,这个类继承于UIViewController. 改动头文件内容例如以下: ...

  8. shell重定向调试信息

    shell重定向调试信息 fulinux ******************************************************************************* ...

  9. php中用户自定义排序

    php中数组用户自定义排序函数有usort和uasort,前者键值重新排列,后者保持原数组的键值. 举例usrot: usort($filterArr, 'sortArr'); function so ...

  10. TIME-WAIT和CLOSE-WAIT

    系统调优,你所不知道的TIME_WAIT和CLOSE_WAIT 2016-03-11 运维帮 来源微信订阅号:大房说 作者:大房 你遇到过TIME_WAIT的问题吗?   我相信很多都遇到过这个问题. ...