首页 / JAVASCRIPT / js中的BOM如何正确操作

js中的BOM如何正确操作

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js中的BOM如何正确操作，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5531字，纯文字阅读大概需要8分钟。

内容图文

一、什么是BOM？

BOM：Browser Object Model 是浏览器对象模型，浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。

二、关于BOM知识的思维导图

js中的BOM如何正确操作 - 文章图片

三、主流浏览器的介绍

浏览器内核主要指的是浏览器的渲染引擎，2013 年以前，代表有 Trident（IE），Gecko（firefox），Webkit（Safari chrome 等）以及 Presto（opera)。2013 年，谷歌开始研发 blink 引擎，chrome 28 以后开始使用，而 opera 则放弃了自主研发的 Presto 引擎，投入谷歌怀抱，和谷歌一起研发 blink 引擎，国内各种 chrome系的浏览器（360、UC、QQ、2345 等等）也纷纷放弃 webkit，投入 blink 的怀抱。

移动端的浏览器内核主要说的是系统内置浏览器的内核。

目前移动设备浏览器上常用的内核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit，Android 4.4 之前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink，Windows Phone 8 系统浏览器内核是 Trident。

四、BOM对象

常用的BOM对象有：window对象、location对象、Navigator对象、screen对象、history对象

1）、Window对象：BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。

window对象常用方法有

弹框类的方法。前面省略window

