JavaScript学习笔记(2)——JavaScript和DOM的关系

时间：2022-05-24 17:27:26

　　文档对象模型（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分别加载状态为“开”和“关”的两张灯泡图片，实现点击开关动态开关灯的网页特效。

相关文章