文档对象模型（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的关系的更多相关文章

  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. 读取.tmx地图

    读取.tmx地图 m_GameMap = CCTMXTiledMap::create("map1.tmx"); this->addChild(m_GameMap,1); 读取 ...

  2. C++学习笔记（四）：枚举

    枚举用来代替静态常量,优点就是可以确定值的范围,而常量则无法确定范围: 常量表示法: ; ; ; ; ; bool func(int type) { //范围检查 || type > ) thr ...

  3. UVa 10465 Homer Simpson (枚举)

    10465 - Homer Simpson Time limit: 3.000 seconds http://uva.onlinejudge.org/index.php?option=com_onli ...

  4. Asp.Net事务和异常处理：

    Asp.Net事务和异常处理: 一.什么是事务处理? 事务处理是一组组和成逻辑工作单元的数据库操作,虽然系统中可能会出错,但事务将控制和维护每个数据库的一致性和完整性. 如果在事务过程中没有遇到错误, ...

  5. 在创建窗口句柄之前,不能在控件上调用 Invoke 或 BeginInvoke。

    本文转载:http://blog.csdn.net/playing9c/article/details/7471918 http://blog.csdn.net/beelinkerlidejun/ar ...

  6. 【07】为多态基类声明virtual析构方法

    1.考虑下面的需要,需要一个工厂方法.工厂方法的规则是:在堆上分配一个子类对象,并返回父类指针.使用完毕,delete父类指针.如果父类的析构方法不是virtual,将直接调用父类的析构方法,导致局部 ...

  7. C# Redis Server分布式缓存编程(二)

    在Redis编程中, 实体和集合类型则更加有趣和实用 namespace Zeus.Cache.Redis.Demo { public class Person { public int Id { g ...

  8. 再探ASP.NET 5(转载)

    就在最近一段时间,微软又有大动作了,在IDE方面除了给我们发布了Viausl Studio 2013 社区版还发布了全新的Visual Studio 2015 Preview. Visual Stud ...

  9. keyStore vs trustStore--转载

    原文:http://lukejin.iteye.com/blog/605634 今天有同事向我问起这两个概念,所以我就记录下.首先我们得澄清一些概念.一个web应用如果需要提供以https的方式访问的 ...

  10. 1、C语言中的函数指针

    一 通常的函数调用 void MyFun(int x); //此处的申明也可写成:void MyFun( int ); int main(int argc, char* argv[]) { MyFun ...