文档对象模型（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. RocketMQ入门（2）最佳实践

    转自:http://www.changeself.net/archives/rocketmq入门(2)最佳实践.html RocketMQ入门(2)最佳实践 一.服务端安装部署 我是在虚拟机中的Cen ...

  2. 如何使得VIM显示行号

    如何使得VIM显示行号: :set number

  3. 戴尔笔记本win8.1+UEFI下安装Ubuntu14.04过程记录

    瞎扯:笔记本刚买不久就想装ubuntu来着,但结果发现BIOS启动方式为UEFI,网上一搜索发现跟曾经的双系统安装方法不一样,看详细教程感觉相当复杂,并且也有点操心折腾跪了这新本本所以一直没有动手.但 ...

  4. MySQL监控模板说明-Percona MySQL Monitoring Template for Cacti

    http://blog.chinaunix.net/uid-16844903-id-3535535.html https://www.percona.com/doc/percona-monitorin ...

  5. ADO.Net的小知识（连接数据库）

    数据库连接分为两种,分别是断开式连接和打开式连接.下面分别和大家分享一下断开时连接的查询: (1)引入命名空间:using System.Data.SqlClient; 该语句用于导入和ADO.Net ...

  6. 启动android程序和虚拟机时候出现如下错误的解决方法

    启动android程序和虚拟机时候出现如下错误的解决方法. 错误重现: [2011-07-13 16:22:48 - Emulator] invalid command-line parameter: ...

  7. Logistic Regression and Classification

    分类(Classification)与回归都属于监督学习,两者的唯一区别在于,前者要预测的输出变量\(y\)只能取离散值,而后者的输出变量是连续的.这些离散的输出变量在分类问题中通常称之为标签(Lab ...

  8. java_Cookie添加和删除

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, ...

  9. About xvfb

    http://blog.csdn.net/span76/article/details/11473315 有时候我们不关注程序是否有界面(比如自动化测试),只要程序在运行就可以了 很感谢 xvfb 这 ...

  10. java基础学习总结六(对象与类、类的属性与方法)

    一:面向过程与面向对象的区别 举例:一个人开门的动作,可以分解为开门,人进去,关门. 面向过程:人作为执行者,1:开门  2:进入   3:关门 面向对象:人作为指挥者,将开门,关门的动作都封装到门上 ...