JS中BOM和DOM之间的关系

1、Javascript组成
JavaScript的实现包括如下3个部分：
一、核心（ECMAScript）：描述了JS的语法和基本对象。
二、文档对象模型 （DOM）：处理网页内容的方法和接口。
三、浏览器对象模型（BOM）：与浏览器交互的方法和接口。

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　　　　BOM和DOM的结构关系示意图

 

 

 

2、BOM（浏览器对象模型）

一、window对象
说明：BOM的核心对象是window，他表示浏览器的一个实例。他既是经过JavaScript访问浏览器窗口的一个接口，又是ECMScript规定的Global对象。

全局做用域

    全局变量不能经过delete操做符删除；

    window对象上的定义可删除；

BOM（Browser Object Model）

浏览器对象模型：将浏览器的各个组成部分封装成为对象

 

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

 

 

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//用户代理头的字符串表示 

 

 

screen对象

screen对象：用于获取某些关于用户屏幕的信息，也可用window.screen引用它 screen.width/height //屏幕的宽度与高度，以像素计 screen.availWidth/availHeight//窗口可使用的屏幕的宽度和高度，以像素计 screen.colorDepth //用户表示颜色的位数，大多数系统采用32位 window.moveTo(0, 0); window.resizeTo(screen.availWidth, screen.availHeight);//填充用户的屏幕 

 

History:历史记录对象

back()：加载 history 列表中的前一个 URL

forward()：加载 history 列表中的下一个 URL

go(参数)：加载 history 列表中的某个具体页面（参数：前进(正数)或后退(负数)几个历史记录）

length：返回当前窗口历史列表中的 URL 数量。

 

3、DOM

Document Object Model 文档对象模型：将标记语言文档的各个组成部分封装为对象。可使用这些对象对标记语言文档进行CRUD的动态操做。 W3C标准中，DOM被分为三个不一样的部分： 1. 核心DOM -针对任何结构化文档的标准模型 2. XML DOM -针对XML文档的标准模型 3. HTML DOM -针对HTML文档的标准模型

Document:文档对象

获取：在HTML DOM模型中能够经过window对象来获取

获取Element对象方法：

getElementById()：根据id属性值获取元素对象。

 

getElementsByTagName()：根据标签名称获取元素对象们，返回值是一个数组

 

getElementsByClassName()：根据Class属性值获取元素对象们，返回值是一个数组

 

getElementsByName()：根据name属性值获取元素对象们，返回值是一个数组

 

建立其余DOM对象方法：

createAttribute(name)：建立Attribute属性对象

 

createComment()：建立Comment注释对象

 

createElement()：建立Element元素对象

 

createTextNode()：建立Text文本对象

Element:元素对象

属性：

previousSibling：获取该元素的前一个节点nextSibling：获取该元素的后一个节点innerHTML：能够获取标签内全部的内容，包括标签innerText：能够获取标签内全部的文本内容，不包括标签方法：

removeAttribute()：删除属性setAttribute()：设置属性

 

document对象

document对象：其实是window对象的属性，document == window.document为true，是惟一一个既属于BOM又属于DOM的对象

document.lastModified//获取最后一次修改页面的日期的字符串表示

document.referrer //用于跟踪用户从哪里连接过来的

document.title //获取当前页面的标题，可读写

document.URL //获取当前页面的URL，可读写

document.anchors[0]或document.anchors["anchName"]//访问页面中全部的锚

document.forms[0]或document.forms["formName"]//访问页面中全部的表单

document.images[0]或document.images["imgName"]// 访问页面中全部的图像

document.links [0]或document.links["linkName"]//访问页面中全部的连接

document.applets [0]或document.applets["appletName"]//访问页面中全部的Applet

document.embeds [0]或document.embeds["embedName"]//访问页面中全部的嵌入式对象

document.write(); 或document.writeln();//将字符串插入到调用它们的位置

 

 

总结DOM和BOM区别：

DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口
1) DOM是W3C的标准[全部浏览器都遵循的标准];
2) DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）;
3) BOM各个浏览器厂商根据DOM在各自浏览器上的实现;[表现为不一样浏览器定义有差异,实现方式不一样;
4) BOM 主要处理浏览器窗口和框架，不过一般浏览器特定的 JavaScript 扩展都被看作 BOM 的一部分。这些扩展包括
window(窗口)、location（地址栏内容相关）、history（历史）、screen（屏幕）、navigator（有不少浏览器相关的内容，一般判断浏览器类型都是经过这个对象）
DOM 是为了操做文档出现的 API，document 是其的一个对象；
BOM 是为了操做浏览器出现的 API，window 是其的一个对象。