本文主要介绍DOM与BOM来源,方法,内容与应用。
DOm
来源:
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,既有VBScript、ActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。
内容:
HTML DOM (文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树。
HTML DOM 树
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
应用:
- 改变 HTML 元素的内容 (innerHTML)
- 改变 HTML 元素的样式 (CSS)
- 对 HTML DOM 事件对做出反应
- 添加或删除 HTML 元素
BOm
内容
BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。方法
属性名 | 描述 |
---|---|
navigator | 浏览器信息 |
location | 浏览器定位和导航 |
history | 窗口浏览器历史 |
screen | 信息 |
location:
代表浏览器的定位和导航。可以使用 location 来操作 URL 中的各个部分。最常用的有 href 属性,当前访问资源的完整路径。
- assign(url) 载入新的 url,记录浏览记录
- replace(url) 载入新的 url 不记录浏览记录
- reload() 重新载入当前页
history:
浏览器当前窗口的浏览历史。
- back(int) 后退
- forward(int) 前进
- go(int) 正数向前,附属向后
screen:
其中包含屏幕信息。其中 avil- 开头的属性为可用属性,其余则为显示器设备属性。