js浏览器环境

1.BOM（Browser Object Model，即浏览器对象模型）。
2.DOM（Document Object Model，即文档对象模型）。
3.浏览器事件。
4.XMLHttpRequest 对象。

在 HTML 页面中引入 JavaScript 代码，我们需要用到< script >标签

浏览器会在页面中按顺序执行所有的 JavaScript 代码，且所有标签中的代码都共享同一个名字空间（namespace），所以变量可以在不同代码块通用。

DOM 是一个标准，由世界万维网联合协会（W3C）负责制定，并拥有多个不同的版本。这些版本我们称之为 level，例如 DOM level 1、DOM level 2 等等。尽管，现代浏览器对这些标准级别的实现程度各不相同，但大致上，它们基本上都完全实现了 DOM level 1。DOM 实际上是对已有功能的标准化。在 DOM 制定之前，各浏览器都有各自访问文档的实现。其中，有相当一部分是旧时代遗留下来的产品（即 W3C 标准产生之前所实现的部分），我们将其统称为 DOM 0。尽管，实际上并没有一个叫做 DOM level 0 的标准存在，但其中相当的一部分已经成了事实上的标准，因为几乎所有的主流浏览器对此提供了全面的支持，也正因为如此，它们中的一些内容也被写入 DOM level 1 标准。通常情况下，页面中的 JavaScript 代码都有一系列可以访问的对象，它们可以分以下几种。
 1.ECMAScript 核心对象：我们在之前几章中讨论过的所有对象都属此类。
 2.DOM：当前载入页面所拥有的对象（页面有时也可以叫做文档）。
 3.BOM：页面以外事物所拥有的对象（即浏览器窗口和桌面屏幕）。

DOM 是一个标准，由世界万维网联合协会（W3C）负责制定，并拥有多个不同的版本。这些版本我们称之为 level，例如 DOM level 1、DOM level 2 等等。尽管，现代浏览器对这些标准级别的实现程度各不相同，但大致上，它们基本上都完全实现了 DOM level 1。
DOM 实际上是对已有功能的标准化。在 DOM 制定之前，各浏览器都有各自访问文档的实现。其中，有相当一部分是旧时代遗留下来的产品（即 W3C 标准产生之前所实现的部分），我们将其统称为 DOM 0。尽管，实际上并没有一个叫做 DOM level 0 的标准存在，但其中相当的一部分已经成了事实上的标准，因为几乎所有的主流浏览器对此提供了全面的支持，也正因为如此，它们中的一些内容也被写入 DOM level 1 标准。

BOM 则不是任何标准的一部分。与 DOM 0 相似，它的一部分对象集合得到了所有主流浏览器的支持，而另一部分则属于特定浏览器的特性。由于 HTML5 将各个浏览器的通用行为进行了标准化，所以其中包含了通用的 BOM 对象。另外，移动设备也包含一些特定的 BOM 对象（HTML5 同样致力于将它们标准化），这些对象一般没有必要在桌面计算机中实现，但对于移动设备则很重要，例如地理位置（geolocation），摄像头接入（camera
access），震动感知（vibration），触摸事件（touch events），通话（telephony）与短信收发（SMS）。

BOM（即浏览器对象模型）是一个用于访问浏览器和计算机屏幕的对象集合。我们可以通过全局对象 window 来访问这些对象。

在 JavaScript 中，每个宿主环境都有一个全局对象。具体到浏览器环中，这就是 window 对象了。环境中所有的全局变量都可以通过该对象的属性来访问。

navigator 是一个用于反映浏览器及其功能信息的对象。

制台提供了一种便利的对象检索功能，其功能涵盖了 BOM 和 DOM 中所有的对象。

location 属性是一个用于存储当前载入页面 URL 信息的对象。

window.history 属性允许我们以有限的权限操作同一个浏览器会话（session）中的已访问页面。
另外，如今更新版的浏览器也对 HTML5 的 History API 提供了支持，这些 API 允许我们在不对整体页面进行重载的情况下更改其中的 URL。这为我们提供了一种近乎完美的动态页面，因为它允许用户对特定的页面进行书签记录，以代表应用程序的某一状态，这样一来，当他们之后返回到（或与朋友们分享）该页面时就能通过该 URL 恢复该应用程序的这个状态。

window.frames 属性是当前页面中所有框架的集合。要注意的是，这里并没有对frame 和 iframe（内联框架）做出区分。而且，无论当前页面中是否存在框架，window.frames 属性总是存在的，并总是指向 window 对象本身。

