文档对象模型（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. java properties 文件中书写相对路径

    工程src下的properties 文件要引用发布到D:\work\apache-tomcat-7.0.52\webapps\项目名称\certs这个地址下的文件,properties 中的文件路径应 ...

  2. iOS开发-布局基础

    今天我学习了有关布局的知识,以下是我整理出来的需要注意的,也是我个人认为比较重要的细节. 一.自动约束 在我们设置好自动约束布局之后,有时会出现拖动滑动条,左边的Label会跟着放大缩小的问题. 这时 ...

  3. java的向下转型

    class A{ public void fun1(){ System.out.println("A-->public void fun1()"); } public voi ...

  4. paip.c++ 常用类库attilax总结

    paip.c++ 常用类库attilax总结 VCL: WINDOWS平台最好的类库了..推荐使用..开发效率最高. 1 QT..推荐使用..开发效率比较高. 1 GTK(GTKMM)...开发效率没 ...

  5. Firefly distributed模块的原理与twisted中PB远程调用协议

    这些天断断续续在看Firefly, 看了一下distributed模块的设计,其实就是使用的twisted.spread.pb觉得以后要是想用Firefly有必要了解一下twisted, 所以在网上查 ...

  6. 【转】使用Beaglebone Black的I2C （二）——使用C语言和i2c-dev驱动

    在本博客的<使用Beaglebone Black的I2C(一)>中,介绍了BBB上无需编程对i2c总线进行读写操作的方法,本文将介绍如何在c语言程序中使用i2c-dev驱动来操作i2c设备 ...

  7. 有（无）符号char型及其溢出问题

    转载自:http://blog.sina.com.cn/s/blog_70ec9a6f01014j1h.html 1.char的有无符号类型 char 分为有符号性(signed)和无符号型(unsi ...

  8. iOS之用xib给控件设置圆角、边框效果

    xib中为各种控件设置圆角 通过代码的方式设置 @interface ViewController () @property (weak, nonatomic) IBOutlet UIView *my ...

  9. [未完成]关于枚举(Enum)

    今天总结一下枚举相关的知识.先附一段关于枚举的代码: package org.talend.core.model.param; import org.talend.core.i18n.Messages ...

  10. HuffmanTree && HuffmanCode

    如何构造HuffmanTree? Huffman算法: (1)根据给定的n个权值{w1, w2, ...,wn}构成n棵二叉树集合