04_JS_事件BOM&DOM

合集下载

JavaScript+jQuery开发实战-JavaScript中的BOM操作

会使用定时函数和Date对象制作时钟特效
BOM模型2-1
BOM：浏览器对象模型（Browser Object Model）
整个BOM的核心

BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
BOM模型2-2
BOM可实现功能
弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口的大小页面的前进、后退
共性问题集中讲解
history对象
常用方法
名称
back() forward() go()
说
明
加载 history 对象列表中的前一个URL 加载 history 对象列表中的下一个URL 加载 history 对象列表中的某个具体URL
等价
history.back()
等价
history.go(-1) history.go(1)
演示示例2：window对象操作窗口
学员操作—制作当当购物车页面
练习

需求说明单击“半闭”按钮时，关闭当前页面购物车页面单击“移入收藏”弹出收藏提示单击“删除”弹出确认删除提示单击“结算”按钮，弹出结算信息页面窗口
完成时间：20分钟
共性问题集中讲解
常见问题及解决办法代码规范问题调试技巧
说
明
location和history对象的应用
主页面使用href实现跳转和刷新本页
示例
<a href="javascript:location.href='flower.html'">查看鲜花详情</a> <a href="javascript:location.reload()">刷新本页</a> <a href="javascript:history.back()">返回主页面</a>

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其实是个十分有用的语言。

JS中的BOM

BOM1.什么是BOM?a)BOM Browers Object Model 浏览器对象模型2.为什么要学习BOM?a)因为BOM是浏览器提供给JS操作的一个对象模型，实现了JS可以通过操作BOM来实现浏览器的各种行为。

起到了桥梁和接口的作用，类似于空调的控制面板。

BOM的对象。

window对象在JS中是Global对象，window的对象是浏览器中的BOM对象，window中包含两部分：JS语法中的函数和浏览器中的对象。

window对象的子对象：document 子对象DOM的对象文档对象模型frames子对象浏览器框架集合对象history子对象浏览器历史信息对象location子对象浏览器位置信息对象navigator子对象浏览器导航对象，存放浏览器的信息screen子对象浏览器屏幕对象frames子对象:window的frame框架访问方式访问方式大概分为2种：frames[下标] 访问第N个框架页面的window对象frame[name名称] 访问框架页面中name属性为指定值的页面的window对象。

window的关系属性：window 表示当前页面的window对象也就是当前页面的BOM this 表示当前页面的window对象self 表示当前页面的window对象，在其他语言中self表示类，而JS中没有类所有this和self指向都是对象parent 如果在顶级页面，parent表示当前页面的window对象，如果在深层次的页面则表示上一层页面的window对象。

top 如果在顶级页面，top表示当前页面的window对象，如果在其他层次页面，则表示顶级页面的window对象。

opener 打开者后面窗口位置属性非火狐浏览器screenLeft 浏览器窗口距离屏幕左上角的水平距离screenTop 浏览器窗口距离屏幕左上角的垂直距离火狐浏览器screenX 浏览器窗口距离屏幕左上角的水平距离screenY 浏览器窗口距离屏幕左上角的垂直距离注意；IE浏览器从页面的内容区域(视窗)开始计算距离，而火狐和chrome则从浏览器本身开始计算窗口位置方法moveTo(横坐标,纵坐标)将浏览器窗口移动到指定的位置moveBy(长度,高度)将浏览器窗口在当前的位置上移动指定的长度和高度注意：两个参数都有可以为负数。

js bom函数

JavaScript的BOM函数详解在JavaScript中，BOM（浏览器对象模型）提供了许多用于与浏览器交互的对象和函数。

这些对象和函数使得JavaScript可以获取浏览器信息，操作浏览器窗口和标签页，以及处理浏览器事件等。

下面是一些常用的BOM函数：1.window.open()：打开一个新的浏览器窗口或标签页。

这个函数可以接受多个参数，包括要打开的URL、窗口名称、窗口大小等。

2.window.close()：关闭当前窗口或标签页。

需要注意的是，这个函数只能关闭由window.open()打开的窗口或标签页。

3.window.location：用于获取或设置当前窗口的URL。

这个对象包含了许多属性，例如href（完整的URL）、pathname（URL中的路径名）等。

4.window.alert()、window.confirm()、window.prompt()：这些函数用于显示对话框，分别用于显示警告框、确认框和提示框。

