BOM DOM

http://www.cnblogs.com/yexiaochai/archive/2013/05/28/3102674.html

DOM
Document Object Model 文档对象模型
一个Window对象有一个document属性引用了Document对象
Document对象表示窗口内容，他是一个巨大的API中的核心对象，他代表操作文档的内容BOM

 浏览器对象模型 Browser Object Model

 说白点就是window这个东东：表示浏览器的一个实例，是访问浏览器窗口的一个接口，也是  ECMAScript规定的Global对象。

 意思是我们定义的所以所有的东西，都与window有关，他是客户端给javascript程序的全局对  象。

BOM一个应用：

对URL的请求总是非常常见的，location对象的获取便可处理之，比如我们经常想获取url 的参数：

 

function getUrlParam(name) {
    var args = {};
    var query = document.location.search.substring(1); //去掉?
    var arr_param = query.split('&');
    for (var i = 0, len = arr_param.length; i < len; i++) {
        var arr_tmp = arr_param[i].split('=');
        if (arr_tmp.length == 2) {
            args[arr_tmp[0]] = decodeURIComponent(arr_tmp[1]);
        }
    }
    if (name && args[name]) return args[name];
    return args;
}
var p = getUrlParam();

 

 P.S.   JS函数调用时可以不加参数（即使定义时有参数也是如此）；发过来也对，定义时没有参数，主体部分可以用 arguments[0]表示第一个参数，等等，arguments.length表示参数个数！

BOM 浏览器对象模型

提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，改变状态栏中的文本，对Cookie的支持，IE还扩展了BOM，加入了ActiveXObject类，可以通过js脚本实例化ActiveX对象等等）

文档结构图

BOM由以一系列相关的对象组成。下图展示了基本的BOM体系结构。

BOM中的对象

Window对象：

是整个BOM的核心，所有对象和集合都以某种方式回接到window对象。Window对象表示整个浏览器窗口，但不必表示其中包含的内容。

Document对象：

实际上是window对象的属性。这个对象的独特之处是唯一一个既属于BOM又属于DOM的对象。从BOM角度看，document对象由一系列集合构成，这些集合可以访问文档的各个部分。

Location对象：

它是window对象和document对象的属性。Location对象表示载入窗口的URL，此外它还可以解析URI.

Navigator对象：

Navigator包含大量Web浏览器相关的信息。各种浏览器支持该对象的属性和方法不尽相同。

Screen对象：

通过其可以获取用户屏幕相关的信息

DOM 文档对象模型

DOM是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。

DOM本身是与语言无关的API，它并不与Java，JavaScript或其他语言绑定。

特定语言的DOM

针对XHTML和HTML的DOM。这个DOM定义了一个HTMLDocument和HTMLElement做为这种实现的基础。

其他的包括SVG的DOM

对于DOM的支持

各种浏览器对于DOM的支持不一样。

Mozila支持最好，几乎所有的DOM Level 2以及部分DOM Level 3。在Opera和Safrai支持所有的DOM Level1和大部分DOM Level2。IE，支持大部分的DOM Level 1。

DOM的各种Level

DOM Level 1 包括DOM Core和DOM HTML。前者提供了基于XML的文档结构图。后者添加了一些HTML专用的对象和方法，从而扩展了DOM Core.

DOM Level 2 引入几个新模块：DOM视图，事件，样式，遍历和范围

DOM Level 3 引入了以统一的方式载入和保存文档的方法。DOM Core被扩展支持所有的XML1.0的特性

DOM1级（DOM Level 1）于1998年10月成为W3C的推荐标准。DOM1级由两个模块组成：DOM核心（DOM Core）和DOM HTML。其中，DOM核心规定的是如何映射基于XML的文档结构，以便简化对文档中任意部分的访问和操作。DOM HTML模块则在DOM核心的基础上加以扩展，添加了针对HTML的对象和方法。

如果说DOM1级的目标主要是映射文档的结构，那么DOM2级的目标就要宽泛多了。DOM2级在原来DOM的基础上又扩充了（DHTML一直都支持的）鼠标和用户界面事件、范围、遍历（迭代DOM文档的方法）等细分模块，而且通过对象接口增加了对CSS（Cascading Style Sheets，层叠样式表）的支持。DOM1级中的DOM核心模块也经过扩展开始支持XML命名空间。

DOM2级引入了下列新模块，也给出了众多新类型和新接口的定义。

DOM视图（DOM Views）：定义了跟踪不同文档（例如，应用CSS之前和之后的文档）视图的接口；

