第7章浏览器环境

来源：互联网发布：淘宝毛衣链编辑：程序博客网时间：2024/05/27 20:26

BOM

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

window对象再探

在JavaScript中，每个宿主环境都有一个全局对象。具体到浏览器环境中，这就是window对象了。环境中所有的全局变量实际上都是该对象

的属性。

window.navigator

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

Firebug的备忘功能

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

window.location

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

window.history

window.history属性允许我们在同一个浏览器会话(session)中存储有限数量的访问记录。

window.frames

window.frames属性是当前页面中所有frame元素的集合。要注意的是，这里并没有对frame和iframe做出区分。而且，无论当前页面中

是否存在frame元素，window.frames属性总是存在的，并指向了window对象本身。

window.screen

screen属性所提供的是浏览器以外的桌面信息

window.open()/close()

open()是一个可以让我们打开浏览器窗口的方法(即弹出窗)。

window.open()方法主要接受以下参数：

要载入新窗口的URL

新窗口的名字，用于新窗体form标签的属性值。

还有一个以逗号分割的功能性列表

window.moveTo()、window.resizeTo()

window.alert()、window.prompt()、window.confirm()

alert()并不属于ECMAScript，但它是一个BOM方法。除此之外，BOM中还有两个方法可以让我们以系统信息的形式与用户进行交互，

它们分别是：

confirm()方法，它为用户提供了两个选项——OK与Cancel。

prompt()方法，它为用户提供了一定的文本输入功能。

window.setTimeout()、window.setInterval()

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

而setInterval()则用于每隔一段毫秒数重新执行这段代码。

window.document

window.document是一个BOM对象，表示的是当前所载入的文档(即页面)。但它的方法和属性同时也属于DOM对象所涵盖的范围。

DOM

DOM(即文档对象模型)是一种将XML或HTMl文档解析成树形节点的方法。通过DOM的方法与属性，我们就可以访问到页面中的任何元素，

并进行元素的修改、删除以及添加等操作。同时，DOM也是一套语言独立的API体系，它不仅在JavaScript中有相关的实现，在其他语言

中也有实现。

DOM节点的访问

文档节点

document对象给定的就是我们当前所访问的文档。

documentElement

每个XML文档都会有一个用于封装文档中其他内容的根节点。具体到HTML文档上，这个根节点就是<html>标签，我们可以通过document

对象的documentElement属性来访问它。

子节点

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

属性

由于body的第一个子节点是个空白，因此，第二个子节点(索引为1)是实际上的第一个段落。

我们可以通过元素的hasAttributes()方法来检查该元素中是否存在属性。

我们可以通过索引值，或属性名来访问一个属性。除此之外，我们也可以调用getAttribute()方法来获取相关的属性值。

访问标签中的内容

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

innerText的属性来返回相同的值。

另外，我们也可以通过innerHTML属性来解决上述问题。

DOM访问的快捷方法

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

列表中的各项可以用中括号或item()方法来进行索引(从0开始)访问。但我们并不推荐item()方法，与之相比，中括号法显然更具有一

致性，输入也更为简短。

兄弟节点、body元素及首尾子节点

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

DOM节点的修改

新建节点

我们可以用createElement()和createTextNode()这两个方法来创建新节点。而appendChild()方法则可以用来将新节点添加到DOM树结构中。

cloneNode();insertBefore();

移除节点

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

只适用于HTML的DOM对象

访问文档的基本方法

与如今DOM组件可以访问页面中的任何元素()甚至包括注释和空白处不同的是，JavaScript所能访问的内容只局限于一些HTML文档中的元素。其主要

有以下一系列集合对象组合：

document.images；document.applets；document.links；document.anchors；document.forms

document.write()

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

Cookies，Title，Referrer，Domain

document.cookie属性实际上是一个字符串，其中存储了用于往返服务器端与客户端之间的cookie新。

document.title属性则是被用来修改页面在浏览器窗口中所显示的标题的。

document.referrer中记录的是我们之前所访问过的页面URL。

通过document.domain,我们可以对当前所载入页面的域名进行访问。

事件

我们可以为这些事件指定相应的JavaScript函数(它们通常被称为事件监听器或事件处理器)，这样一来，浏览器就会在相关事件发生时执行既定的函数。

下面，我们来看看具体是如何实现的。

内联HTML属性法

最简便的方式就是通过标签的特定属性来添加事件。

元素属性法

关于单击事件函数，我们还有另一种编写方式，那就是将其设置为DOM元素节点的属性。

DOM的事件监听器

捕捉法与冒泡法

捕捉法——单击首先发生在document上，然后依次传递给body、列表、列表项。并最终到达该链接。

冒泡法——单击首先发生在链接上，然后逐层向上冒泡，直至document对象。

阻断传播

防止默认行为

跨浏览器事件监听器

XMLHttpRequest对象

关于XMLHttpRequest对象的用法，主要可以分为两个有效步骤：

发送请求——在这一步骤中，我们需要完成XMLHttpRequest对象的构建，并为其设置事件监听器。

处理响应——在这一步骤中，事件监听器会在服务器的响应信息到达时发出通知，然后代码就会忙于从中提取有用的信息。

0 0

第7章 浏览器环境

BOM