这些对话框可以包含文本和输入字段，用户可以在其中输入文本或选择选项。

5.window.setTimeout()、window.setInterval()：这些函数用于在指定的时间间隔后执行函数或指定的代码块。

setTimeout()只执行一次，而setInterval()则会每隔指定的时间间隔重复执行。

6.window.scrollTo()、window.scrollBy()：这些函数用于滚动窗口到指定的位置或按指定的距离滚动。

这些函数可以接受坐标参数，例如x坐标和y坐标。

7.window.resizeTo()、window.resizeBy()：这些函数用于改变窗口的大小。

resizeTo()接受一个表示新大小的参数，而resizeBy()则接受一个表示相对于当前大小的增加量或减少量的参数。

以上是BOM中常用的一些函数，它们为JavaScript提供了丰富的浏览器交互功能，使得JavaScript在网页开发中更加灵活和强大。

PHP基础教程_C13_javascript05

nDocument对象是一个十分重要的对象，在该对象中包含了很多其他子
对象。Document对象这个分支又称为文档对象模型（Document Object Model，DOM）。
n通过DOM对象，程序员可以很方便地引用HTML文档中的各个对象。 n如下图：
parent、self、top、 Window对象
事件与this运算符
由于事件通常会调用一个函数，因此在函数体中处理数据时，常常需要用到一些与对象相关的参数，此时就可以通过this运算符来传递参数，this运算符代表的是对象本身。
<input type=‘button’ onclick=“myfun(this)” /> <script> function myfun(obj){ alert(obj); } </script>
5. Window对象
Window对象是一个全局对象、是所有对象的顶级对象。Window对象代表的是打开的浏览器窗口。 Window对象的使用方法： Window对象、Document对象、Location对象、History对象、Screen对象等都属于客户端的对象，这些对象不需要实例化，即不需要使用new运算符来创建的对象。在现实运用中，JavaScript允许使用一个字符串来给窗口命名，也可以使用一些关键字来代替某些特定的窗口。例如，使用“self”代表当前窗口、 “parent”代表父级窗口等。对于这种情况，可以用这些字符串来代表 “window”。
事件处理程序的返回值
在JavaScript中并不要求处理程序有返回值。如果事件处理程序没有返回值，浏览器就会以默认情况进行处理。但是，在很多情况下程序都要求事件处理程序要有一个返回值，通过该返回值来判断事件处理程序是否正确处理，或者通过该返回值来判断是否进行下一步操作。在这种情况下，事件处理程序返回值都为布尔值，如果为false则阻止浏览器的下一步操作，如果为true则进行默认的操作。

JavaScript学习-BOM知识点小计

BOM知识点小计1. BOM概述1.1什么是BOMBOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是windowBOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性BOM缺乏标准，JavaScript语法标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分1.2DOM和BOM的区别DOM:●文档对象模型●DOM就是把[文档]当作一个[对象]来看待●DOM的顶级对象是document●DOM主要学习的是操作页面元素●DOM是W3C的标准规范BOM:●浏览器对象模型●把[浏览器]当做一个[对象]来看待●BOM的顶级对象是window●BOM学习的是浏览器窗口交互的一些对象●BOM是浏览器厂商在各自浏览器上定义的，兼容性较差1.3BOM的构成BOM比DOM更大，它包含DOMwindow对象是浏览器的顶级对象，它具有双重角色:1）、它是JS访问浏览器窗口的一个接口2）、它是一个全局对象。

定义在全局作用域中的变量、函数都会变成window对象的属性和方法。

在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert()、prompt()等注意:window下的一个特殊属性 2. window对象的常见事件2.1窗口加载事件Window.onload是窗口(页面)加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等)，就调用处理函数注意：1.有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数2.Window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准3.如果使用addEventListener则没有限制DOMContentLoaded事件触发时，仅当DOM加载文档，不包括样式表，图片，flash 等。

JS中BOM和DOM常用的事件

