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