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

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

转载于:https://www.cnblogs.com/yoran-yang/p/5212912.html

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

JavaScript学习笔记05【高级——DOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
Javascript学习笔记3 Javascript与BOM简介
什么是BOM BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象 ...
JavaScript 学习笔记 - 12 JavaScript 应用示例
目录 12.1 使用可折叠菜单 12.2 添加下拉菜单 12.3 改进下拉菜单 12.4 带说明的幻灯片 12.5 一个娱乐姓名生成器 12.6 柱状图生成器 12.7 样式表切换器 12.1 使用可 ...
JavaScript学习笔记2——JavaScript操作BOM对象
BOM模型 BOM:浏览器对象模型(Browser Object Model) BOM提供了独立于内容的.可以与浏览器窗口进行互动的对象结构 BOM可实现功能弹出新的浏览器窗口移动.关闭浏览器窗口 ...
JavaScript学习笔记(8)——JavaScript语法之运算符
一. 算术运算符: 运算符描述例子结果 + 加 x=y+2 x=7 - 减 x=y-2 x=3 * 乘 x=y*2 x=10 / 除 x=y/2 x=2.5 % 求余数 (保留整数) x=y%2 ...
JavaScript学习笔记：JavaScript获取元素：id,标签名，类名，querySelector,querySelectorall,获取body,html
1.根据ID获取元素 ● 语法:document.getElementById(id) ● 作用:根据ID获取元素对象 ● 参数:id值,区分大小写的字符串 ● 返回值:元素对象或 null 案例代 ...
JavaScript学习笔记(四)(DOM)
JavaScript学习笔记(四) DOM 一.DOM概述二.元素对象 2.1 获取方式 (1).通过ID获取一个元素对象,如果没有返回null (2).通过`标签名`获取一组元素对象,,如果没有返 ...
JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端学习路线笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...

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

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

最新文章

热门文章