JavaScript——BOM中所有对象的常用属性和方法【万字长篇超宝典】
目录
什么是BOM？
BOM中的对象
一、window对象
1、控制台打印方法
2、弹窗相关方法
（1）、alert( )提示框
（2）、confrim( )交互框
（3）、prompt( )输入框
3、窗口打开关闭的方法
（1）、open( )打开一个新的窗口
（2）、close( ) 关闭当前窗口
（3）、改变窗口大小的方法
（4）、改变窗口位置的方法
（5）、改变滚动栏位置的方法
（6）、打印方法
（7）、窗口聚焦和失焦的方法
4、定时器
5、window对象的相关属性
（1）、parent获取窗口的父窗口
（2）、 innerHeight获取当前网页高度，innerWidth获取当前网页宽度
6、window对象常用的相关方法与属性表格汇总
二、document对象（文档对象）
三、Location对象（地址栏对象）
URL的组成
location对象的属性
location对象常见方法
五、screen对象（屏幕对象）
Screen对象属性
六、history对象（历史对象）
history对象的属性及方法
什么是BOM？
在JavaScript中，BOM是浏览器对象模型（Browser Object Model）的缩写。BOM提供了一组对象和方法，用于与浏览器窗口进行交互，并控制浏览器的行为。BOM提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window；
BOM
- 浏览器对象模型
- 把浏览器当作一个对象来看待
- BOM的顶级对象是window
- BOM学习的是浏览器交互的一些对象
- BOM是浏览器厂商在各自浏览器上定义的，兼容性较差
BOM中的对象
BOM 由一系列相关的对象构成，其核心对象是window，且每个对象都提供了很多方法与属性；
一、window对象
概述：window属于浏览器的global对象（顶层对象），所有的全局函数及全局变量都是属于window的（书写时window可以被省略）；
1、控制台打印方法
window.console 表示浏览器的控制台
- window.console.log('日志打印') //log表示日志
- console.error('错误打印') //错误打印
- console.info('信息打印') //信息打印
- console.warn('警告打印') //警告
- console.debug('调试打印') //调试
2、弹窗相关方法
（1）、alert( )提示框
作用：alert()是一个全局方法，用于弹出一个提示框，并显示一段文本消息给用户；
效果：
（2）、confrim( )交互框
作用：confrim()是一个全局方法，用于显示一个带有确定和取消按钮的对话框，返回值为boolean，点击确定返回true，点击取消返回flase；
效果：
（3）、prompt( )输入框
作用：prompt()是一个全局方法，用于显示一个带有输入框的对话框，它可以接收两个参数，第一个是用户输入的提示性文本，第二个是输入框中的默认值；
效果：
3、窗口打开关闭的方法
（1）、open( )打开一个新的窗口
作用：open( )函数用于打开一个新的浏览器窗口或标签，并加载指定的URL；
参数：
- url：要打开的URL地址；
- target：可选参数，指定打开URL的目标位置，常用的取值有" _self（本页面打开）"、" _blank（新页面打开）"、" _parent " 和 " _top "，默认为 " _blank "，表示在新的标签页或窗口打开URL；
- options：一个字符串，指定打开窗口的配置选项，如窗口的大小、位置等，常用的选项有"width"、"height"、"top"和"left"等，第三个参数的相关配置：
fullscreen 是否最大化打开。仅IE有效。 height width top left location 是否显示地址栏 scrollbars 内容在视口中显示不下，是否允许滚动 status 是否显示状态栏 toolbar 是否现在工具栏 menubar 是否显示菜单栏 resizable 是否可以通过拖拽浏览器边框改变窗口大小
示例：
window.open('http://www.baidu.com','_blank',"width=420,height=230,resizable,scrollbars=yes,status=1")效果：
（2）、close( ) 关闭当前窗口
//关闭当前窗口
window.close() （3）、改变窗口大小的方法
resizeTo( )：
//直接改变窗口大小到对应的宽高 w 100 h 100
window.resizeTo(100,100)resizeBy( )：
//在窗口原本大小的基础上改变对应的宽高 w 300、h 300 正数加,负数减
window.resizeBy(300,300)（4）、改变窗口位置的方法
moveTo( )：
//直接设置窗口到对应的位置 X 200 Y 2O0
window.moveTo(200,200)moveBy( )：
//在窗口原本的位置上改变对应的距离 X 300、Y 300 正数加,负数减
window.moveBy(300,300)（5）、改变滚动栏位置的方法
scrollTo( )：
//直接将滚动栏移动到对应的位置 X 500 Y500
window.scrollTo(500,500)scrollBy( )：
//在滚动栏原本位置的基础上改变对应的距离 X 100 Y 100 正数加,负数减
window.scrollBy(100,100)（6）、打印方法
//打印方法 print 调用打印机
window.print()（7）、查找方法
//查找方法
window.find()（7）、窗口聚焦和失焦的方法
blur( )：
//失去焦点
window.blur()focus( )：
//聚集焦点
window.focus()4、定时器
- setTimeout(event, time) 在指定毫秒数(time)之后调用函数或表达式(只调用一次)
- setInterval(event, time) 每隔指定毫秒数(time)调用函数或表达式(循环调用)
- clearTimeout() 取消先前通过setTimeout( )调用的定时器，需要给定时器命名
- clearInterval() 取消先前通过setInterval( )调用的定时器，需要给定时器命名
5、window对象的相关属性
（1）、parent获取窗口的父窗口
window.parent //得到对应的父窗口（2）、 innerHeight获取当前网页高度，innerWidth获取当前网页宽度
//获取窗口的大小 获取宽高 对应的白色部分
window.innerHeight
window.innerWidth6、window对象常用的相关方法与属性表格汇总
| 序号 | 方法(函数) / 属性 | 描述 |
|---|---|---|
| 1 | window.console.log( ) | 日志打印； |
| 2 | console.error( ) | 错误打印； |
| 3 | console.info( ) | 信息打印； |
| 4 | console.warn( ) | 警告打印； |
| 5 | console.debug( ) | 调试打印； |
| 6 | alert( ) | 提示框；它是一个全局方法，用于弹出一个提示框，并显示一段文本消息给用户； |
| 7 | confrim( ) | 交互框；它是一个全局方法，用于显示一个带有确定和取消按钮的对话框，返回值为boolean，点击确定返回true，点击取消返回flase； |
| 8 | prompt( ) | 输入框；它是一个全局方法，用于显示一个带有输入框的对话框，它能接收两个参数，第一个是用户输入的提示性文本，第二个是输入框中的默认值； |
| 9 | open( ) | 此函数用于打开一个新的浏览器窗口或标签，并加载指定的URL；它能接收三个参数，第一个是URL且必填，第二个是页面的打开方式，默认为" _blank(新窗口打开) "，第三个是打开窗口的配置选项，如窗口的大小、位置，常用的选项有"width"、"height"、"top"和"left"等； |
| 10 | close( ) | 关闭当前窗口； |
| 11 | resizeTo( ) | 直接改变窗口大小到对应的宽高，参数1为width，参数2为height； |
| 12 | resizeBy( ) | 在窗口原本大小的基础上改变对应的宽高，参数1为width，参数2为height，正数加，负数减； |
| 13 | moveTo( ) | 直接设置窗口到对应的位置，参数1为X轴，参数2为Y轴； |
| 14 | moveBy( ) | 在窗口原本的位置上改变对应的距离，参数1为X轴，参数2为Y轴，正数加，负数减； |
| 15 | scrollTo( ) | 直接将滚动栏移动到对应的位置，参数1为X轴，参数2为Y轴； |
| 16 | scrollBy( ) | 在滚动栏原本位置的基础上改变对应的距离，参数1为X轴，参数2为Y轴，正数加，负数减； |
| 17 | window.print( ) | 打印方法，调用打印机； |
| 18 | window.find( ) | 查找方法； |
| 19 | window.blur( ) | 失去焦点； |
| 20 | window.focus( ) | 聚集焦点； |
| 21 | setTimeout( ) | 参数1为函数或表达式，参数2为毫秒数，在指定毫秒数之后调用函数或表达式(只调用一次)； |
| 22 | setInterval( ) | 参数1为函数或表达式，参数2为毫秒数，每隔指定毫秒数调用函数或表达式(循环调用)； |
| 23 | clearTimeout( ) | 取消先前通过setTimeout( )方法调用的定时器，需要给定时器命名； |
| 24 | clearInterval( ) | 取消先前通过setInterval( )调用的定时器，需要给定时器命名； |
| 25 | window.parent | 得到对应的父窗口； |
| 26 | window.innerWidth | 获取当前网页宽度； |
| 27 | window.innerHeight | 获取当前网页高度； |
二、document对象（文档对象）
概述：Document对象是JavaScript中的一个内置对象，表示整个HTML文档，它提供了访问和操作HTML文档的方法和属性。
Document对象有以下特点：
- 表示整个HTML文档：Document对象代表整个HTML文档，包含了HTML页面中的所有元素，比如文本、图像、链接等。
- 提供了访问HTML元素的方法：通过Document对象，可以访问和操作HTML文档中的元素，比如可以通过getElementById()方法获取指定id的元素，或者通过getElementsByTagName()方法获取指定标签名称的元素列表。
- 提供了访问文档信息的属性：Document对象还提供了一些属性，用于获取文档的信息，比如可以通过title属性获取文档的标题，或者通过URL属性获取文档的URL地址。
- 提供了修改文档结构的方法：通过Document对象，可以修改HTML文档的结构，比如可以通过createElement()方法创建新的元素节点，或者通过appendChild()方法将一个元素节点添加到文档中。
总之，Document对象是JavaScript中访问和操作HTML文档的入口点，提供了丰富的方法和属性，方便开发者对HTML文档进行操纵。此外，Document对象还提供了许多其他属性和方法，用于处理文档的结构、样式和事件。它是操作和操纵整个HTML文档的关键对象。
方法及属性详解超完整网址：JavaScript核心之Document对象详解（document属性，方法）_javascript document-CSDN博客
三、Location对象（地址栏对象）
概述：Location对象是 JavaScript 中的一个内置对象，它表示当前窗口中加载的文档的URL；
Location对象具有以下特点：
- Location对象是Window对象的属性之一，可以通过window.location或location来访问。
- Location对象的一些常用属性包括href、protocol、hostname、port、pathname、search和hash，它们分别表示URL的完整路径、协议、主机名、端口、路径、查询参数和哈希部分。
- Location对象的href属性是只读的，但其他属性都是可读写的，可以通过修改它们来改变当前浏览器窗口的URL。
- Location对象提供了一些方法，比如assign()、replace()和reload()，可以用于在浏览器窗口中加载或重新加载一个新的URL。
- Location对象可以用于解析和操作URL，比如获取查询参数、判断是否在同一域内等。
- Location对象也可以用于页面间的跳转和页面状态的管理，比如从一个页面跳转到另一个页面，或者通过修改hash部分来实现前端路由。
总之，Location对象是 JavaScript 中用于操作和获取当前窗口URL的一个重要对象，它提供了丰富的属性和方法，方便开发者在浏览器窗口中进行URL相关的操作和跳转。
URL的组成
| 组成 | 说明 |
|---|---|
| protocol | 通信协议，常用的http、ftp、maito等； |
| host | 主机(域名)，www.itheima.com； |
| port | 端口号；可选，省略时使用方案的默认端口，如http的默认端口为80； |
| path | 路径由零或多个 ' / ' 符号隔开的字符串，一般用来表示主机上的一个目录或文件地址； |
| query | 参数；以键值对的形式通过&符号分隔开来； |
| fragment | 片段；#后面内容，常见于链接、锚点； |
location对象的属性
| 属性 | 返回值 |
|---|---|
| location.href | 获取整个URL；也可以设置整个URL，设置时直接赋值即可，例如：location.href = 'http://www.taobao.com'； |
| location.host | 返回主机（域名），www.itheima.com； |
| location.port | 返回端口号，如果未写则返回空字符串； |
| location.pathname | 返回路径； |
| location.search | 返回参数； |
| location.hash | 返回片段，#后面内容，常见于链接、锚点； |
location对象常见方法
| location对象方法 | 返回值 |
|---|---|
| location.assign(URL) | 用于加载一个新的URL，并将新的URL替换当前的URL； |
| location.replace(URL) | 替换当前页面，因为不记录历史，所以不能后退页面； |
| location.reload() | 用于重新加载当前页面，该方法没有参数，调用它将刷新当前页面并重新加载；需要注意的是，该方法有时可能会带有一些附加参数，如参数为true则强制刷新； |
四、navigator对象（导航对象）
概述：Navigator对象是 JavaScript 中的一个内置对象，它提供了关于浏览器的信息和功能
Navigator对象具有以下特点：
- Navigator对象是Window对象的属性之一，可以通过window.navigator或navigator来访问。
- Navigator对象提供了一系列属性，包括appCodeName、appName、appVersion、platform、userAgent等，这些属性可以用来获取浏览器的相关信息，如浏览器代码名称、浏览器名称、浏览器版本、操作系统平台、用户代理字符串等。
- Navigator对象还提供了一些方法，比如geolocation、javaEnabled()等，用于获取用户地理位置信息或判断浏览器是否支持Java。
- Navigator对象的属性和方法的可用性可能因浏览器类型、版本等不同而有所差异，因此在使用时需要做兼容性处理。
- Navigator对象还可以用于检测浏览器功能的支持情况，比如通过判断是否支持某些特定的API或属性来进行适配或优化。
总之，Navigator对象提供了获取浏览器信息和功能的相关属性和方法，开发者可以通过它来了解用户的浏览器环境，以便针对性地进行开发和优化。需要注意的是，由于浏览器的差异性，Navigator对象的属性和方法的可用性可能有所不同，因此在使用时需要进行兼容性处理。
navigator对象举例：获取userAgent的信息
程序代码：
window.navigator对象测试：
效果：
诠释：可见，列出了操作系统（我用的是win10）、浏览器等信息
navigator对象更多的属性
| 序号 | 属性 | 描述 |
|---|---|---|
| 1 | appCodeName | 获取浏览器的内部代码名； |
| 2 | appMinorVersion | 获取浏览器的辅版本号，常用于浏览器的补丁货服务包； |
| 2 | appName | 获取浏览器的名称； |
| 3 | appVersion | 获取浏览器的平台和版本信息； |
| 4 | language | 获取当前浏览器的语言，例如，可能的一个结果是“zh-CN”； |
| 5 | cookieEnabled | 获取浏览器中是否启用 cookie 的布尔值； |
| 6 | cpuClass | 获取计算机系统的 CPU 型号，例如，Inter通常得到的结果是x86； |
| 7 | onLine | 获取浏览器是否处于在线模式，结果是布尔值； |
| 8 | platform | 获取运行浏览器的操作系统平台； |
| 9 | systemLanguage | 获取 OS 使用的默认语言； |
| 10 | userAgent | 获取由客户机发送服务器的 user-agent 头部的值； |
| 11 | userLanguage | 获取 OS 的自然语言设置； |
| 12 | mimeTypes | 获取浏览器支持的所有的MIME类型的数组； |
| 13 | plugins | 获取安装在浏览器上的所有插件的数组； |
| 14 | product | 获取浏览器的产品名，例如，可能的结果是Gecko； |
| 15 | productSub | 获取浏览器产品的更多信息，例如，可能的结果是20030107； |
| 16 | vendor | 获取浏览器的厂商名称，例如，可能的结果是Google Inc； |
| 17 | vendorSub | 获取浏览器的厂商更多信息； |
五、screen对象（屏幕对象）
概述：screen对象提供了有关用户屏幕的信息，可以访问用户屏幕的宽度、高度、颜色深度等属性，screen对象是一个全局对象，可以直接访问，无需实例化；
screen对象的特点包括：
screen对象是只读的，无法对其进行修改。screen对象提供了有关用户屏幕的信息，可以根据这些信息来进行页面布局和响应式设计。screen对象的属性值是实时的，即每次访问都会返回最新的屏幕信息。screen对象提供了一些其他的方法和属性来控制屏幕显示，如screen.orientation用于获取或设置屏幕的方向（横向或纵向）。screen对象在不同的浏览器中可能会有一些差异，建议在使用时进行适当的兼容性处理。
Screen对象属性
| 序号 | 属性 | 描述 |
|---|---|---|
| 1 | availHeight | 返回显示屏幕的高度 (除 Windows 任务栏之外)； |
| 2 | availWidth | 返回显示屏幕的宽度 (除 Windows 任务栏之外)； |
| 3 | height | 返回显示屏幕的高度； |
| 4 | width | 返回显示器屏幕的宽度； |
| 5 | bufferDepth | 设置或返回调色板的比特深度； |
| 6 | colorDepth | 返回目标设备或缓冲器上的调色板的比特深度； |
| 7 | deviceXDPI | 返回显示屏幕的每英寸水平点数； |
| 8 | dev iceYDPI | 返回显示屏幕的每英寸垂直点数； |
| 9 | fontSmoothingEnabled | 返回用户是否在显示控制面板中启用了字体平滑； |
| 10 | logicalXDPI | 返回显示屏幕每英寸的水平方向的常规点数； |
| 11 | logicalYDPI | 返回显示屏幕每英寸的垂直方向的常规点数； |
| 12 | pixelDepth | 返回显示屏幕的颜色分辨率（比特每像素）； |
| 13 | updateInterval | 设置或返回屏幕的刷新率； |
六、history对象（历史对象）
概述：该对象表示浏览器的历史记录，它提供了一些方法和属性，用于操作浏览器的历史记录，并且可以在不刷新页面的情况下导航和管理浏览器历史记录；
history对象具有以下特点：
-
访问历史记录：通过
history对象，可以访问和获取浏览器的历史记录。使用length属性可以获取历史记录中的页面数量，使用state属性可以获取当前历史记录页面的状态对象。 -
前进和后退：通过
back()和forward()方法，可以在不刷新页面的情况下进行前进和后退操作。back()方法相当于点击浏览器的后退按钮，forward()方法相当于点击浏览器的前进按钮。 -
跳转到指定页面：使用
go(number)方法，可以跳转到指定的历史记录页面。number参数可以是正数，表示前进到指定页面的步数，或者是负数，表示后退到指定页面的步数。 -
更新历史记录：使用
pushState()方法和replaceState()方法，可以向历史记录中添加新的URL，并可以在不刷新页面的情况下更新URL。这对于创建单页面应用程序（SPA）以及使用AJAX技术非常有用，可以通过修改URL来管理页面状态和导航。
需要注意的是，浏览器对history对象的访问受到安全限制。由于隐私和安全原因，开发人员不能直接修改或删除用户的历史记录。只能在用户的操作下，通过使用back()、forward()和go()方法来进行历史记录的导航。
history对象的属性及方法
| 属性 / 方法 | 描述 |
|---|---|
| state | 返回当前页面的状态信息； |
| length |
返回历史浏览记录的当前长度； |
| scrollRestoration | 它用于设置浏览器在导航后是否恢复滚动位置，它可以用来控制浏览器是否将滚动位置还原到导航前的状态；该属性有两个可能的值，就是auto与manual，auto表示默认值，表示浏览器将尝试自动恢复滚动位置，这意味着当用户导航到新页面时，浏览器会尝试将滚动位置还原到导航前的位置。manual表示浏览器不会自动恢复滚动位置，当用户导航到新页面时，浏览器将保持滚动位置不变； |
| title | 返回当前页面的标题； |
| url | 返回当前页面的URL； |
| forward() | 用于在浏览器的历史记录中向前导航，它将导航到浏览器历史记录中的下一个页面； |
| back() | 用于在浏览器的历史记录中向后导航，它将导航到浏览器历史记录中的上一个页面； |
| go(number) | 该方法接受一个整数参数，该参数表示要导航的页面相对于当前页面的偏移量，如果参数为正数，则向前导航，如果参数为负数，则向后导航，如果参数为0，则刷新当前页面； |
| pushState() | 该方法用于向浏览器历史记录中添加一条新的记录，并且不会引发页面的刷新。该方法接收三个参数：一个状态对象，一个标题（可选），以及一个URL（可选）。当调用pushState()方法时，浏览器会将新的状态对象添加到历史记录中，并将地址栏的URL更改为指定的URL。这样，用户可以通过浏览器的前进和后退按钮切换不同的页面状态。 |
| replaceState() | 该方法用于修改当前浏览器历史记录的当前状态。与pushState()方法类似，replaceState()方法也接收三个参数：一个状态对象，一个标题（可选），以及一个URL（可选）。调用replaceState()方法后，当前的历史记录会被替换为新的状态对象，并且地址栏的URL也会被替换为指定的URL。与pushState()方法不同的是，replaceState()方法不会创建新的历史记录，而是替换当前的历史记录。这意味着用户无法通过浏览器的后退按钮返回到替换前的状态； |
看完点赞~人美心善~