JS中BOM和DOM常⽤的事件总结：window对象● window.innerHeight - 浏览器窗⼝的内部⾼度● window.innerWidth - 浏览器窗⼝的内部宽度● window.open() - 打开新窗⼝● window.close() - 关闭当前窗⼝navigator对象navigator.appName // web浏览器全称navigator.appVersion // web浏览器⼚商和版本的详细字符串erAgent // 客户端绝⼤部分信息navigator.platform // 浏览器运⾏所在的操作系统screen对象screen.availWiddth // 可⽤的屏幕宽度screen.avaliWidth // 可⽤的屏幕⾼度history对象window.history对象包含浏览器历史history.forward() //前进⼀页history.back() // 后退⼀页location对象window.location 对象⽤于获取当前页⾯的地址URL，并把浏览器重新定向到新的页⾯。

location.herf // 获取URllocation.herf="URL" // 跳转到指定页⾯location.reload() // 重新加载页⾯计时相关：setTimeout() // var t = setTimeout("js语句"，毫秒)clearTimeout() // clearTimeout(setTimeout_variable)setInterval()clearInterval()DOM查找标签：直接查找document.getElementById // 根据Id获取⼀个标签document.getElementsByClassName // 根据class属性获取document.getElementsByTagName // 根据标签名称获取标签合集间接查找parentElement // ⽗节点标签元素children // 所有⼦标签firstElementChild // 第⼀个⼦标签元素lastElementChild // 最后⼀个⼦元素元素nextElementSibling // 下⼀个兄弟标签元素previousElementSibling // 上⼀个兄弟标签元素节点操作：创建节点：document.createElement(“标签名”)添加节点：追加⼀个⼦节点（作为最后的⼦节点）somenode.appendChild(newnode)把新增的节点放到某个节点的前边：somenode.insertBefore(newnode,某个节点)删除节点：获取要删除的元素，通过⽗元素调⽤该⽅法删除somenode.removeChild("要删除的节点")替换节点：some.node.replateChild(newnode,某个节点)属性节点:innerTextinnerHTMLsetAttributegetAttributeremoveAttribute⾃带属性可以直接.属性名获取和设置获取值操作：elementNode.value 适⽤于 input select textareacalss的操作：classList.remove(cls) 删除指定类classList.add(cls) 添加类classList.contains(cls) 存在返回true，否则返回falsecalssList.toggle(cls) 存在就删除，否则添加指定css操作：obj.style.对于没有中划线的css属性⼀般直接使⽤style.属性名即可对于有中划线的css属性⼀般将中划线后的第⼀个字母换成⼤写事件：HTML中的事件出发浏览器的actiononclick // 点击ondblclick // 双击onfocus // 获得焦点onblur // 失去焦点onchange // 域的内容被改变onkeydown // 键盘按键被按下onkeypress // 键盘按键被按下并且松开onkeyup // 键盘按键被松开onload // 完成加载onmousedown // ⿏标按下onmousemove // ⿏标被移动onmouseout // ⿏标从某元素移开onmouseover // ⿏标在某元素之上onselect // ⽂本框中的元素被选中onsubmit // 确认按钮被点击参考链接：。

JS操作BOM（一）

JS操作BOM（⼀）1.什么是BOMBOM：Document Object Model（⽂档对象模型）2.BOM分为：1.BOM Core2.HTML-BOM3.CSS-BOM3.节点和节点关系（结构排序之后像家族谱⼀样判断关系）⽂档：dpcument根节点：<html>(⽗节点)<html> (⽗节点)<body>(⼦节点)<title> (⼦节点) <img> <h1> <p>4.使⽤getElement⽅法访问指定节点、根据层次关系访问节点1.getElementById()2.getElementsByName()3.getElementsByTagName()5.节点的属性有：(使⽤getElement⽅法调⽤)1.parentNode2.chileNodes3.firstChlid (第⼀个⼦节点)stChild (最后⼀个⼦节点)5.nextSibling (下⼀个)6.previousSibling (上⼀个)6.根据层次关系访问节点1.firstElementChildstElementChild3.nextElementSibling4.previousElementSibling⽰例：document.getElementById("").firstElementChild.innerHTML || document.getElementById("").fristChild.innerHTML;7.节点信息1.nodeName 节点名称2.nodeValue 节点值3.nodeType 节点类型8.操作节点1.操作节点的属性⽰例：getAttribute("属性名");setAttribute("属性名","属性值");2.创建和插⼊节点createElement(aa) 创建⼀个标签名为aa的新元素节点A.appendChild(B) 把B节点追加⾄A节点的末尾insertBefore(A,B) 把A节点插⼊到B节点之前cloneNode(deep) 复制某个指定的节点3.删除和替换节点removeChild(node) 删除指定的节点replaceChild(newNode,oldNode) ⽤其他节点替换指定的节点⽰例：var aa = document.getElementByld("first");delNode.parentNode.removeChild(delNode);4.操作节点样式5.获取元素的样式。