alert('提示信息')
confirm("确认信息")
prompt("弹出输入框")
open("url地址"，“打开的方式（可以是-self或-black）”，“新窗口的大小”）注：如果url为空，则默认打开一个空白页面，如果打开方式为空，则默认为新窗口方式打开页面。返回值为：返回新打开窗口的window对象

close() 关闭当前的网页。注：存在兼容性问题：FF：禁止设置关闭浏览器的代码

Chrome：默认直接关闭

IE：询问用户

window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

定时器，清除定时器。

setTimeout(函数，时间) 只执行一次
setInterval(函数，时间) 无限执行

clearTimeout/clearInterval(定时器名称) 清除定时器

2）、location对象

window.location对象：用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。在编写时可不使用 window 这个前缀。

location.herf = 'url地址'
hash 返回#号后面的字符串，不包含散列，则返回空字符串。
host 返回服务器名称和端口号
pathname 返回目录和文件名。 /project/test.html
search 返回？号后面的所有值。
port 返回URL中的指定的端口号，如URL中不包含端口号返回空字符串

portocol 返回页面使用的协议。 http:或https:

3）、navigator对象

window.navigator 对象包含有关访问者浏览器的信息。在编写时可不使用 window 这个前缀。

navigator.appName：浏览器名称；navigator.appVersion：浏览器版本；navigator.language：浏览器设置的语言；navigator.platform：操作系统类型；navigator.userAgent：浏览器设定的User-Agent字符串。

userAgent是最常用的属性，用来完成浏览器判断。

 if(window.navigator.userAgent.indexOf('MSIE')!=-1){
        alert('我是IE');
    }else{
        alert('我不是IE');
    }

4）、screen对象

window.screen 对象包含有关用户屏幕的信息。

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

document.write(screen.availHeight+screen.availWidth);//获取屏幕的宽度和高度之和

5）、history对象

window.history 对象包含浏览器的历史。为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

history.back() - 加载历史列表中的前一个 URL。返回上一页。

history.forward() - 加载历史列表中的下一个 URL。返回下一页。

go(“参数”) -1表示上一页，1表示下一页。

综合以上，页面跳转的方法有：

1、window.location.href = '你所要跳转到的页面';
2、window.open('你所要跳转到的页面’);
3、window.history.back(-1):返回上一页
4、window.history.go(-1/1):返回上一页或下一页五、
5、history.go("baidu.com")；

五、窗口尺寸与大小

可视区尺寸：

 document.documentElement.clientWidth                                                                                                                             
 document.documentElement.clientHeight

滚动条滚动距离：

document.documentElement.clientScrollTop                                                                                                                         
document.documentElement.clientScrollLeft

存在兼容性问题（Chrome与其它浏览器不同），解决办法如下

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft = document.documentElement.scrollTop||document.body.scrollLeft;

内容高/宽：元素.scrollHeight/scrollWidth

当一个时间发生时鼠标到页面可视区的距离：clientX/clientY

六、系统对话框

alert()、confirm()和prompt()

<script type="text/javascript">
        alert("Hello world!");    </script>

<script type="text/javascript">
    /*
    判断用户点击了OK还是Cancel，可以检查confirm()方法返回的布尔值：true表示单击了OK，false表示单击了Cancel或单击了右上角的X按钮。
     */
        if (confirm("Are you sure?")) {
            alert("I'm so glad you're sure! ");
        } else {
             alert("I'm sorry to hear you're not sure. ");
        }    </script>

<script type="text/javascript">
    /*
    prompt()方法用来生成一个"提示"框，用于提示用户输入一些文本。提示框除了显示OK和Cancel按钮之外 ，还会显示一个文本输入域，用来输入文本内容。该方法接收两个参数：
    要显示给用户的文本提示和文本输入域的默认值(可以是一个空字符串)
     */
        var result = prompt("What is your name? ", "");        if (result !== null) {
         alert("Welcome, " + result);
        }    </script>

内容总结

以上是互联网集市为您收集整理的js中的BOM如何正确操作全部内容，希望文章能够帮你解决js中的BOM如何正确操作所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/294771.html

来源：【匿名】

【上一篇】用Video.js实现H5直播界面【下一篇】javascript 怎么调用php方法

更多 ►

【js中的BOM如何正确操作】教程文章相关的互联网学习教程文章

JS中的constructor

// constructor属性始终指向创建当前对象的构造函数。比如下面例子：比如下面例子： //var foo = new Array(1, 56, 34, 12); var arr = [1, 56, 34, 12]; console.log(arr.constructor === Array); // true //var foo = new Function(); var Foo = function() {}; console.log(Foo.constructor === Function); // true //由构造函数实例化一个obj对象 ...

JS中的call()方法和apply()方法用法总结

JS中的call()方法和apply()方法用法总结 : 参考： https://blog.csdn.net/ganyingxie123456/article/details/70855586原文：https://www.cnblogs.com/wfblog/p/9169026.html

JS中的数据类型检测【代码】

JavaScript的数据类型分为两类：原始类型（primitive type）和对象类型（object type）。原始类型有5种，分别是：数字（Number）、字符串（String）、布尔值（Boolean）、null和undefined。引用类型包括：Object、Array、Date、Error、RegExp、Functions。1.原始类型的检测对于原始类型中的：数字、字符串、布尔值、undefined，最佳检测方法是使用typeof运算符，typeof检测后会返回一个表示值类型的字符串。typeof的语法是：typeo...

js中的方法调用【代码】

如何判断js中的数据类型【代码】

最常见的判断方法：typeofalert(typeof a) ------------> stringalert(typeof b) ------------> numberalert(typeof c) ------------> objectalert(typeof d) ------------> objectalert(typeof e) ------------> functionalert(typeof f) ------------> function其中typeof返回的类型都是字符串形式，需注意，例如：alert(typeof a == "string") -------------> truealert(typeof a == String) ---------------> fals...

浅谈js中的数据类型,使用typeof获取js数据类型

JS中的数据类型1):Undefined——值未定义注:Undefined类型只有一个值,即特色的undefined.在使用var声明变量但未对其加以初始化时,这个变量的值就是undefined 2):boolean——布尔值注：true和false是区分大小写的.也就是说,True和False(以及其他的混合大小写形式)都不是Boolean值,只是标识符 3):string——字符串注:用双引号和单引号表示的字符完全相同 4):number——数值注:表示整数和浮点数值 5):Null——空值注：Null类型只有一个...

JavaScript入门之JS中的内置对象【图】

一、数组1、数组的基本概念数组是在内存空间中连续存储的一组有序数据的集合。元素在数组中的顺序，称为下标。可以使用下标访问数组的每个元素。 2、如何声明一个数组①使用字面量声明：var arr = [];在JS中，同一数组可以存储各种数据类型；　　eg： var arr = [1,"wuhao",true,{},null,func] ②使用new关键字声明：var arr = new Array(参数)；　　>>>参数可以是：　　　　a.参数省略，表示创建一个空数组　　　　b.参数为一个...

