DOM和BOM详解
1.什么是DOM?
DOM(Document Object Model,文档对象模型),是 W3C 组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口(API)。它的作用是通过这些DOM接口可以改变网页的内容、结构和样式。
在 DOM 模型中,HTML 文档的层次结构被抽象为一个 DOM 树,这个树结构的每一个子节点表示 HTML 文档中的不同内容。
- 文档:一个页面就是一个文档。在 DOM 中使用 document 表示。
- 节点:位于文档中的每个对象都是某种类型的节点。在一个 HTML 文档中,一个对象可以是一个元素节点,也可以是一个文本节点或属性节点,DOM 中使用 node 表示。
- 元素:页面中的所有标签都是元素,
element
类型是基于node
的。它指的是一个元素或一个由 DOM API 的成员返回的element
类型的节点。,DOM 中使用 element 表示。
例如:
DOM 的方法 (methods) 让你可以用特定方式操作这个树,用这些方法你可以改变文档的结构、样式或者内容。同时,元素可以关联上事件处理器,一旦某一事件被触发了,那些事件处理器就会被执行。
2.DOM树节点操作
文档对象模型 (DOM) - Web API 接口参考 | MDN (mozilla.org)
3.DOM事件
DOM 事件模型包括:
- 标准事件模型
- IE事件模型
但 IE事件模型很少用了,所以这里不再进行叙述。
标准事件模型包括三个阶段:
3.1 事件捕获阶段
事件从 document ⼀直向下传播到⽬标元素, 在这个过程中检查经过的节点是否绑定了该类事件的事件监听函数,如果有就执⾏。
3.2 事件处理阶段
事件到达⽬标元素, 触发⽬标元素的监听函数。
3.3 事件冒泡阶段
事件从⽬标元素冒泡到 document , 也是检查经过的节点是否绑定了该类事件的事件监听函数,如果有则执⾏。
3.4 事件处理的时机
事件监听(处理)函数一般有两种写法:
- 在js中向元素的属性添加,例如:
div.onclick = …
- 在html中直接向元素上添加,例如:
<div onclick = “…">
或者,使用 addEventListener
和 removeEventListener
来添加或移除事件监听函数。
而实际上,事件处理函数并不是一定在事件处理阶段被调用,也可以设定在其它阶段!
事件绑定监听函数的方法如下:
addEventListener(eventType,hander,userCapture)
事件移除监听函数的方式如下:
removeEventListener(eventType,hander,useCapture)
可以看到,有三个参数:
- eventType — 事件类型
- hander — 事件处理函数
- useCapture — boolean类型,用于指定是否在捕获阶段进行处理,一般设置为false与IE浏览器保持一致,即只在事件冒泡阶段才执行事件处理函数!设置为 true 就在捕获过程中执行,反之在冒泡过程中执行处理函数
3.5 事件对象
在触发DOM上的事件时都会产生一个对象。
DOM中的事件对象为 event
,其拥有以下属性:
type
:获取事件类型(click)target
:获取事件目标(object)stopPropagation()
方法:阻止事件冒泡preventDefault()
方法:阻止事件的默认行为
4.什么是BOM?
BOM的核心是window
对象,而window
对象又具有双重角色,它既是通过 js 访问浏览器窗口的一个接口,又是一个**Global
(全局)对象**。
这意味着在网页中定义的任何对象、变量和函数,都以window
作为其global
对象。
下面是一些常用的 window
对象身上的方法:
window.close(); //关闭窗口
window.alert("message");
//弹出一个具有OK按钮的系统消息框,显示指定的文本
window.confirm("Are you sure?");
//弹出一个具有OK和Cancel按钮的询问对话框,返回一个布尔值
window.prompt("What's your name?", "Default");
//提示用户输入信息,接受两个参数,即要显示给用户的文本和文本框中的默认值,
//将文本框中的值作为函数值返回
window.status //可以使状态栏的文本暂时改变
window.defaultStatus
//默认的状态栏信息,可在用户离开当前页面前一直改变文本
window.setTimeout("alert('xxx')", 1000);
//设置在指定的毫秒数后执行指定的代码,接受2个参数,要执行的代码和等待的毫秒数
window.clearTimeout("ID"); //取消还未执行的暂停,将暂停ID传递给它
window.setInterval(function, 1000);
//无限次地每隔指定的时间段重复一次指定的代码,参数同setTimeout()一样
window.clearInterval("ID"); //取消时间间隔,将间隔ID传递给它
window.history.go(-1);
//访问浏览器窗口的历史,负数为后退,正数为前进
window.history.back(); //同上
window.history.forward(); //同上
window.history.length //可以查看历史中的页面数
BOM中的其它对象为:
- location
- navigator
- screen
- history
- frames
这些对象称为 window
的子对象,是以属性的方式添加到window对象的。
4.1 document 对象
实际上就是 DOM 中的 document 对象,即 document == window.document
的结果为 true。它是唯一一个既属于 BOM 又属于 DOM 的对象。
4.2 location 对象
location 对象,表示载入窗口的URL,可用window.location
直接引用它。
其身上常用的属性和方法如下:
location.href //当前载入页面的完整URL,如http://www.somewhere.com/pictures/index.htm
location.portocol //URL中使用的协议,即双斜杠之前的部分,如http
location.host //服务器的名字,如www.wrox.com
location.hostname //通常等于host,有时会省略前面的www
location.port
//URL声明的请求的端口,默认情况下,大多数URL没有端口信息,如8080
location.pathname
//URL中主机名后的部分,如/pictures/index.htm
location.search
//执行GET请求的URL中的问号后的部分,又称查询字符串,如?param=xxxx
location.hash
//如果URL包含#,返回该符号之后的内容,如#anchor1
location.assign("http:www.baidu.com");
//同location.href,新地址都会被加到浏览器的历史栈中
location.replace("http:www.baidu.com");
//同assign(),但新地址不会被加到浏览器的历史栈中,不能通过back和forward访问
location.reload(true | false);
//重新载入当前页面,为false时从浏览器缓存中重载,为true时从服务器端重载,默认为false
4.3 navigator 对象
navigator
对象中包含大量有关Web浏览器的信息,在检测浏览器及操作系统上非常有用,也可用window.navigator
直接引用它。
其身上常用的属性和方法如下:
navigator.appCodeName //浏览器代码名的字符串表示
navigator.appName //官方浏览器名的字符串表示
navigator.appVersion //浏览器版本信息的字符串表示
navigator.cookieEnabled //如果启用cookie返回true,否则返回false
navigator.javaEnabled //如果启用java返回true,否则返回false
navigator.platform //浏览器所在计算机平台的字符串表示
navigator.plugins //安装在浏览器中的插件数组
navigator.taintEnabled //如果启用了数据污点返回true,否则返回false
navigator.userAgent //用户代理头的字符串表示
4.4 screen 对象
screen
对象,其用于获取某些关于用户屏幕的信息,同样也可用window.screen
引用它。
其身上常用的属性和方法如下:
screen.width/height //屏幕的宽度与高度,以像素计
screen.availWidth/availHeight //窗口可以使用的屏幕的宽度和高度,以像素计
screen.colorDepth //用户表示颜色的位数,大多数系统采用32位
window.moveTo(0, 0);
window.resizeTo(screen.availWidth, screen.availHeight); //填充用户的屏幕
5. DOM 和 BOM 区别
那么最后,DOM 和 BOM 的区别在哪呢?它们两者之间有什么联系?
首先来看下面这张图:
可以看到,在层次结构中,DOM 最根本的元素 document
是 BOM 的核心对象 window
的一个子对象。所以,DOM 实际上可以看作 BOM 的一个部分。即上面所说的,document == window.document
的结果为 true。
而浏览器提供出来给予访问的是 BOM 对象,从 BOM 对象再访问到 DOM 对象,从而在 js 中可以操作浏览器以及浏览器读取到的文档。
只不过,两者的区别在于:
DOM描述了处理网页内容的方法和接口,BOM描述了与浏览器进行交互的方法和接口。
总结
最后来总结一下:
-
DOM 是文档对象模型,BOM是浏览器对象模型
-
DOM 就是把文档当做一个对象来看待,BOM 是把浏览器当做一个对象来看待
-
DOM 的顶级对象是
document
(实际上是window.document),BOM 的顶级对象是window
-
DOM 主要规定的是操作页面元素,BOM 规定的是浏览器窗口交互的一些对象
-
DOM 是W3C标准规范,BOM 是浏览器厂商在各自浏览器上定义的,兼容性较差