javascript bom编程

一、简介JavaScript是一种广泛应用于网页交互的脚本语言，其最初设计用于在客户端（浏览器）中动态交互，操作DOM和BOM。

BOM （Browser Object Model）指代的是浏览器对象模型，它提供了一系列的对象和方法，使得JavaScript可以与浏览器进行交互。

二、BOM对象BOM由多个对象组成，这些对象都是JavaScript的内置对象，它们提供了一系列的方法和属性，用以控制浏览器的行为。

1. window对象window对象是BOM的核心对象，它代表了浏览器的一个窗口或一个框架，通过该对象可以访问和控制浏览器窗口的各种属性和方法，比如打开新窗口、关闭窗口、修改窗口尺寸等等。

2. navigator对象navigator对象提供了关于浏览器的信息，比如浏览器的类型、版本、操作系统等信息。

开发者可以利用这些信息来编写更加兼容不同浏览器的代码。

3. screen对象screen对象提供了关于用户屏幕的信息，比如屏幕的尺寸、分辨率等，开发者可以利用这些信息来进行不同设备的适配。

4. location对象location对象代表了浏览器的位置区域栏，可以通过该对象来获取当前页面的URL信息，或者进行页面的重定向等操作。

5. history对象history对象可以用来访问浏览器的历史记录，比如在历史记录中前进或后退。

6. document对象document对象代表了整个HTML文档，开发者可以通过该对象来获取和修改页面中的元素内容，实现动态页面交互。

三、BOM编程应用通过JavaScript与BOM的交互，开发者可以实现丰富的应用，比如通过window对象的方法打开新窗口，展示更多的内容；通过navigator对象的信息进行浏览器兼容性的处理；通过screen对象来进行不同设备的适配；通过location对象进行URL的跳转等等。

1. 弹出新窗口```javascriptwindow.open('网络协议xxx '_blank', 'width=500, height=500'); ```可以使用window对象的open方法来弹出一个新的浏览器窗口，参数分别代表要打开的URL、窗口名称、窗口的宽高等。

JS中的BOM操作

JS中的BOM操作1.获取浏览器的窗⼝尺⼨ window.innerWidth//获取窗⼝宽度 window.innerHeight//获取窗⼝的⾼度2.浏览器的弹出层提⽰框:window.alert('提⽰信息') 询问框:window.confirm('提⽰信息') 输⼊框:window.prompt('提⽰信息')3.开启和关闭标签开启:window.open('地址') 关闭:window.close()4.浏览器的常⽤事件资源加载完毕:window.onload=function(){} 可视尺⼨改变:window.onresize=function(){} 滚动条位置改变:window.onscroll=function(){}5.浏览器的历史记录操作回退页⾯:window.history.back() 前进页⾯:window.history.forward()6.浏览器卷去的尺⼨获取卷去⾼度: document.documentElement.scrollTop //页⾯包含<!DOCTYPEhtml> 获取卷去⾼度: document.body.scrollTop //页⾯不包含<!DOCTYPEhtml> 兼容写法: var height =document.documentElement.scrollTop||document.body.scrollTop 卷去的宽度:document.documentElement.scrollLeft //规则同上卷去的宽度: document.body.scrollLeft7.浏览器滚动到滚动到:window.scrollTo() 参数⽅式1:window.scrollTo(left,top) //瞬间到指定位置 left:卷去的宽度 top:卷去的⾼度参数⽅式2:window.scrollTo({ left:xx, //卷去的宽度 top:xx, //卷去的⾼度 behavior:'smooth' //behavior表⽰定位⽅式:平滑滚动 })。

JS中的BOMDOM和事件

JS中的BOMDOM和事件概述： js包含ECMAScript、DOM、BOM。

BOM(browser object model)浏览器对象模型，使js获得了操纵浏览器的能⼒。

DOM(document object model)⽂档对象模型，使js获得了可以获取html内元素的能⼒。

BOM： window对象： window对象是客户端javascript的最⾼层对象之⼀，所有的浏览器都⽀持window对象，也可以粗暴的认为打开⼀个浏览器窗⼝或页⾯就是⽣成了⼀个window对象。