screen 属性所提供的是浏览器以外的环境信息。

open()是一个可以让我们打开新浏览器窗口的方法（即弹出窗）。如今，
多数浏览器的策略及其用户设置都会阻止浏览器的弹出窗（以防止这种技术的商业化滥用），但在一般情况下，如果该操作是由用户发起的话，我们就应该允许新窗口弹出。否则，如果我们想在页面加载时就打开一个弹出窗的话，多数情况下就会被阻止，因为该操作并不是用户明确发起的。

win.close()方法则是用来关闭新窗口的。

1.调用 window.moveTo(100, 100)将当前浏览器窗口移动到屏幕坐标 x = 100，y = 100 的位置（指的是窗口相对屏幕左上角的坐标）。
2.调用 window.moveBy(10, -10)将窗口的当前位置右移 10 个像素，并同时上移 10 个像素。
3. 调用与前面 move 类方法相似的 window.resizeTo(x, y)和 window.resizeBy (x, y)，只不过这里做的不是移动位置，而是调整窗口的大小

setTimeout()、setInterval()这两个方法主要被用于某些代码片段的执行调度，其中 setTimeout()用于在指定的毫秒数后执行某段既定代码，而 setInterval()则用于每隔一段毫秒数重新执行这段代码。

window.document 是一个 BOM 对象，表示的是当前所载入的文档（即页面）。

DOM（Document Object Model，即文档对象模型）是一种将 XML 或 HTML文档解析成树形节点的方法。通过 DOM 的方法与属性，我们就可以访问到页面中的任何元素，并进行元素的修改、删除以及添加等操作。同时，DOM 也是一套语言独立的 API（Application Programming Interface，即应用程序接口）体系，它不仅在 JavaScript 中有相关的实现，在其他语言中也有实现。例如，我们可以在服务器端用 PHP 的 DOM 实现
（http://php.net/dom）来产生相关的页面。

DOM 既能解析 XML 文档，也能解析 HTML 文档。
HTML 文档本身也可以被当做一种特殊的 XML 文档。
点（包括文档类节点、文本类节点、元素类节点以及属性类节点）都拥有属于自己的 nodeType、nodeName 和 nodeValue 属性。

在 DOM 中，节点类型有 12 种，每种类型分别用一个整数来表示。正如您所见，document 节点的类型是 9，其他最常用的节点类型还有 1（元素）、2（属性）、3（文本）。

如果要检查一个节点是否存在子节点，我们可以调用该节点的 hasChildNodes()方法：

HTML 元素有三个子节点—即 head 元素、body 元素，以及两者之间的空白（大多数浏览器都会将空白算在内，但不是所有浏览器都如此）。我们可以通过该元素中的childNodes 这个类似于数组的集合来访问它们。

通过元素的 hasAttributes()方法来检查该元素中是否存在属性：

我们可以通过该元素的 textContent 属性来获取段落中的文本内容。如果我们使用的是不支持 textContent 属性的老式 IE 浏览器，则通过另一个叫 innerText 的属性来返回相同的值。

getElementsByTagName()以标签名（即元素节点的名字）为参数，返回当前 HTML页面中所有匹配该标签名的节点集合（一个类似于数组的对象）。

关于 DOM 树的导航操作，nextSibling 与 previousSibling 这两个属性也提供了一些便利。

JavaScript 命名规范中，CSS 属性中的短线（即“-”）是不可用的。对于这种情况，我们只需要直接跳过并将下一个单词的首字母大写即可。例如，padding-top 可以写成 paddingTop、margin-left 可以写成 marginLeft 等。

新建节点有：
1.纯DOM方法
2.cloneNode()
3.insertBefore()
三种方法

要想从 DOM 树中移除一个节点，我们可以调用 removeChild()。

JavaScript 最初所能访问的内容只局限于一些 HTML 文档中的元素。其主要由以下一系列集合对象组成：
1.document.images—当前页面中所有图片的集合，等价于 Core DOM 组件中的 document.getElementsByTagName(‘img’)调用。
2. document.applets—等价于document.getElementsByTagName(‘applets’)。
3.document.links。 
4.document.anchors。 
5.document.forms。
其中，document.links 是一个列表，它包含了页面中所有的
标签，也就是页面中所有含有 href 属性的 A 标签。而 document.anchors 中包含的则是所有带 name 属性的链接（即）。
而使用最广泛的还是要数 document.forms 集合了，这是一个标签的列表。

通过 document.write()方法，我们可以在当前页面载入时插入一些 HTML 元素。