JavaScript——BOM中所有对象的常用属性和方法【万字长篇超宝典】

发布时间：2024年01月05日

目录

什么是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()是一个全局方法，用于弹出一个提示框，并显示一段文本消息给用户；

<script>
    alert("Hello World!")
</script>

效果：?

（2）、confrim( )交互框

作用：confrim()是一个全局方法，用于显示一个带有确定和取消按钮的对话框，返回值为boolean，点击确定返回true，点击取消返回flase；

<script>
    let isOk = confirm("确定退出?")
    if (isOk) {
        // 用户点击了确认按钮后的执行操作
    } else {
        // 用户点击了取消按钮后的执行操作
    }
</script>

效果：

（3）、prompt( )输入框

作用：prompt()是一个全局方法，用于显示一个带有输入框的对话框，它可以接收两个参数，第一个是用户输入的提示性文本，第二个是输入框中的默认值；

<script>
    prompt("请告诉我你的名字：", "张三");
</script>

效果：

3、窗口打开关闭的方法

（1）、open( )打开一个新的窗口

作用：open( )函数用于打开一个新的浏览器窗口或标签，并加载指定的URL；

参数：

  1. url：要打开的URL地址；
  2. target：可选参数，指定打开URL的目标位置，常用的取值有" _self（本页面打开）"、" _blank（新页面打开）"、" _parent " 和 " _top "，默认为 " _blank "，表示在新的标签页或窗口打开URL；
  3. 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.innerWidth

6、window对象常用的相关方法与属性表格汇总

序号方法(函数) / 属性描述
? 1window.console.log( )日志打印；
? 2console.error( )错误打印；
? 3console.info( )信息打印；
? 4console.warn( )警告打印；
? 5console.debug( )调试打印；
? 6alert( )提示框；它是一个全局方法，用于弹出一个提示框，并显示一段文本消息给用户；
? 7confrim( )交互框；它是一个全局方法，用于显示一个带有确定和取消按钮的对话框，返回值为boolean，点击确定返回true，点击取消返回flase；
? 8prompt( )输入框；它是一个全局方法，用于显示一个带有输入框的对话框，它能接收两个参数，第一个是用户输入的提示性文本，第二个是输入框中的默认值；
? 9open( )此函数用于打开一个新的浏览器窗口或标签，并加载指定的URL；它能接收三个参数，第一个是URL且必填，第二个是页面的打开方式，默认为" _blank(新窗口打开) "，第三个是打开窗口的配置选项，如窗口的大小、位置，常用的选项有"width"、"height"、"top"和"left"等；
?10close( )关闭当前窗口；
?11resizeTo( )直接改变窗口大小到对应的宽高，参数1为width，参数2为height；
?12resizeBy( )在窗口原本大小的基础上改变对应的宽高，参数1为width，参数2为height，正数加，负数减；
?13moveTo( )直接设置窗口到对应的位置，参数1为X轴，参数2为Y轴；
?14moveBy( )在窗口原本的位置上改变对应的距离，参数1为X轴，参数2为Y轴，正数加，负数减；
?15scrollTo( )直接将滚动栏移动到对应的位置，参数1为X轴，参数2为Y轴；
?16scrollBy( )在滚动栏原本位置的基础上改变对应的距离，参数1为X轴，参数2为Y轴，正数加，负数减；
?17window.print( )打印方法，调用打印机；
?18window.find( )查找方法；
?19window.blur( )失去焦点；
?20window.focus( )聚集焦点；
?21setTimeout( )参数1为函数或表达式，参数2为毫秒数，在指定毫秒数之后调用函数或表达式(只调用一次)；
?22setInterval( )参数1为函数或表达式，参数2为毫秒数，每隔指定毫秒数调用函数或表达式(循环调用)；
?23clearTimeout( )取消先前通过setTimeout( )方法调用的定时器，需要给定时器命名；
?24clearInterval( )取消先前通过setInterval( )调用的定时器，需要给定时器命名；
?25window.parent得到对应的父窗口；
?26window.innerWidth获取当前网页宽度；
?27window.innerHeight获取当前网页高度；

二、document对象（文档对象）

