浏览器对象模型
B O M 入 门 基 本 常 识
剑指前端（前端入门笔记系列）——BOMECMAScript是JavaScript的核心，但如果要在Web中使用JavaScript，那么BOM（浏览器对象模型）则无疑才是真正的核心，BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关，那么，什么是BOM呢？我们可以从这几点解析一下：1.BOM是Browser Object Model的缩写，简称浏览器对象模型。
这个对象就是window2.BOM提供了独立于内容而与浏览器窗口进行交互的对象，也就是BOM是浏览器厂家分别推出3.BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性4.BOM缺乏标准，但是BOM提供了ECMAScript的运行平台5.BOM最初是Netscape浏览器标准的一部分6.BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象为windowwindow对象window对象表示浏览器的一个实例，这就意味着全局作用域中声明的变量、函数都会变成window对象的属性和方法，例如：var age = 29;function sayAge(){return "123";console.log(age === window.age); --trueconsole.log(sayAge === window.sayAge); --true我们可以看到，全局变量age其实就是window.age，而全局函数sayAge就是window.sayAge，只不过window可以省略不写，我们写的全局变量和函数其实都会自动归在window对象名下，那么我们再来验证一下：console.log(parseInt === window.parseInt); --trueconsole.log(parseFloat === window.parseFloat); --trueconsole.log(setInterval === window.setInterval); --true console.log(setTimeout === window.setTimeout); --trueconsole.log(clearInterval === window.clearInterval); --trueconsole.log(clearTimeout === window.clearTimeout); --true console.log(Number === window.Number); --trueconsole.log(Date === window.Date); --trueconsole.log(String === window.String); --trueconsole.log(isNaN === window.isNaN); --true这些都是我们常用的内置函数，它们也都属于window对象【注】抛开全局变量会变成window对象的属性不说，定义全局变量与在window对象上面直接定义属性还是有区别的，区别就是全局变量不能通过delete操作符删除，而直接在window对象上定义的属性可以：var age = 18; --定义全局变量 = "AI-fisher"; --在window对象上定义变量（属性）--在IE9时抛出错误，其他浏览器返回falsedelete window.age; --删除全局变量--在IE9时抛出错误，其他浏览器返回truedelete ; --删除window对象上定义的变量console.log(window.age); --18console.log(); --undefined内部实现的规则是：var语言添加的window属性有一个名为[[Configurable]]的特性，这个特性的值被设置为false，因此这样定义的属性不可以通过delete操作符删除。
bom 信息 概念模型
BOM（Browser Object Model）是指浏览器对象模型，它提供了一个独立于内容的、可以与浏览器窗口进行互动的对象结构。
BOM由多个对象组成，其中代表浏览器窗口的Window 对象是BOM的顶层对象，其他对象都是该对象的子对象。
BOM的信息概念模型主要包括以下几个方面：
Window对象：代表浏览器窗口，是BOM的顶层对象。
它包含了浏览器窗口的各种属性和方法，如窗口大小、滚动位置、历史记录等。
Document对象：代表网页文档，是HTML文档在浏览器中的表示。
它包含了网页的各种属性和方法，如DOM树结构、样式信息等。
History对象：代表浏览器历史记录，提供了访问和操作浏览器历史的方法。
Location对象：代表当前窗口的URL信息，提供了获取和操作URL的方法。
Navigator对象：代表浏览器信息，提供了获取浏览器信息的方法。
Screen对象：代表客户端屏幕信息，提供了获取屏幕信息的方法。
这些对象通过相互之间的属性和方法，可以实现对浏览器窗口的各种操作和交互，从而实现对网页的展示和控制。
ASP 浏览器扩展
ASP 浏览器扩展在各个版本浏览器中，文档对象模型都有其特殊的地方。
一般来说，每发布一个新版本的浏览器，浏览器厂商都会以各种方式扩展document对象，新版本修订了老版本的程序错误，同时添加了对象的属性、方法及事件处理程序等，不断扩充原有的功能。
当然，从新对象模型可以更快捷地执行更多任务的技术层面上来看，每次的浏览器版本更新绝对不是一件坏事，但不同浏览器的对象模型朝着不同方向发展，却给Web程序员将应用程序在不同浏览器之间移植方面带来了相当的难度，导致Web 应用程序的跨平台性较差。
下面讨论文档对象模型发展过程中主要浏览器版本的对象模型，特别强调各种版本的文档对象模型的新特性以及它们和常用编程任务之间的关系。
1．Netscape Navigator浏览器基本对象模型最先在NN2种获得支持，虽然功能很有限，这也为文档对象模型的发展奠定了坚实的基础。
在NN3中通过访问嵌入对象、Applet应用程序、插件等，使第一个简单、类似于DHTML的应用程序的出现成为可能，且脚本语言能访问更多的文档属性和方法。
表8-2中列出了NN9中的document对象新增的主要内容。
表8-2 NN3中document对象新增主要内容增内容图8-3 NN3中document对象新增内容NN9中增加的最重要对象就是image对象，可通过document.images得到文档的一个image数组，然后通过一下语句进行操作：images对象的大多数属性都是只读的，而src可读可写，典型应用是图片翻转在浏览器中打开该文件，如图8-4所示，当鼠标经过图片时，如图8-5所示。
图8-4 鼠标离开时图8-5 鼠标经过时2．Internet Explorer 浏览器IE3是IE家族较早支持文档对象模型的浏览器，其对象模型基于8.1.2节的基本对象模型，但是扩展了几个属性，如frame[]数组等。
IE3中对象模型如图8-6所示。
图8-6 IE3对象模型结构IE4时代，JavaScript脚本被广泛地运用于Web应用程序来实现网页的动态，同时它将每个HTML元素都表示为对象。
TP8_浏览器对象
back ( )方法相当于后退按钮 方法相当于后退按钮 forward ( ) 方法相当于前进按钮 go (1)代表前进 页，等价于 代表前进1页 等价于forward( )方法； 方法； 代表前进 方法 go(-1) 代表后退 页，等价于 代表后退1页 等价于back( )方法； 方法； 方法 Hands-On实训教程系列 实训教程系列
对象简介
现实世界中的一切事物都是对象 对象的描述 外观：在计算机语言中称为对象的属性 行为：在计算机语言中称为对象可以实现的方法 例如：一部手机是一个对象 属性 品牌 颜色 大小 重量 方法 接打电话 收发短信 看视频 听音乐
Hands-On实训教程系列 实训教程系列
JavaScript 对象简介
location对象 对象 Location 对象
属性
名称 host hostname href 说明 设置或检索位置或 URL 的主机名和端口号 设置或检索位置或 URL 的主机名部分 设置或检索完整的 URL 字符串
方法
名称 assign("url") reload() 说明 加载 URL 指定的新的 HTML 文档。 重新加载当前页
Hands-On实训教程系列 实训教程系列
window对象常用的方法和事件 对象常用的方法和事件
常用的方法
名称 alert ("提示信息") confirm("提示信息“) open ("url") close ( ) setTimeout("函数", 毫秒数) 说明 显示一个带有提示信息和确定按钮的对话框 显示一个带有提示信息、确定和取消按钮的对话框 打开具有指定名称的新窗口，并加载给URL 所指定 的文档 关闭当前窗口
ASP DOM简介
ASP DOM简介文档对象模型定义了JavaScript可以进行操作的浏览器，描述了文档对象的逻辑结构及各功能部件的标准接口。
主要包括如下方面：●核心JavaScript语言参考（数据类型、运算符、基本语句、函数等）。
●与数据类型相关的核心对象（String、Array、Math、Date等数据类型）。
●浏览器对象（window、location、history、navigator等）。
●文档对象（document、images、form等）。
JavaScript使用两种主要的对象模型：浏览器对象模型（BOM）和文档对象模型（DOM），前者提供了访问浏览器各个功能部件，如浏览器窗口本身、浏览历史等的操作方法；后者则提供了访问浏览器窗口内容，如文档、图片等各种HTML 元素以及这些元素包含的文本的操作方法。
在早期的浏览器版本中，浏览器对象模型和文档对象模型之间没有很大的区别。
观察下面的简单HTML代码：行描述,其中各H TML 的每个标记都作为一个对象进行相关操作，如图8-1所示。
图8-1 DOM模型可以看出，HTML为根元素对象，可代表整个文档。
HEAD 和 BODY 两个分支，位于于同一层次，为兄弟关系，存在同一父元素对象，但又有各自的子元素对象。
在支持脚本的浏览器发展过程中，出现了如下6种不同的文档对象模型，如表8-1所示：表8-1 文档对象模型的各个版本及浏览器支持DOM 不同版本给客户端程序员带来了很多的挑战，编写当前浏览器中最新对象模型支持的 JavaScript 脚本相对比较容易，但如果使用早期版本的浏览器访问这些网页，将会出现不支持某种属性或方法的情况。
如果要使设计的网页能运行于绝大多数浏览器中，显而易见将是个难题。
因此，W3C DOM对这些问题做了一些标准化工作，新的文档对象模型继承了许多原始的对象模型，同时还提供了文档对象引用的新方法。
下面介绍在所有支持脚本的浏览器中均可实现的最低公用标准的文档对象模型：基本对象模型。
前端面试常见知识点
前端⾯试常见知识点1、JavaScript this指针、闭包、作⽤域this：指向调⽤上下⽂闭包：内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。
当其中⼀个这样的内部函数在包含它们的外部函数之外被调⽤时，就会形成闭包。
闭包的好处：（1）不增加额外的全局变量，（2）执⾏过程中所有变量都是在匿名函数内部。
闭包的缺点：（1）滥⽤闭包函数会造成内存泄露，因为闭包中引⽤到的包裹函数中定义的变量都永远不会被释放，内存消耗很⼤，所以不能滥⽤闭包，否则会造成⽹页的性能问题，在IE中可能导致内存泄露。
解决⽅法是，在必要的时候，及时释放这个闭包函数,(在退出函数之前，将不使⽤的局部变量全部删除。
)（2）闭包会在⽗函数外部，改变⽗函数内部变量的值。
所以，如果你把⽗函数当作对象（object）使⽤，把闭包当作它的公⽤⽅法（Public Method），把内部变量当作它的私有属性（private value），这时⼀定要⼩⼼，不要随便改变⽗函数内部变量的值。
作⽤域：作⽤域就是变量与函数的可访问范围，即作⽤域控制着变量与函数的可见性和⽣命周期。
在JavaScript中，变量的作⽤域有全局作⽤域和局部作⽤域两种。
全局作⽤域:在代码中任何地⽅都能访问到的对象拥有全局作⽤域（1）最外层函数和在最外层函数外⾯定义的变量拥有全局作⽤域（2）所有末定义直接赋值的变量⾃动声明为拥有全局作⽤域（3）所有window对象的属性拥有全局作⽤域局部作⽤域（Local Scope） :和全局作⽤域相反，局部作⽤域⼀般只在固定的代码⽚段内可访问到，最常见的例如函数内部，所有在⼀些地⽅也会看到有⼈把这种作⽤域称为函数作⽤域，2. Javascript作⽤域链?理解变量和函数的访问范围和⽣命周期，全局作⽤域与局部作⽤域的区别，JavaScript中没有块作⽤域，函数的嵌套形成不同层次的作⽤域，嵌套的层次形成链式形式，通过作⽤域链查找属性的规则需要深⼊理解。
传智 韩顺平 html+css+javascrtpt 课程笔记3(吐血整理)
javascript 3=============================================================================== 1.Dom（文档对象模型）编程简介DOM = Document Object Model(文档对象模型)，根据W3C的DOM规范，DOM是HTML 与XML的应用编程接口（API），它将整个页面映射为一个由层次节点组成的文件。
编程人员通过访问dom 对象，就可以实现对浏览器本身、网页文档、网页文档中元素的操作，从而控制浏览器和网页元素的行为和外观。
2.html dom层次图dom编程的核心是各个dom 对象。
HTML DOM定义了访问和操作HTML文档的标准方法。
HTML DOM把HTML文档呈现为带有元素、属性和文本的树结构(节点树)，每个节点是一个HTML DOM内置对象。
3.BOM（浏览器对象模型）介绍通过使用BOM，可移动窗口、更改状态栏文本。
bom 是w3c 组织提出的，他建议所有的浏览器都应当遵循这样的设计规范。
可以说bom 和dom 关系密切, 相互影响，bom 为纲，dom为目，我们可以简单的理解，dom 是bom 中document的具体实现。
要求浏览器必须支持4.常用dom对象window对象window 对象表示一个浏览器窗口或一个框架。
在客户端JavaScript中，Window 对象是全局对象，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来用。
注：在使用window对象的方法和属性的时候，可以不带window，如下window.alert(“韩顺平!”)等价于：alert(“韩顺平”)。
常用方法和属性：✧alert() 显示消息和一个确认按钮的警告框✧confirm() 显示消息以及确认按钮和取消按钮的对话框✧setInterval() 按照指定的周期(毫秒计)来循环调用函数或计算表达式✧clearInterval() 取消由setInterval()设置的定时器✧setTimeout() 指定的毫秒数后调用一次函数或计算表达式✧clearTimeout() 取消由setTimeout()设置的定时器✧moveTo() 把窗口的左上角移动到一个指定的坐标✧moveBy() 可相对窗口的当前坐标把它移动指定的像素✧resizeBy() 按照指定的像素调整窗口的大小✧resizeTo() 把窗口的大小调整到指定的宽度和高度✧open() 打开一个新的浏览器窗口或查找一个已命名的窗口✧close() 关闭窗口✧closed 返回窗口是否已被关闭✧status 设置窗口状态栏的文本✧opener 返回对创建此窗口的窗口的引用✧onload 页面装载✧onunload 关闭窗口案例：一个js版用户登录系统，当用户输入顺平密码是123，就跳到第二个页面，5秒后，自动跳转到第三个页面。
JAVASCRIPT笔试题参考整理(答案)
A. 20 B. 18 C. 14 D. 12 正确答案为：B 第 3 题. 下面对于 JavaScript 中的单选按扭（Radio）的说法正确的是（）。 （选择两项） A. 单选按钮可以通过单击“选种”和“未选中”选项来进行切换 B. 单选按钮没有 checked 属性 C. 单选按钮支持 onClick 事件 D. 单选按钮的 Length 属性返回一个选项组中单选项的个数 正确答案为：AC 第 4 题. 下面哪个选项中的对象与浏览列表有关() A. location,history B. window,location C. navigator,window D. historylist,location 正确答案为：A 第 5 题. 下列（）标记符属性为布尔属性（即只需要指定属性的存在，而不用指定其值的 标记符属性）。（选择一项）
A. <input type="text" onChange="alert(this.value)"> B. <input type="text" onClick="alert(this.value)"> C. <input type="text" onChange="alert(text.value)"> D. <input type="text" onClick="alert(value)"> 正确答案为：A 第 23 题. window 对象的 open 方法返回的是() A. 没有返回值 B. boolean 类型，表示当前窗口是否打开成功 C. 返回打开新窗口的对象 D. 返回 int 类型的值，开启窗口的个数 正确答案为：C 第 24 题. 分析下面的 JavaScript 代码段： function employee(name,code) { ="wangli"; this.code="A001"; } newemp=new employee("zhangming",'A002'); document.write("雇员姓名:"+ + "<br>"); document.write("雇员代号:"+ newemp.code +"<br>");
B O M 入 门 基 本 常 识
JavaScript BOM即浏览器对象模型(Browser Object Model) 快速入门1.Window(窗口)获取文档显示区域的高度和宽度获取外部窗体的宽度和高度打开一个新的窗口2.Navigator即浏览器对象，提供浏览器相关的信息打印浏览器相关信息3.Screen对象表示用户的屏幕相关信息返回用户的屏幕大小，以及可用屏幕大小4.History用于记录访问历史（1）返回上一次的访问（2）返回上上次的访问5.Location表示浏览器中的地址栏刷新当前页面跳转到另一个页面6.弹出框7.JavaScript计时器只执行一次不停地重复执行终止重复执行BOM即浏览器对象模型(Browser Object Model)1.Window(窗口)获取文档显示区域的高度和宽度一旦页面加载，就会自动创建window对象，所以无需手动创建window对象。
通过window对象可以获取文档显示区域的高度和宽度document.write("文档内容");document.write("文档显示区域的宽度"+window.innerWidth);document.write("br");document.write("文档显示区域的高度"+window.innerHeight);获取外部窗体的宽度和高度所谓的外部窗体即浏览器，可能用的是360，火狐，IE, Chrome 等等。
document.write("浏览器的宽度:"+window.outerWidth);document.write("br");document.write("浏览器的高度:"+window.outerHeight);打开一个新的窗口有的时候，你碰到一些网站会自动打开另一个网站，那么是怎么做到的呢?就是通过window的open方法做到的function openNewWindow(){myWindow=window.open("-");button onclick="openNewWindow()"打开一个新的窗口-button window.open("-")打开就是根目录2.Navigator即浏览器对象，提供浏览器相关的信息打印浏览器相关信息script type="text-javascript"document.write("p浏览器产品名称：");document.write(navigator.appName + "-p");document.write("p浏览器版本号：");document.write(navigator.appVersion + "-p");document.write("p浏览器内部代码：");document.write(navigator.appCodeName + "-p");document.write("p操作系统：");document.write(navigator.platform + "-p");document.write("p是否启用Cookies：");document.write(navigator.cookieEnabled + "-p");document.write("p浏览器的用户代理报头：");document.write(erAgent + "-p");3.Screen对象表示用户的屏幕相关信息返回用户的屏幕大小，以及可用屏幕大小如果是在台式电脑上，通常看到的可用区域的高度会比屏幕高度小一点，因为有任务栏的存在。
什么是DOM
什么是DOM？？？DOM 是Document Object Model的缩写，即文档对象模型！理解为一套浏览器解读和显示的标准！dom提供了很多标签和页面样式标准，一定的接口（方法）规定浏览器需要完成一定的操作，单单javascript只能组成一些算法，实际上没法操作页面！只有通过DOM对HTML 和XML文档进行读取，搜索，修改，添加和删除等操作来间接操作页面样式。
DOM是独立于语言和平台的一套标准接口，定义了构成DOM的不同对象，比恩没有提供特定的实现，可以用任何编程语言实现。
利用DOM中的对象，开发人员可以对HTML和XML文档进行读取，搜索，修改，添加和删除等操作。
W3C DOM提供了一组描述HTML及XML文件的标准对象和一个用来访问和操作这类文件的标准界面。
从面向对象的角度看，可以把HTML文档和XML文档看成是一个对象。
一个XML文档对象可以包含其他的对象，如节点对象。
在DOM中有相应的对象来对应实际XML文档的对象。
DOM规范中提供了一组对象用来实现对文档结构的访问。
各种基于DOM规范的解析器必须按照DOM规范在内存中建立数据模型。
DOM规范的核心是树模型。
解析XML文件的解析器，通过读入XML文件在内存中建立一个树模型，（通过特定算法存储数据，也通过相应的算法操作数据）DOM是一组API接口，接口里面存放的不同类型的未实例化对象对应着XML文档中不同类型的节点和数据。
用编程语言实现这些接口，就可以通过对象来操作相应的XML文档。
DOM为一套规范（包括代码解析标准和代码组织标准）如：DOM文档：interface document{.//有很多方法，每个方法的实现文本也都给出来了}interface Node{}interface NodeList{}interfact NamedNodeMap{}interfact Element{}interfact Text{}通过每个接口的方法的实现来创建对象（这些对象也都已经定义好了）如通过document接口创建document对象，一个document对象其本质就是一个HMTL文档，即为一个htnl标记。
JavaScript前端开发案例教程 第2版 第1章 初识JavaScript
网景公司在网景导航者2.0浏览器中正式内置了JavaScript语言。其后，微软公司开发了一种与 JavaScript语言相近的JScript语言，内置于Internet Explorer 3.0浏览器发布，与网景导航者浏 览器竞争。 后来，网景公司将JavaScript语言提交ECMA国际（前身为欧洲计算机制造商协会），希望 JavaScript能够成为国际标准。
1.1.1 JavaScript概述
JavaScript 是 Web 开 发 领 域 中 的 一 种 功能强大的编程语言，主要用于开发 交互式的网页。我们在计算机、手机 等设备上浏览的网页，其多数交互逻 辑都可以通过JavaScript实现。
1.1.1 JavaScript概述
HTML、CSS和JavaScript的区别
1.1.2 JavaScript的由来
先定一个小 目标！
了 解 JavaScript 的 由 来 ， 能 够 说 出 JavaScript的发展历史
1.1.2 JavaScript的由来
1995年
网景通信公司（Netscape Communications Corporation，简称网景公司）为网景导航者 （Netscape Navigator）浏览器开发了JavaScript语言。
1.1.3 JavaScript的组成
JavaScript组成部分介绍如下。
ECMAScript：规定了JavaScript的编程语法和基础核心内容，是所有浏览器厂商共同遵守的一套 JavaScript语法工业标准。
DOM：文档对象模型，是W3C组织制定的用于处理HTML文档和XML文档的编程接口，它提供了 对文档的结构化表述，并定义了一种方式使程序可以对该结构进行访问，从而改变文档的结构、样 式和内容。
HTMLBrowserBOM对象
说明
assign()
载入一个新的文档
reload()
重新载入当前文档
replace()
用新的文档替换当前文档
appVersion
返回浏览器的平台和版本信息
cookieEnabled
返回指明浏览器中是否启用 cookie 的布尔值
platform
返回运行浏览器的操作系统平台
userAgent
返回由客户机发送服务器的user-agent 头部的值
Navigator 对象方法：
方法
描述
javaEnabled()
2. Navigator 对象：包含浏览器信息。如：获取浏览器名称、版本信息、操作系统平台信息等等。
3. Screen 对象：包含屏幕信息。如：获取屏幕高度、宽度等等。
4. History 对象：可对当前页的浏览历史进行操作，如：前进、后退等。
5. Location 对象：可对当前页面的URL进行操作，如：导航到新的页面、获取URL信息等。
返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
getComputedStyle()
获取指定元素的 CSS 样式。
matchMedia()
该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。
moveBy()
可相对窗口的当前坐标把它移动指定的像素。
已废弃。 该方法已经使用了 scrollTo() 方法来替代。
scrollBy()
按照指定的像素值来滚动内容。
scrollTo()
把内容滚动到指定的坐标。
setInterval()
按照指定的周期（以毫秒计）来调用函数或计算表达式。
javascript知识点
javascript知识点JavaScript（简称“JS”）是一种直译式脚本语言，是一种动态类型的、弱类型的、基于原型的语言，内置支持类型。
它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML 网页增加动态功能。
JavaScript知识点包括：1、JavaScript 核心：JavaScript 是一种脚本语言，它支持面向对象的编程，也支持函数式编程，以及命令式编程等多种风格。
JavaScript 的核心包括：语法、变量、运算符、表达式、关键字、语句、注释和函数。
2、DOM（文档对象模型）：DOM 将 HTML 文档分解成一系列可访问的节点，它们可以使用 JavaScript 来操作，例如添加、删除、修改和查找元素。
3、BOM（浏览器对象模型）：BOM 提供了一系列的API，用于访问浏览器的特性，例如窗口、导航历史、计时器等，可以使用 JavaScript 来操作。
4、Ajax：Ajax 是一种异步的 Web 开发技术，可以使用 JavaScript 和 XMLHttpRequest 对象来访问服务器，从而实现异步数据交互和更新网页内容。
5、jQuery: jQuery 是一套前端 JavaScript 库，可以通过简单的 API 来操作 DOM，实现动画效果、事件处理、Ajax 交互等。
6、Node.js：Node.js 是一个基于 JavaScript 语言的服务端开发平台，可以使用 JavaScript 编写服务端应用程序，并且可以与浏览器端的 JavaScript 代码共享同一种 API。
7、AngularJS：AngularJS 是一个前端 JavaScript 框架，可以使用 AngularJS 快速开发 Web 应用，它拥有模块、控制器、视图、指令等概念，使得前端开发变得更加容易。
javascript中的BOM与DOM、JS核心
JavaScript的核心是基于ECMAScript的，ECMAScript是与运行环境无关的语言，浏览器是ECMAScript的一个众所周知的运行环境，出了浏览器，js还可以运行在ps等等中。
javacsript是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于BOM的window包含了document，window对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用window对象的document属性，通过document 属性就可以访问、检索、修改XHTML文档内容与结构。
因为document对象又是DOM （Document Object Model）模型的根节点。
可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。
其中DOM包含：windowWindow对象包含属性：document、location、navigator、screen、history、framesDocument根节点包含子节点：forms、location、anchors、images、links简记BOM:[wdlnshf]我到了你随后发简记DOM:[flail]服了爱了这些对象提供了一系列属性和方法，通过操作这些属性和使用这些方法，就可以实现操作浏览器窗体以及操作浏览器中载入的xhtml文档。
所以，使用javascript，主要就是使用js的基本语句以及BOM和DOM提供的对象的属性和方法，来操作各个BOM对象的属性以及各个DOM节点的属性甚至是结构，从而控制浏览器窗口行为和文档内容及其展示。
------------------------JavaScript这个东西，一开始上手觉得没什么，主要用来美化页面而已；但是随着对Web 开发的理解更加深入，尤其是对Web 2.0下开发的接触渐多，便会发现JavaScript其实是个十分有用的语言。
第6章 BOM 教学设计
用户执行一个操作后，显示执行结果，在页面中停留5秒，然后自动跳转到其他页面。
2.开发思路
通过定时器和location来实现跳转功能。
3.代码编写
四、知识巩固
（1）回顾上课前的学习目标，对本节课知识点进行总结。
（2）使用博学谷系统下发课后作业。
第三学时
（navigator对象、screen对象、动手实践：红绿灯倒计时）
演示如何获取这些信息。
注意window.open()方法打开的窗口和选项卡（Tab），FireFox和Chrome浏览器才支持口位置和大小的调整。
10.框架操作
回顾HTML中的框架的使用。
利用JavaScript来对框架进行操作。
注意JavaScript对框架操作的限制，无法读写跨域内容。
11.定时器
一、回顾上节课内容
（1）对上节课布置的作业以及学生提出的问题进习方向。
掌握navigator对象的常用属性和方法。
掌握screen对象的常用属性和方法。
掌握红绿灯倒计时案例的开发。
二、知识讲解
1.navigator对象
该对象用于获取浏览器的相关信息。
4.BOM与DOM的关系
DOM是W3C标准，是所有浏览器公共遵守的规则。而BOM是各浏览器根据DOM在各自浏览器上的实现，主要处理浏览器的窗口和框架。
区别：DOM处理网页内容，BOM与浏览器进行交互。
5.常用BOM对象介绍
document对象：即DOM对象，用来处理网页内容。
history对象：记录浏览器的访问历史记录，常用于开发前进与后退功能。
《JavaScript前端开发案例教程》
教学设计
课程名称：JavaScript前端开发案例教程
对象模型、动态模型和功能模型。
对象模型、动态模型和功能模型。
下载提示：该文档是本店铺精心编制而成的，希望大家下载后，能够帮助大家解决实际问题。
文档下载后可定制修改，请根据实际需要进行调整和使用，谢谢！本店铺为大家提供各种类型的实用资料，如教育随笔、日记赏析、句子摘抄、古诗大全、经典美文、话题作文、工作总结、词语解析、文案摘录、其他资料等等，想了解不同资料格式和写法，敬请关注！Download tips: This document is carefully compiled by this editor. I hope that after you download it, it can help you solve practical problems. The document can be customized and modified after downloading, please adjust and use it according to actual needs, thank you! In addition, this shop provides you with various types of practical materials, such as educational essays, diary appreciation, sentence excerpts, ancient poems, classic articles, topic composition, work summary, word parsing, copy excerpts, other materials and so on, want to know different data formats and writing methods, please pay attention!对象模型、动态模型和功能模型是软件开发过程中重要的概念。
Javascript专业课件- 第8课
IT教育成就人生
索迪教育
8.2.6 框架对象 frames
对应于框架页面，每个框内容相当于一个 window对象
IT教育成就人生
索迪教育
8.2.7 屏幕对象 screen
代表当前窗口屏幕 属性：
height width
IT教育成就人生
索迪教育
8.2.8 事件对象 event
索迪教育
8.2.2 文档对象 Document 及其属性
代表了 HTML 文档的内容 属性：
bgColor/fgColor 背/前景色 linkColor/aLinkColor/vLinkColor url 地址 Title 标题
集合：
links forms all 链接集合 表单集合 所有对象集合
索迪教育
8.2 IE浏览器对象模型
document (文档) history (历史) forms (表单)
window (窗口)
location (位置)
navigator (导航)
frames(框架)
screen (屏幕) event (事件)
IT教育成就人生
索迪教育
8.2.1 窗口对象 Window
用window.dialogArguments得到参数 用window.returnValue返回值
showModelessDialog(Url,参数对象,格式串) Close 关闭窗口 setTimeout("延迟方法",延迟时间) IT教育成就人生 window.clearTimeout(ID);
IT教育成就人生
索迪教育
BOM——浏览器对象模型(Browser Object Model)
BOM——浏览器对象模型(BrowserObject Model)什么是BOM？∙BOM是Browser Object Model的缩写，简称浏览器对象模型∙BOM提供了独立于内容而与浏览器窗口进行交互的对象∙由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window ∙BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性∙BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C（WHATWG,WebHypertextApplicationTechnologyWorkingGroup——网页超文本应用程序技术工作组目前正在努力促进BOM的标准化）∙BOM最初是Netscape浏览器标准的一部分基本的BOM体系结构图能利用BOM做什么？BOM提供了一些访问窗口对象的一些方法，我们可以用它来移动窗口位置，改变窗口大小，打开新窗口和关闭窗口，弹出对话框，进行导航以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。
但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象，以使得我们可以通过这个入口来使用DOM的强大功能！！！window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。
由于window是顶层对象，因此调用它的子对象时可以不显示的指明window对象，例如下面两行代码是一样的：window -- window对象是BOM中所有对象的核心。
window对象表示整个浏览器窗口，但不必表示其中包含的内容。
此外，window还可用于移动或调整它表示的浏览器的大小，或者对它产生其他影响。
window子对象∙document 对象∙frames 对象∙history 对象∙location 对象∙navigator 对象∙screen 对象window对象关系属性∙parent：如果当前窗口为frame，指向包含该frame的窗口的frame （frame）∙self ：指向当前的window对象，与window同意。
JAVA Script 教程PPT
6.3 frame对象 对象
frame对象的属性和方法 对象的属性和方法
尽管被称为frame对象，但是它是由 对象，但是它是由HTML标记语言创建，所以严格说来 标记语言创建， 尽管被称为 对象 标记语言创建 中这种对象是不存在的。 ，在JavaScript中这种对象是不存在的。 中这种对象是不存在的 如果一个浏览器窗口包含了若干个框架，那么每个框架不过是window对 如果一个浏览器窗口包含了若干个框架，那么每个框架不过是 对 象的一个实例，它们具有的属性、支持的方法和事件处理器都与window 象的一个实例，它们具有的属性、支持的方法和事件处理器都与 对象相同。 对象相同。 不过，在表示顶层浏览器窗口的 对象与表示框架的window对象之 不过，在表示顶层浏览器窗口的window对象与表示框架的 对象与表示框架的 对象之 还存在以下几点差异： 间，还存在以下几点差异： 如果设置了框架的defaultStatus属性，只有当鼠标在那个框架中时， 属性，只有当鼠标在那个框架中时， 如果设置了框架的 属性 制定的状态信息才会显示出来。 制定的状态信息才会显示出来。 顶层浏览器窗口的top属性和 属性引用的总是顶层窗口自身。 顶层浏览器窗口的 属性和parent属性引用的总是顶层窗口自身。 属性和 属性引用的总是顶层窗口自身 这两个属性只有对框架来说才真正有用。 这两个属性只有对框架来说才真正有用。 方法close()对表示框架的 对表示框架的window对象来说没有用。 对象来说没有用。 方法 对表示框架的 对象来说没有用
6.2
6.1 JavaScript对象模型 对象模型
浏览器对象模型
6.3
6.1 JavaScript对象模型 对象模型
浏览器对象模型中的层次 窗口（ 窗口（window）对象是浏览器对象模型中定义的其他所有对象 ）对象是浏览器对象模型中定义的其他所有对象 页面内容的区域。 的父类。它代表浏览器窗口中显示HTML页面内容的区域。 使 的父类。它代表浏览器窗口中显示 页面内容的区域 用当前窗口的属性和方法时，并不需要去识别，因为浏览器默 用当前窗口的属性和方法时， 并不需要去识别， 因为浏览器默 的是当前窗口。 认的是当前窗口。 文档（ 页面。 文档（document）对象代表装载到窗口中的 ）对象代表装载到窗口中的HTML页面。它包 页面 含了其他一些常用的对象，例如form、link、image、layer等。 含了其他一些常用的对象，例如 、 、 、 等 表单（ 表单 （ form） 对象由许多其他重要的对象组成 ， 例如 ） 对象由许多其他重要的对象组成， 例如text、 、 button、radio、checkbox、select等，这些对象通常在 、 、 、 等 这些对象通常在Web页面 页面 中使用，是用户和页面动态交互的关键。 中使用，是用户和页面动态交互的关键。 浏览器对象的值可以通过浏览器对象模型层次来获得， 浏览器对象的值 可以通过浏览器对象模型层次来获得，即使用 可以通过浏览器对象模型层次来获得 JavaScript，按照从顶层到底层的路径顺序，便可以设置或者访 ，按照从顶层到底层的路径顺序， 问某个属性的值。 问某个属性的值。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Links数组：该数组代表文档中的所有超链接。数组中的每一个元素都是一个Link对象。每一个Link对象都对应着HTML文档中的一个包含href属性的<a>标签，通过Link对象可以获得超链接中URL的各部分信息。
Screen对象：该对象代表当前显示器的信息。使用Screen对象可以获得用户显示器的分辨率、可用颜色数量等信息。
Document对象代表HTML文档，而HTML文档中包括了有很多元素，BOM也将这些元素看成了不同的对象。从图12-2中可以看出，Document对象还有下述几个子对象。
Anchors数组：该数组代表了文档中的所有锚。数组中的每一个元素都是a>标签，通过锚对象可以获得锚的命名，以及超链接中的文字。
浏览器对象模型
从12.1.2小节中可以看出，在JavaScript中对象之间并不是独立存在的，对象与对象之间有着层次关系。如Document对象是Window对象的子对象，Window对象是Document对象的父对象等。
浏览器对象模型就是用于描述这种对象与对象之间层次关系的模型，该对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。图12-2是BOM的结构示意图。
Applets数组：该数组代表了嵌在网页中的所有小程序。数组中的每一个元素都是一个Applet对象，通过Applet对象可以获得Java小程序的公有字段。
Embeds数组：与Applets类似，但建议使用Embeds数组。
Forms数组：该数组代表文档中的所有表单。数组中的每一个元素都是一个Form对象。每一个Form对象都对应着HTML文档中的一个<form>标签。通过Form对象可以获得表单中的各种信息，也可以提交或重置表单。由于表单中还包括了很多表单元素，因此，Form对象的子对象还可以对这些表单元素进行引用，以完成更具体的应用。
Location对象：该对象与Window对象中的Location对象完全相同。由于该对象与HTML文档并没有太大关系，因此，该对象是反对使用的对象，建议使用Window对象的Location子对象。
BOM并不是W3C中的标准，因此，不同的浏览器所支持的BOM中的对象、对象的属性和方法都有可能不同。从图12-2中可以看出，Document对象下有很多子对象，因此Document对象是一个十分重要的对象。事实上，大多数浏览器都支持Document对象。在W3C正式定义DOM之前，BOM中的Document分支就已经被众多浏览器支持。DOM被正式定义之后，分为了三个层次，分别为1级DOM（DOM Level 1）、2级DOM（DOM Level 2）和3级DOM（DOM Level 3）。而BOM中的Document分支被称为0级DOM（DOM Level 0），因为该分支定义了文档功能的基本功能。
（点击查看大图）图12-2 BOM的结构示意图
从图12-2中可以看出，Window对象是BOM中的顶层对象，该对象代表了浏览器窗口。在Window对象之下有下述几个子对象。
Document对象：该对象代表浏览器窗口中所加载的文档。使用Document对象可以操作文档中的内容。在整个BOM中，只有Document对象是与HTML文档的内容相关的。
Location对象：该对象代表当前文档的URL。URL分为几个部分，如协议部分、主机部分、端口部分等。使用Location对象可以分别获得这些部分，并且可以通过修改这些部分的值来加载一个新文档。
Navigator对象：该对象是浏览器对象，代表了浏览器的信息。该对象与Window对象不同，Window对象可以用于控制浏览器窗口的一些属性，如浏览器窗口大小、位置等。而Navigator对象包含的是浏览器的信息，如浏览器的名称、版本号等。
Frames数组：该数组代表浏览器窗口中的框架。HTML中允许将一个浏览器窗口分为多个框架，每个框架中可以加载一个HTML文档。在这种框架页中，每一个框架都是Frames数组中的一个元素。而Frames数组中的每一个元素都是一个Window对象。
History对象：该对象代表当前浏览器窗口的浏览历史。通过该对象可以将当前浏览器窗口中的文档前进或后退到某一个已经访问过的URL（统一资源定位符）。