DOM事件（DOM Events）：定义了事件和事件处理的接口；

DOM样式（DOM Style）：定义了基于CSS为元素应用样式的接口；

DOM遍历和范围（DOM Traversal and Range）：定义了遍历和操作文档树的接口。

DOM3级则进一步扩展了DOM，引入了以统一方式加载和保存文档的方法–在DOM加载和保存（DOM Load and Save）模块中定义；新增了验证文档的方法–在DOM验证（DOM Validation）模块中定义。DOM3级也对DOM核心进行了扩展，开始支持XML 1.0规范，涉及XML Infoset、XPath和XML Base。

在阅读DOM标准的时候，读者可能会看到DOM0级（DOM Level 0）的字眼。实际上，DOM0级标准是不存在的；所谓DOM0级只是DOM历史坐标中的一个参照点而已。具体说来，DOM0级指的是Internet Explorer 4.0和Netscape Navigator 4.0最初支持的DHTML。

1. 其他DOM标准

除了DOM核心和DOM HTML接口之外，另外几种语言还发布了只针对自己的DOM标准。下面列出的语言都是基于XML的，每种语言的DOM标准都添加了与特定语言相关的新方法和新接口：

SVG（Scalable Vector Graphic，可伸缩矢量图）1.0；

MathML（Mathematical Markup Language，数学标记语言）1.0；

SMIL（Synchronized Multimedia Integration Language，同步多媒体集成语言）。

还有一些语言也开发了自己的DOM实现，例如Mozilla的XUL（XML User Interface Language，XML用户界面语言）。但是，只有上面列出的几种语言是W3C的推荐标准。

话说最新的w3c草案里还有一个DOM4……….

JavaScript使用心得汇总：从BOM和DOM谈起

本文对JavaScript使用心得，尤其是BOM和DOM的一些概念进行了介绍。

  

JavaScript这个东西，一开始上手觉得没什么，主要用来美化页面而已；但是随着对Web开发的理解更加深入，尤其是对Web 2.0下开发的接触渐多，便会发现JavaScript其实是个十分有用的语言。下面就总结一下JavaScript的使用心得。

先说点什么呢，那就从BOM和DOM说开吧。

JavaScript使用心得之BOM和DOM

自从netscape navigator2.0把js引入到浏览器中，js可谓与浏览器接下了不解之缘，而js在浏览器中执行的速度，也是现在各种各样的浏览器展示其牛*的主要指标之一。那BOM和DOM到底是什么类？

BOM：Browser Object Model，是浏览器相关的一组特性，由于和浏览器相关，那一定没有统一的标准了，原因是，有ms了......，不过庆幸的是，还是有一些事实标准的。

DOM：Document Object Model，这个就是标准了，由著名的w3c制定，目前最高的级别是level 3，不过3还没有彻底完成，目前主流的浏览器都可以支持到（仅仅是支持到哦，并不是完全遵守的）level 2，对html，也就是html4.x，目前最高的是4.01，后来w3c向把html统一向xml靠拢，于是就有了xhtml1.0，再后来，w3c想搞一个xhtml2.0，结果进度缓慢，加之各大厂商又不看好，于是就有了html5.0 （很牛的东东，有待尝试哦）。

对规范有兴趣可以浏览维基上的一篇文章。

JavaScript使用心得之BOM描述

好了，BOM和DOM的历史就先说到这里了，搞点实质性的东东，先说一下BOM的体系结构：

先从window说起，对于window，最简单的一句就是它是表示打开页面的浏览器窗口，并不包含页面的内容。请牢记后一句话，我在最开始的时候，就用它访问过页面的内容，结果当然是访问不到了。

既然是表示浏览器的窗口，那就一定包含：

◆新建窗口（window.open()），

◆关闭窗口(window.close())，

◆改变窗口位置(resizeBy(),resizeTo())，

◆移动窗口（moveBy(),moveTo），

还有一些其固有的特性，比如：

◆打开新的连接，并可以指定打开方式

◆弹出系统对话框(alert(),confirm(),prompt())，

◆设置超时与暂停（setTimeout(),setInterval())，

◆状态栏，

前面的那些操作使用的时候可以查阅文档，当然能记住更好。不过要注意不同的浏览器对这些方法的支持各不一样，Oh，My God，It's  a  confusion of world！后两个操作十分的不专业，最好不要使用。

对于特性要罗嗦一下咯，最后一个特性，不专业，尽量不要使用，第二和第三个，一看就知道了，也没啥说的，第一个还是有必要说一下的。

