BOM DOM 区别

  • DOM 操作文档的 API,document 是其的一个对象;
  • BOM 操作浏览器的 API,window 是其的一个对象。

DOM

文档对象模型. Document Object Module.

DOM 针对 HTML/XML 提供的一个 API.

作用: 能以编程的方法操作这个HTML内容: 比如 添加/删除/修改 元素.

把这个html 看作一个 对象树(DOM 树.) 里面所有东西如 div 这些标签都看作一个对象. 每个对象都叫做一个节点 (node) 节点: DOM 中所有object的父类.

DOM 作用

操作 html 中的元素. 这个 API 使得在网页被下载到浏览器之后改变网页的内容成为可能。

比如说我们要通过 JS 把这个网页的标题改了,直接这样就可以了:

document.title = 'how to make love';

Document

浏览器下载的网页 就是document. 一般是整个DOM树的根节点. 这个 document 包含了标题(document.title)、URL(document.URL)等属性,可以直接在 JS 中访问到。

在一个浏览器窗口中可能有多个 document,例如,通过 iframe 加载的页面,每一个都是一个 document。

在 JS 中,可以通过 document 访问其子节点(其实任何节点都可以),如

document.body; document.getElementById(‘xxx’);

BOM

Browser Object Moduel 浏览器对象模型.

  • DOM 是操作文档的接口.
  • BOM 操作浏览器的接口.

浏览器操作 比如: 页面跳转. 前进 后退. .. 所以 BOM 就是为了解决这些事情出现的接口。比如我们要让浏览器跳转到另一个页面,只需要

location.href = “http://www.xxxx.com”;

这个 location 就是 BOM 里的一个对象。

  • window BOM 的一个对象.

通过这个对象可以获取窗口位置、确定窗口大小、弹出对话框等等。例如我要关闭当前窗口:

window.close();

你种一棵小树,给每一片叶子做标志,然后从树根开始找到每一片唯一的叶子。这就是DOM

提供给Javascript用来动态修改文档状态…