BOM与DOM详解

简介: BOM与DOM详解

前言

javascript组成

  • ECMAScript(核心):描述了JS的语法和基本对象。
  • 文档对象模型 :处理网页内容的方法和接口.
  • 浏览器对象模型(BOM):与浏览器交互的方法和接口

一、DOM, DOCUMENT, BOM, WINDOW 区别?

DOM 是为了操作文档出现的 API,document 是其的一个对象;

BOM 是为了操作浏览器出现的 API,window 是其的一个对象

BOM是浏览器对象模型,DOM是文档对象模型,前者是对浏览器本身进行操作,而后者是对浏览器内的内容进行操作.

DOM是什么?

DOM 全称是 Document Object Model,也就是文档对象模型。是针对XML的基于树的API。描述了处理网页内容的方法和接口,是HTML和XML的API,DOM把整个页面规划成由节点层级构成的文档。

DOM 有什么用?就是为了操作 HTML 中的元素,比如说我们要通过 JS 把这个网页的标题改了,直接这样就可以通过dom节点更改: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 是 浏览器对象模型

刚才说过 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 的一个对象,除去编程意义上的“兜底对象”之外,通过这个对象可以获取窗口位置、确定窗口大小、弹出对话框等等。提供了许多API方法。

Window 对象是 JavaScript 层级中的顶层对象。

Window 对象代表一个浏览器窗口或一个框架。

Window 对象会在 或 每次出现时被自动创建


相关文章
|
8月前
|
XML JavaScript API
BOM 和 DOM 的关系
BOM 和 DOM 的关系
|
8月前
|
存储 JavaScript 前端开发
JavaScript函数和BOM及DOM编程(详细总结-无尿点)(一)
JavaScript函数和BOM及DOM编程(详细总结-无尿点)(一)
34 0
|
8月前
|
XML 编解码 JavaScript
JS中的BOM和DOM的介绍与使用
JS中的BOM和DOM的介绍与使用
53 0
|
8月前
|
XML JavaScript 前端开发
JavaScript函数和BOM及DOM编程(详细总结-无尿点)(二)
JavaScript函数和BOM及DOM编程(详细总结-无尿点)(二)
26 0
|
9月前
|
JavaScript
DOM
DOM DOM获取元素 事件三要素 鼠标事件 元素改变 修改属性 表单属性设置 元素样式改变 通过class类名改变 排他思想 获取自定义属性 父节点操作 子节点操作 兄弟节点 创造和添加节点 删除节点 复制节点 注册事件 删除事件 阻止默认行为 阻止事件冒泡 事件委托 常用鼠标事件 键盘事件 BOM事件 页面加载 调整窗口事件 定时器 停止计时器 Location对象 History对象 Offsetleft获取元素偏移 Offset与style的区别 可视区client系列 滚动scroll系列 Mouseover和mousenter区别 动画原理 实现 动画封装 给不同对象添加定时器
71 0
|
29天前
|
JavaScript 前端开发
深入了解 JavaScript 中的 DOM 和 BOM
深入了解 JavaScript 中的 DOM 和 BOM
19 4
|
7月前
|
JavaScript 前端开发 Cloud Native
JavaScript的三大组成部分是什么?JavaScript的核心组成部分解析:语法、BOM和DOM
JavaScript的三大组成部分是什么?JavaScript的核心组成部分解析:语法、BOM和DOM
153 0
JavaScript的三大组成部分是什么?JavaScript的核心组成部分解析:语法、BOM和DOM
|
4月前
|
XML JavaScript 前端开发
JavaScript 之 DOM and BOM 总结
JavaScript 之 DOM and BOM 总结
30 0
|
5月前
|
XML 存储 JavaScript
JavaScript详解DOM和BOM(持续更新)
JavaScript详解DOM和BOM(持续更新)
|
5月前
|
XML JavaScript 前端开发
js中dom和bom有什么区别
js中dom和bom有什么区别
35 0