所有js全局对象，函数以及变量均为windows的对象的组成元素。

全局变量是window对象的属性，全局函数是window对象的⽅法，可以想想成python中的类，类中有静态属性和动态属性。

window⼦对象：弹出框：计时相关： js中我们可以设定⼀个时间间隔来执⾏代码，⽽不是在函数在调⽤之后⽴即执⾏，我们称为计时时间setTimeout()var t=setTimeout(“alert(123)”,1000) 等待1秒后执⾏，并且有返回值相当于计时事件的idsetInterval()var t=setTimeout(“alert(123)”,5000) 每5秒执⾏⼀次函数，并且有返回值相当于计时事件的idclearTimeout()clearTimeout(t)取消setTimeout设置clearInterval()clearInterval(t)参数必须是setInterval的返回值以下是定时器的例⼦：<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>计时器</title></head><body><label for="i1">显⽰⽇期</label><input type="text" id="i1"><input type="button" value="开始" id="start_button"><input type="button" value="结束" id="stop_button"><script>var t;var startEle=document.getElementById("start_button");var stopEle=document.getElementById("stop_button");function foo_time() {var new_time=new Date();var str_time=new_time.toLocaleString();var i1Ele=document.getElementById("i1");i1Ele.value=str_time;};startEle.onclick=function () {if (t===undefined) {foo_time();t= setInterval(foo_time,1000);}};stopEle.onclick=function () {clearTimeout(t);console.log('cleartimeout',t);t=undefined;}</script></body></html>DOM： dom使js拥有了操纵html标签的能⼒。

JS中BOM相关知识点总结（必看篇）

JS 中BOM 相关知识点总结（必看篇）ECMAScript 是JavaScript 的核⼼，但是如果要在web 中使⽤javascript ，那么BOM(浏览器对象模型)才是真正的核⼼。

BOM 提供了很多对象，⽤于访问浏览器的功能，这些功能与任何⽹页内容⽆关。

window 对象：BOM 的核⼼对象是window ，它表⽰浏览器的⼀个实例。

在浏览器中，window 对象有双重⾓⾊，它既是通过javascript 访问浏览器窗⼝的⼀个接⼝，⼜是ECMAScript 规定的Global 对象。

因此，所有全局作⽤域中声明的变量、函数都会变成window 对象的属性和⽅法。

123456789101112131415<script type="text/javascript">var age=26;//这⾥定义的全局变量和全局函数被⾃动归在了window 对象名下function sayAge(){console.log(this.age);} console.log(window.age);//26 sayAge();//26 相当于window.sayAge() window.sayAge();//26//全局变量和在window 对象上直接定义属性的唯⼀区别：全局变量不能够通过delete 操作符删除，⽽直接在window 对象上定义的属性可以 window.color='red'; delete window.age; deletewindow.color; console.log(window.age);//26 console.log(window.color);//undefined </script>12345678<script type="text/javascript"> /* 还要注意：尝试访问未声明的变量会抛出错误，但是通过查询window 对象，可以知道某个可能未经声明的变量是否存在 *///这会抛出错误，因为oldValue 未定义var newValue=oldValue;//这不会抛出错误，因为是⼀次属性查询 var newValue=window.oldValue; </script>如果页⾯中包含框架，则每个框架都拥有⾃⼰的window 对象，并且保存在frames 集合中。

JavaScript深入理解之Bom对象详解

JavaScript深⼊理解之Bom对象详解写在前⾯当我们在 Web 中使⽤ JavaScript 的时候，BOM 对象——浏览器对象模型起着⾄关重要的作⽤。

BOM 提供了很多对象，⽤于访问浏览器的功能。

熟悉了解 BOM 对象对我们 WEB 开发有着重要的帮助，下⾯是我的⼀些理解和总结。

BOM 对象定义BOM是指浏览器对象模型，它是对⼀系列在浏览器环境中使⽤对象的统称，这些对象提供了访问浏览器的功能。

在BOM对象中，window对象是最顶层对象，在浏览器环境中它是⼀个Global全局对象，其它对象（如：DOM对象）对是这个对象的属性（⼦对象）。

BOM对象是与内容⽆关，主要⽤于管理浏览器窗⼝及窗⼝之间的通讯。

