没有合适的资源?快使用搜索试试~ 我知道了~
Javascript之BOM与DOM讲解
需积分: 5 3 下载量 88 浏览量
2023-02-09
14:43:30
上传
评论
收藏 964KB DOCX 举报
温馨提示
试读
43页
配套博客:https://liuyandeng.blog.csdn.net/article/details/51395830
资源推荐
资源详情
资源评论
一.Javascript 组成
JavaScript 的实现包括以下 3 个部分:
ECMAScript(核心)
描述了 JS 的语法和基本对象。
文档对象模型 (DOM)
处理网页内容的方法和接口
浏览器对象模型(BOM)
与浏览器交互的方法和接口
javascript 有三部分构成,ECMAScript,DOM 和 BOM,根据宿主(浏览器)的不同,具体的
表现形式也不尽相同,ie 和其他的浏览器风格迥异,IE 扩展了 BOM,加入了 ActiveXObject
类,可以通过 JavaScript 实例化 ActiveX 对象
1. DOM 是 W3C 的标准; [所有浏览器公共遵守的标准]
2. BOM 是 各个浏览器厂商根据 DOM 在各自浏览器上的实现;[表现为不同浏览器定义有差
别,实现方式不同]
3. window 是 BOM 对象,而非 js 对象;javacsript 是通过访问 BOM(Browser Object
Model)对象来访问、控制、修改客户端(浏览器)
ECMAScript 扩展知识:
① ECMAScript 是一个标准,JS 只是它的一个实现,其他实现包括 ActionScript。
② “ECMAScript 可以为不同种类的宿主环境提供核心的脚本编程能力……”,即 ECMAScript
不与具体的宿主环境相绑定,如 JS 的宿主环境是浏览器,AS 的宿主环境是 Flash。
③ECMAScript 描述了以下内容:语法、类型、语句、关键字、保留字、运算符、对象。
二. DOM, DOCUMENT, BOM, WINDOW 区
别
DOM 是为了操作文档出现的 API,document 是其的一个对象;
BOM 是为了操作浏览器出现的 API,window 是其的一个对象。
BOM 是浏览器对象模型,DOM 是文档对象模型,前者是对浏览器本身进行操作,而后者是
对浏览器(可看成容器)内的内容进行操作
归 DOM 管的:
E 区(就是你说的 document 啦。由 web 开发人员呕心沥血写出来的一个文件夹,里面有
index.html,CSS 和 JS 什么鬼的,部署在服务器上,我们可以通过浏览器的地址栏输入 URL
然后回车将这个 document 加载到本地,浏览,右键查看源代码等。
归 BOM 管的:
A 区(浏览器的标签页,地址栏,搜索栏,书签栏,窗口放大还原关闭按钮,菜单栏等等)
B 区(浏览器的右键菜单)
C 区(document 加载时的状态栏,显示 http 状态码等)
D 区(滚动条 scroll bar)
DOM
DOM 全称是 Document Object Model,也就是文档对象模型。是针对 XML 的基于树的 API。
描述了处理网页内容的方法和接口,是 HTML 和 XML 的 API,DOM 把整个页面规划成由节
点层级构成的文档。
这个 DOM 定义了一个 HTMLDocument 和 HTMLElement 做为这种实现的基础,就是说为了能
以编程的方法操作这个 HTML 的内容(比如添加某些元素、修改元素的内容、删除某些元
素),我们把这个 HTML 看做一个对象树(DOM 树),它本身和里面的所有东西比如
<div></div> 这些标签都看做一个对象,每个对象都叫做一个节点(node),节点可以理解
为 DOM 中所有 Object 的父类。
DOM 有什么用?就是为了操作 HTML 中的元素,比如说我们要通过 JS 把这个网页的标题
改了,直接这样就可以了:
document.title = 'how to make love';
这个 API 使得在网页被下载到浏览器之后改变网页的内容成为可能。
document
当浏览器下载到一个网页,通常是 HTML,这个 HTML 就叫 document(当然,这也是 DOM
树中的一个 node),从上图可以看到,document 通常是整个 DOM 树的根节点。这个
document 包含了标题(document.title)、URL(document.URL)等属性,可以直接在 JS
中访问到。
在一个浏览器窗口中可能有多个 document,例如,通过 iframe 加载的页面,每一个都是
一个 document。
在 JS 中,可以通过 document 访问其子节点(其实任何节点都可以),如
document.body;document.getElementById('xxx');
BOM
BOM 是 Browser Object Model,浏览器对象模型。
刚才说过 DOM 是为了操作文档出现的接口,那 BOM 顾名思义其实就是为了控制浏
览器的行为而出现的接口。
浏览器可以做什么呢?比如跳转到另一个页面、前进、后退等等,程序还可能需要获取
屏幕的大小之类的参数。
所以 BOM 就是为了解决这些事情出现的接口。比如我们要让浏览器跳转到另一个页
面,只需要
location.href = "http://www.xxxx.com";这个 location 就是 BOM 里的一个对象。
由于 BOM 的 window 包含了 document,因此可以直接使用 window 对象的 document
属性,通过 document 属性就可以访问、检索、修改 XHTML 文档内容与结构。因为 document
对象又是 DOM(Document Object Model)模型的根节点。
可以说,BOM 包含了 DOM(对象),浏览器提供出来给予访问的是 BOM 对象,从 BOM
对象再访问到 DOM 对象,从而 js 可以操作浏览器以及浏览器读取到的文档。
window
window 也是 BOM 的一个对象,除去编程意义上的“兜底对象”之外,通过这个对象可以获
取窗口位置、确定窗口大小、弹出对话框等等。例如我要关闭当前窗口:
window.close();
三.浏览器对象模型(BOM)
BOM 和 DOM 的结构关系示意图
BOM 的核心是 Window,而 Window 对象又具有双重角色,它既是通过 js 访问浏览器窗
口的一个接口,又是一个 Global(全局)对象。这意味着在网页中定义的任何对象,变量和
函数,都以 window 作为其 global 对象。
Window 对象包含属性:document、location、navigator、screen、history、frames
Document 根节点包含子节点:forms、location、anchors、images、links
从 window.document 已然可以看出,DOM 的最根本的对象是 BOM 的 window 对象的子对象。
区别:DOM 描述了处理网页内容的方法和接口,BOM 描述了与浏览器进行交互的方法和接
剩余42页未读,继续阅读
资源评论
晨港飞燕
- 粉丝: 857
- 资源: 36
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功