这几个知识点,你真的都吃透了吗?
DOM 全称是 Document Object Model,也就是文档对象模型
DOM 就是针对 html 和 XML 提供的一个 API,就是为了开发人员能操作 HTML 内容(比如添加节点、修改节点、删除节点等),浏览器下载到一个网页时,会将 html 解析成如下结构的 DOM 树,DOM 树中的所有内容,都是一个个节点。
DOM 树
这个 API 使得在网页被下载到浏览器之后改变网页的内容成为可能
来玩点好玩的:
打开 百度一下 ,打开控制台,输入 document.head,可以看到输出了页面的 head 部分内容
百度广告真套路
此时,百度的标签是:
百度一下标签名
再进入控制台,输入:
,看到变化
- document.title = "度娘"
修改后的标签名
同样,如果我们需要修改字体大小时,如下操作:
如果我们要修改页面根元素的字体大小时(rem 布局相关),使用
- document.documentElement.style.fontSize = "24px"
当浏览器下载到一个网页时,通常是 HTML,这个 HTML 就叫 docuemnt,观察 DOM 树 不难发现它也是一个节点,它是整棵 DOM 树的根节点,这个节点包含了标题 document.title,Url docuemnt.URL 等属性,可以直接在 JS 中访问到。
在一个浏览器页面中,可能有多个 document,例如带有 iframe 的页面即是如此,在 document 中,我们还可以通过 ID 来访问元素,如:
- document.getElementById("nodeId")
BOM 是 Browser Object Model,浏览器对象模型。
BOM 是 为了控制浏览器行为而提供的接口。可能出现前进一页,后退一页,跳转至某个页面,手机横竖屏切换,程序还可能需要获取屏幕的大小参数等,例如,页面跳转(向程序外跳转):
- location.href = "https://www.baidu.com"
这个 location 就是 BOM 里的一个对象
打开控制台,我们可以看到除了 href 之外,location 还有以下属性:
location 对象
可以看到我们熟悉的重新加载 reload 和 replace。
和 location 类似,window 也是 BOM 的一个对象,他是我们所谓的根对象,意义同 DOM 中的 document 一致,我们可以通过该对象获取窗口位置,确定窗口大小,弹出对话框等等。
例如我想关闭当前窗口: window.close()
例如我想缓存信息到本地:
- window.sessionStorage.setItem('key', 'value');
例如我想后退一步:
等
- window.history.go( - 1)
甚至,我想看一下我现在在使用什么浏览器 (如查看 andriod 内置 webview):
等等
- window.parent.browser
DOM 是为了操作文档出现的 API,document 是其的一个对象;
BOM 是为了操作浏览器出现的 API,window 是其的一个对象;
DOM 和 BOM 管辖范围
上图中,红框部分即 ABCD 都属于 BOM 内容,绿框部分 E 属于 DOM 内容
来源: http://www.jianshu.com/p/b5699d0a0e67