下⾯是BOM对象的组成结构：window 对象window 对象表⽰⼀个浏览器窗⼝或者⼀个 frame 框架，它处于对象层次的最顶端。

在浏览器中 window 对象有双重⾓⾊。

它既是通过JavaScript 访问浏览器窗⼝的⼀个接⼝，提供处理浏览器窗⼝的⽅法和属性。

⼜是 ECMAScript 中规定的 Global 对象，因此在全局作⽤域中声明的变量和函数都会成为 window 对象的属性和⽅法。

举个例⼦var age = 29;console.log(window.age); // 29简单来说，Global 对象只是作为 window 对象的⼀部分来实现的，window 对象相对于 Global 对象扩展了处理浏览器窗⼝的⽅法和属性。

DOM（document）相关对象DOM 可以认为是 BOM 的⼀个⼦集，DOM 中⽂档操作相关对象，如：Node、Document、Element 等 DOM 节点类型对象，都是做为window对象的⼦属性出现的。

document 是 window 对象的⼦属性，它是⼀个 Document 对象实例，表⽰当前窗⼝中⽂档对象。

通过该对象，可以对⽂档和⽂档中元素、节点等进⾏操作。

js之BOM操作

js之BOM操作js之BOM操作什么是BOMBOM：Browser Object Model 是浏览器对象模型，它使 JavaScript 有能⼒与浏览器进⾏“对话”。

浏览器对象模型提供了独⽴与内容的、可以与浏览器窗⼝进⾏互动的对象结构，BOM由多个对象构成，其中代表浏览器窗⼝的window对象是BOM的顶层对象，其他对象都是该对象的⼦对象。

window对象所有浏览器都⽀持 window 对象。

它表⽰浏览器窗⼝。

*如果⽂档包含框架（frame 或 iframe 标签），浏览器会为 HTML ⽂档创建⼀个 window 对象，并为每个框架创建⼀个额外的 window 对象。

*没有应⽤于 window 对象的公开标准，不过所有浏览器都⽀持该对象。

所有 JavaScript 全局对象、函数以及变量均⾃动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的⽅法。

接下来要讲的HTML DOM 的 document 也是 window 对象的属性之⼀。

⼀些常⽤的Window⽅法：window.innerHeight - 浏览器窗⼝的内部⾼度window.innerWidth - 浏览器窗⼝的内部宽度window.open() - 打开新窗⼝window.close() - 关闭当前窗⼝navigator对象navigator对象表⽰浏览器的信息window.navigator.appName：浏览器名称；window.navigator.appVersion：浏览器版本；nguage：浏览器设置的语⾔；window.navigator.platform：操作系统类型；erAgent：浏览器设定的User-Agent字符串。

注意：来⾃ navigator 对象的信息具有误导性，不应该被⽤于检测浏览器版本，这是因为：1、navigator 数据可被浏览器使⽤者更改2、浏览器⽆法报告晚于浏览器发布的新操作系统screen对象screen对象表⽰屏幕的信息screen.width：屏幕宽度，以像素为单位；screen.availWidth：屏幕的可⽤宽度，以像素为单位screen.height：屏幕⾼度，以像素为单位；screen.availHeight：屏幕的可⽤⾼度，以像素为单位screen.colorDepth：返回颜⾊位数，如8、16、24。

JS总结之BOM

JS总结之BOMDOM的顶级对象是document，BOM的顶级对象是window，BOM包含DOM。

1.window对象的常见事件：onload事件DOMContentLoaded事件onload是等所有资源加载完毕触发，⽽DOMContentLoaded仅当DOM加载完成触发，不包括样式表、图⽚、flash等等，所以当两个事件同时出现时，DOMContentLoaded更快执⾏。

（DOMContentLoaded有兼容性，IE9以上⽀持）onresize事件调整窗⼝⼤⼩加载事件。

只要窗⼝⼤⼩发⽣变化，就会触发该事件，可以利⽤这个事件完成响应式布局。

当窗⼝宽度⼩于600px时隐藏div：<style type="text/css">#div{background-color: #0000FF;width:200px;height:200px;}</style><body><div id="div"></div><script type="text/javascript">var div=document.getElementById('div');window.addEventListener('resize',function(){if(window.innerWidth<=600){div.style.display='none'}})</script></body>setTimeout()和setInterval()window.setTimeout(回调函数，[延迟的毫秒数])；设置⼀个定时器，该定时器在到期之后执⾏回调函数。