JavaScript学习-js中的数组/Boolean类/字符串String类

JavaScript学习【js中的数组】 1、数组的概念：是在内存中连续储存对个有序元素的结构元素的顺序称为下标，通过下标查找对象元素。2、数组的声明：① 字面量声明：var arr1 = [];js中，同一数组，可以储存多种不同的数据类型：例如： var arr1 = [1,"2",true,{"name":"hahhah"},[1,2]]② new关键字声明： var arr2 = new Arry(参数)>>>参数可以为a.为空：声明一个，没有指定长度的数组；b.数组的length：声明一个指定长度的数组，...

JavaScript -- 时光流逝（八）：js中的事件Event的使用【代码】【图】

JavaScript -- 知识点回顾篇（八）：js中的事件Event的使用事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。 (1) onabort : onabort 事件会在图像加载被中断时发生。<!doctype html><html><head><script type="text/javascript">function abortImage(){alert(‘Error: Loading of the image was aborted‘)}</script></head><body><img src="test.jpg" onabort="abortImage()"/></body></html> (2) onblur...

js中的SetTimeOut

1. SetTimeOut() 1.1 SetTimeOut()语法例子 1.2 用SetTimeOut()执行Function 1.3 SetTimeOut()语法例子 1.4 设定条件使SetTimeOut()停止 1.5 计分及秒的counter 2. ClearTimeout() 3. Set Flag 1．setTimeout( )setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层对象名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method。请...

JS中的prototype(转载)【图】

本文转载自博客园。作者：叶剑锋出处：http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html 本文基于下面几个知识点:1 原型法设计模式在.Net中可以使用clone()来实现原型法原型法的主要思想是，现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。 2 javascript的方法可以分为三类：a 类方法b 对象方法c 原型方法例子：function People(name){ this.name=name; //对象方法 thi...

js中的call及apply

http://www.zhihu.com/question/20289071 func1.call(this, arg1, arg2); 或者 func1.apply(this, [arg1, arg2]); 来调用。其中 this 是你想指定的上下文，他可以任何一个 JavaScript 对象(JavaScript 中一切皆对象)，call 需要把参数按顺序传递进去，而 apply 则是把参数放在数组里。 LZ要先明白存在call和apply的原因，才能记得牢一点：在javascript OOP中，我们经常会这样定义：function cat(){}cat.prototype={food:"fish",sa...

Js中的多条件排序，多列排序

參见github：https://github.com/Teun/thenBy.js原文：http://www.cnblogs.com/bhlsheji/p/4242300.html

js中的运算符

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>JS中的运算符</title> <script type="text/javascript"> /* 1、算术运算 + 加、- 减、* 乘、 / 除、 % 取余、++ 自增、-- 自减 +:有两种作用，链接字符串/加法运算；当+两边均为数字时，进行加法运算；当+两边有任意一边为字符串时，进行字符串链接，链接之后的结果认为字符串； ++:自增运算符，将变量在原有基础上+1； --:自减运算符，将变量在原...

js中的基本类型和引用类型【代码】

转自https://www.cnblogs.com/gromimiss/p/6066268.html 基本数据类型：按值访问，可操作保存在变量中的实际的值。基本类型值指的是简单的数据段。基本数据类型有这五种:Undefined、Null、String、Number、Boolean。引用类型：当复制保存着对象的某个变量时，操作的是对象的引用，但在为对象添加属性时，操作的是实际的对象。引用类型值指那些可能为多个值构成的对象。引用类型有这几种：object、Array、RegExp、Date、Function、特...

首页 / JAVASCRIPT / js中的BOM如何正确操作

js中的BOM如何正确操作

内容导读

内容图文

一、什么是BOM？

二、关于BOM知识的思维导图

三、主流浏览器的介绍

四、BOM对象

五、窗口尺寸与大小

六、系统对话框

内容总结

内容备注

内容手机端

【js中的BOM如何正确操作】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程