提一个问题，如何通过js实现在一个新的窗口打开连接，也就是通过js实现类似点击

1. 		< a href='http://www.sina.com' target='_blank'>sina< /a> 

的效果,用location么，错，虽然location有target这个属性，但，那是不行的，那怎么解决类？，答案是使用

1. 		window.open('http://www.sina.com','_blank'); 

这句代码的实际意思是把一个连接在一个指定的框架（frame）内打开，_self,_top,_blank,这些是专有的框架名。

然后再说一说让人迷惑的几个东东，parent,self,top,opener,，怎么样可区分清楚么？

其中self总是等于window，仅是名字不一样而已，不过正是由于这个特点，使用它可以使我们的代码更易于阅读，而top对象和parent对象，本人认为，只有在多框架(frames)下才会被用到，top对象指向最顶层的框架，也就是当一个页面使用了frame或iframe时，才会被用到。最后opener用于window.open()打开的子窗口。

然后下来说一说document和location对象，首先，我在上面的BOM的体系结构图中，将这两个对象标记为了红颜色，为什么类？简单，是由于混乱。

document是一个既属于BOM又属于DOM的对象，而location对象，则是一个既属于window，又属于document的属性。从BOM的角度来看，document对象中包含了页面中一些通用的属性和集合，不过document中的很多属性(alinkColor,bgColor,fgColor,linkColor,vlinkColor)是可以通过css控制的，所以我的建议是能使用css控制的尽量使用css,而剩下的属性(lastModified,referrer,title,URL),基本上没有多大的用处，要说有用的，我认为只有referrer可能有点用，它可以告诉你用户是怎么访问到你的页面的。其实document的主要作用是用于DOM。

location对象表示载入窗口的URL，同时还可以用于解析URL，比如要获得GET请求后的参数可以使用

1. 		location.search 

对于history和navigator对象，history对象提供了go(int),back(),forward()方法，他们的功能类似于浏览器的前进和后退，不过出于安全的考虑，history仅仅提供导航的功能，要想得到用户的浏览历史，仅靠这个对象是不行的。

PS：不过要想得到用户的历史也不是不可能，利用a标签的特点，，开动脑筋想一想吧

navigator对象，，常被用来判断用户的浏览器类型，和用户的操作系统类型。

location对象

location.href-- 返回或设置当前文档的URL
location.search -- 返回URL中的查询字符串部分。例如 http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu 返回包括(?)后面的内容?id=5&name=dreamdu

location.hash -- 返回URL#后面的内容，如果没有#，返回空

location.host -- 返回URL中的域名部分，例如www.dreamdu.com
location.hostname -- 返回URL中的主域名部分，例如www.dreamdu.com

　　　　(注：

JavaScript 中，大多数情况下，我们不会发现 location.host 与 location.hostname 的区别，因为大多数情况下，我们的网页用的是 80 端口。

　　他们的区别：

　　　　location.host 包含端口，比如是 127.0.0.1:81。如果端口是 80，那么就没有端口，就是 127.0.0.1。

　　　　location.hostname 不包含端口，比如是 127.0.0.1。

　　　　)
ocation.pathname -- 返回URL的域名后的部分。例如 http://www.dreamdu.com/xhtml/ 返回/xhtml/
location.port -- 返回URL中的端口部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回8080
location.protocol -- 返回URL中的协议部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容http:
location.assign(url) --  加载 URL 指定的新的 HTML 文档。就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。
location.replace(url) --  该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。通过加载 URL 指定的文档来替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的
location.reload() -- 重载当前页面, 如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档，即ctrl+f5的效果。

 location.href是一个属性，要这样使用： location.href='http://www.example.com' 而location.assign('http://www.example.com') 就是 location.href='http://www.example.com' 至于location.replace('http://www.example.com')与前两者的区别是，在replace之后，浏览历史就被清空了（href与assign方法会产生历史记录）。

history对象

history.go() -- 前进或后退指定的页面数 history.go(num);
history.back() -- 后退一页 back() 方法可加载历史列表中的前一个 URL（如果存在.调用该方法的效果等价于点击后退按钮或调用 history.go(-1)。history.forward() -- 前进一页 forward() 方法可加载历史列表中的下一个 URL。调用该方法的效果等价于点击前进按钮或调用 history.go(1)

navigator对象

navigator.userAgent -- 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
navigator.cookieEnabled -- 返回浏览器是否支持(启用)cookie

具体方法参考http://www.dreamdu.com/javascript/bom/