延迟省略默认是0。

停⽌定时器：window.clearTimeout(timeoutID);window.setInterval(回调函数，[延迟的毫秒数])；setInterval()⽅法与setTimeout的区别是，setInterval每隔⼀段时间，就调⽤⼀次回调函数，⽽setTimeout只执⾏⼀次回调函数。

JS中的BOM应用

JS中的BOM应⽤我们曾经讲过JS由三部分组成，其中⼀个部分就是BOM，⽤于对浏览器进⾏操作。

这节课我们主要就来介绍BOM。

BOM基础我们先来看⼀个BOM的最基础功能：打开、关闭窗⼝：<html><head><meta charset="utf-8"><title>⽆标题⽂档</title></head><body><input type="button" value="打开窗⼝" onclick="window.open('/');" /></body></html>open⽅法⽤于打开⼀个窗⼝，相对的close⽅法⽤于关闭⼀个窗⼝。

这⾥我们可以⽤open⽅法实现⼀个应⽤：运⾏代码。

在这之前，我们要给⼤家补充⼀个关于document.write的⼩知识。

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>⽆标题⽂档</title></head><body><input type="button" value="write" onclick="document.write('abc')" /></body></html>打开源码可以发现，当我们点击了按钮后，整个页⾯的源码就只剩下了“abc”——也就是说，如果document.write如果放在事件⾥⾯使⽤，会先将页⾯完全清空再重写。

可以看到，我们的运⾏代码案例，使⽤document.write⽅法是⾮常合适的：<html><head><meta charset="utf-8"><title>⽆标题⽂档</title><script>window.onload=function (){var oTxt=document.getElementById('txt1');var oBtn=document.getElementById('btn1');oBtn.onclick=function (){var oNewWin=window.open('about:blank', '_blank');oNewWin.document.write(oTxt.value);};};</script></head><body><textarea id="txt1" rows="10" cols="40"></textarea><br><input id="btn1" type="button" value="运⾏" /></body></html>其中_blank代表新打开⼀个窗⼝（在本窗⼝打开⽤_self），about:blank代表打开的是⼀个空⽩窗⼝，然后我们使⽤document.write向新窗⼝写⼊html，就可以在新窗⼝运⾏html代码了。

Javascript之BOM（window对象）

Javascript之BOM（window对象）摘⾃Rocky Ren分享到ECMAScript是JavaScript的核⼼，但在web使⽤JavaScript，那么BOM(浏览器对象模型)才是真正的核⼼。

BOM的核⼼对象是window，它表⽰浏览器的⼀个实例。

在浏览器中，window对象既是JavaScript访问浏览器窗⼝的⼀个接⼝，⼜是ECMAScript规定的Global对象。

也就是说，在⽹页中定义的任何⼀个变量、对象和函数以window作为其Global对象。

1.全局作⽤域既然window对象扮演着Global对象，那么所有在全局作⽤域中声明的对象、变量和函数都会变成window的属性和⽅法。

定义全局变量和在window对象上定义属性还是有差别的：全局变量不能通过delete删除，⽽在window对象上定义的属性则可以。

1 2 3 4 5 6 7 8 9var age=28;window.color="red";//在IE<9是抛出错误，在其他浏览器中都返回false delete window.age;//在IE<9是抛出错误，在其他浏览器中都返回true delete window.color; //return truealert(window.age); //28alert(window.color); //undefined在使⽤var语句添加window属性时，有⼀个名为[[Configurable]]的特性，这个特性的值被设置为false,因此这样定义的属性不可以通过delete删除。

在尝试访问未声明的变量会抛出错误，但通过查询window对象，可以知道某个可能未声明的变量是否存在。

1 2 3 4//这⾥抛出错误，因为oldValue未声明var newValue=oldValue;//这⾥不会抛出错误，因为这是⼀次属性查询var newValue=window.oldValue // alert(newValue); //undefined其实很多全局JavaScript对象如localtion和navigator实际上都是window对象的属性。

js中的BOM和DOM

js中的BOM和DOM1.BOM（browser object model）浏览器对象模型由于BOM主要⽤于管理窗⼝与窗⼝之间的通讯，因此其核⼼对象是window；BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的⼀部分。