概述：Document对象是JavaScript中的一个内置对象，表示整个HTML文档，它提供了访问和操作HTML文档的方法和属性。

Document对象有以下特点：

  1. 表示整个HTML文档：Document对象代表整个HTML文档，包含了HTML页面中的所有元素，比如文本、图像、链接等。
  2. 提供了访问HTML元素的方法：通过Document对象，可以访问和操作HTML文档中的元素，比如可以通过getElementById()方法获取指定id的元素，或者通过getElementsByTagName()方法获取指定标签名称的元素列表。
  3. 提供了访问文档信息的属性：Document对象还提供了一些属性，用于获取文档的信息，比如可以通过title属性获取文档的标题，或者通过URL属性获取文档的URL地址。
  4. 提供了修改文档结构的方法：通过Document对象，可以修改HTML文档的结构，比如可以通过createElement()方法创建新的元素节点，或者通过appendChild()方法将一个元素节点添加到文档中。

总之，Document对象是JavaScript中访问和操作HTML文档的入口点，提供了丰富的方法和属性，方便开发者对HTML文档进行操纵。此外，Document对象还提供了许多其他属性和方法，用于处理文档的结构、样式和事件。它是操作和操纵整个HTML文档的关键对象。

方法及属性详解超完整网址：JavaScript核心之Document对象详解（document属性，方法）_javascript document-CSDN博客

三、Location对象（地址栏对象）

概述：Location对象是 JavaScript 中的一个内置对象，它表示当前窗口中加载的文档的URL；

Location对象具有以下特点：

  1. Location对象是Window对象的属性之一，可以通过window.location或location来访问。
  2. Location对象的一些常用属性包括href、protocol、hostname、port、pathname、search和hash，它们分别表示URL的完整路径、协议、主机名、端口、路径、查询参数和哈希部分。
  3. Location对象的href属性是只读的，但其他属性都是可读写的，可以通过修改它们来改变当前浏览器窗口的URL。
  4. Location对象提供了一些方法，比如assign()、replace()和reload()，可以用于在浏览器窗口中加载或重新加载一个新的URL。
  5. Location对象可以用于解析和操作URL，比如获取查询参数、判断是否在同一域内等。
  6. 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对象是 JavaScript 中的一个内置对象，它提供了关于浏览器的信息和功能

Navigator对象具有以下特点：

  1. Navigator对象是Window对象的属性之一，可以通过window.navigator或navigator来访问。
  2. Navigator对象提供了一系列属性，包括appCodeName、appName、appVersion、platform、userAgent等，这些属性可以用来获取浏览器的相关信息，如浏览器代码名称、浏览器名称、浏览器版本、操作系统平台、用户代理字符串等。
  3. Navigator对象还提供了一些方法，比如geolocation、javaEnabled()等，用于获取用户地理位置信息或判断浏览器是否支持Java。
  4. Navigator对象的属性和方法的可用性可能因浏览器类型、版本等不同而有所差异，因此在使用时需要做兼容性处理。
  5. Navigator对象还可以用于检测浏览器功能的支持情况，比如通过判断是否支持某些特定的API或属性来进行适配或优化。

总之，Navigator对象提供了获取浏览器信息和功能的相关属性和方法，开发者可以通过它来了解用户的浏览器环境，以便针对性地进行开发和优化。需要注意的是，由于浏览器的差异性，Navigator对象的属性和方法的可用性可能有所不同，因此在使用时需要进行兼容性处理。

程序代码：

<body>

<h1>window.navigator对象测试：</h1>
<p id="user_agent"></p>

<script>
    function getUserAgent(){
        console.log(navigator.userAgent);  //控制台输出userAgent的信息

        let user_agent = window.document.getElementById("user_agent");  //获取id为user_agent的元素
        user_agent.innerHTML = navigator.userAgent;  //将userAgent的信息写入该元素
    }

    function isMac()
    {
        return /Mac/.test(navigator.userAgent);
    }

    getUserAgent();
    console.log("是否为Mac：" + isMac());
</script>
</body>

效果：

诠释：可见，列出了操作系统（我用的是win10）、浏览器等信息