BOM由⼀系列相关的对象构成，并且每个对象都提供了很多⽅法与属性； document（⽂档对象） event（事件对象） location（地址对象） history（历史记录） navigator（浏览器对象） screen（屏幕对象）2.window对象window对象的属性和⽅法在调⽤时可以省略 window.页⾯加载事件：window.onload = function(){ //　onload 中代码：需要等到页⾯的所有内容全部加载完成后才执⾏ // onload 只能有⼀个}所有的全局变量和全局函数都可以是window对象的属性和⽅法window对象的⽅法：①三个对话框：alert() 弹出框prompt("⽂字描述","默认值") 点击确定返回输⼊的值点击取消返回nullconfirm() 确认框点击确定返回true 点击取消返回false②两个定时器：a.setInterval(function(){ 要执⾏的任务},间隔时间) //连续执⾏的定时器clearInterval(定时器的名字) 清除定时器b.setTimeout(function(){ 要执⾏的任务},间隔时间) //⼀次性定时器表⽰延时多长时间后执⾏clearTimeout( 定时器名称 ) 停⽌定时器③window.open("新窗⼝路径","_blank","新窗⼝外观") 返回弹出的⼦窗⼝，可以不写_blank，默认是就是_blank 外观参数： width height left top eg:window.open("list.html","_blank","width=200,height=200");④console；最常⽤的就是console.log() 浏览器控制台打印3.DOM （document object Model）⽂档对象模型DOM是W3C标准，DOM的最根本对象是document（window.document）也就是可以说BOM包含了DOM；它的作⽤是将⽹页转化为⼀个Javascript对象，从⽽⽤Javascript进⾏各种操作（⽐如增删元素等）。

Javascript之BOM（History对象）

Javascript之BOM（History对象）
History 对象
History 对象包含⽤户（在浏览器窗⼝中）访问过的 URL。

History 对象是 window 对象的⼀部分，可通过 window.history 属性对其进⾏访问。

注释：没有应⽤于 History 对象的公开标准，不过所有浏览器都⽀持该对象。

IE: Internet Explorer, F: Firefox, O: Opera.
History 对象属性
属性描述IE F O
返回浏览器历史列表中的 URL 数量。

419
History 对象⽅法
⽅法描述IE F O
加载 history 列表中的前⼀个 URL。

419
加载 history 列表中的下⼀个 URL。

419
加载 history 列表中的某个具体页⾯。

419
History 对象描述
History 对象最初设计来表⽰窗⼝的浏览历史。

但出于隐私⽅⾯的原因，History 对象不再允许脚本访问已经访问过
的实际 URL。

唯⼀保持使⽤的功能只有、和⽅法。

例⼦
下⾯⼀⾏代码执⾏的操作与单击后退按钮执⾏的操作⼀样：
history.back()
下⾯⼀⾏代码执⾏的操作与单击两次后退按钮执⾏的操作⼀样：
history.go(-2)
来源： <>。

js bom案例

js bom案例摘要：1.BOM 的定义与作用2.JavaScript 中的BOM3.BOM 案例：简易计算器4.BOM 的优缺点5.BOM 的未来发展正文：1.BOM 的定义与作用BOM（Bill of Materials）即物料清单，是一种记录产品组成部件和原材料的清单，通常用于制造业、工程项目等领域。

在软件开发领域，BOM 也被广泛应用，用于描述软件的依赖关系、功能模块等。

2.JavaScript 中的BOM在JavaScript 中，BOM 是一个用于描述JavaScript 项目的依赖关系和模块结构的规范。

通过BOM，开发者可以清晰地了解项目的组成部分，方便团队协作和项目维护。

3.BOM 案例：简易计算器假设我们要开发一个简易计算器，可以使用BOM 来描述项目的结构和依赖关系。

BOM 可能如下所示：```json{"name": "简易计算器","version": "1.0.0","description": "一个简单的计算器","main": "index.js","dependencies": ["./lib/calculator.js","./lib/ui.js"],"devDependencies": ["./test/test.js"]}```在这个例子中，我们的项目包含三个模块：`calculator.js`用于实现计算器的逻辑，`ui.js`负责界面展示，`index.js`是项目的入口文件。

同时，我们还有一个测试文件`test.js`，用于对项目进行测试。

4.BOM 的优缺点BOM 的优点在于它可以帮助开发者清晰地了解项目的结构，方便团队协作和项目维护。