序号属性描述
? 1appCodeName获取浏览器的内部代码名；
? 2appMinorVersion获取浏览器的辅版本号，常用于浏览器的补丁货服务包；
? 2appName获取浏览器的名称；
? 3appVersion获取浏览器的平台和版本信息；
? 4language获取当前浏览器的语言，例如，可能的一个结果是“zh-CN”；
? 5cookieEnabled获取浏览器中是否启用 cookie 的布尔值；
? 6cpuClass获取计算机系统的 CPU 型号，例如，Inter通常得到的结果是x86；
? 7onLine获取浏览器是否处于在线模式，结果是布尔值；
? 8platform获取运行浏览器的操作系统平台；
? 9systemLanguage获取?OS 使用的默认语言；
?10userAgent获取由客户机发送服务器的 user-agent 头部的值；
?11userLanguage获取?OS 的自然语言设置；
?12mimeTypes获取浏览器支持的所有的MIME类型的数组；
?13plugins获取安装在浏览器上的所有插件的数组；
?14product获取浏览器的产品名，例如，可能的结果是Gecko；
?15productSub获取浏览器产品的更多信息，例如，可能的结果是20030107；
?16vendor获取浏览器的厂商名称，例如，可能的结果是Google Inc；
?17vendorSub获取浏览器的厂商更多信息；

五、screen对象（屏幕对象）

概述：screen对象提供了有关用户屏幕的信息，可以访问用户屏幕的宽度、高度、颜色深度等属性，screen对象是一个全局对象，可以直接访问，无需实例化；

screen对象的特点包括：

  1. screen对象是只读的，无法对其进行修改。
  2. screen对象提供了有关用户屏幕的信息，可以根据这些信息来进行页面布局和响应式设计。
  3. screen对象的属性值是实时的，即每次访问都会返回最新的屏幕信息。
  4. screen对象提供了一些其他的方法和属性来控制屏幕显示，如screen.orientation用于获取或设置屏幕的方向（横向或纵向）。
  5. screen对象在不同的浏览器中可能会有一些差异，建议在使用时进行适当的兼容性处理。

Screen对象属性

序号属性描述
? 1availHeight返回显示屏幕的高度 (除 Windows 任务栏之外)；
? 2availWidth返回显示屏幕的宽度 (除 Windows 任务栏之外)；
? 3height返回显示屏幕的高度；
? 4width返回显示器屏幕的宽度；
? 5bufferDepth设置或返回调色板的比特深度；
? 6colorDepth返回目标设备或缓冲器上的调色板的比特深度；
? 7deviceXDPI返回显示屏幕的每英寸水平点数；
? 8dev iceYDPI返回显示屏幕的每英寸垂直点数；
? 9fontSmoothingEnabled返回用户是否在显示控制面板中启用了字体平滑；
?10logicalXDPI返回显示屏幕每英寸的水平方向的常规点数；
?11logicalYDPI返回显示屏幕每英寸的垂直方向的常规点数；
?12pixelDepth返回显示屏幕的颜色分辨率（比特每像素）；
?13updateInterval设置或返回屏幕的刷新率；

六、history对象（历史对象）

概述：该对象表示浏览器的历史记录，它提供了一些方法和属性，用于操作浏览器的历史记录，并且可以在不刷新页面的情况下导航和管理浏览器历史记录；

history对象具有以下特点：

  1. 访问历史记录：通过history对象，可以访问和获取浏览器的历史记录。使用length属性可以获取历史记录中的页面数量，使用state属性可以获取当前历史记录页面的状态对象。

  2. 前进和后退：通过back()和forward()方法，可以在不刷新页面的情况下进行前进和后退操作。back()方法相当于点击浏览器的后退按钮，forward()方法相当于点击浏览器的前进按钮。

  3. 跳转到指定页面：使用go(number)方法，可以跳转到指定的历史记录页面。number参数可以是正数，表示前进到指定页面的步数，或者是负数，表示后退到指定页面的步数。

  4. 更新历史记录：使用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()方法不会创建新的历史记录，而是替换当前的历史记录。这意味着用户无法通过浏览器的后退按钮返回到替换前的状态；

看完点赞~人美心善~

文章来源:https://blog.csdn.net/weixin_72083767/article/details/135271670
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章