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

2024-01-08 02:14:13

什么是BOM？

BOM中的对象

一、window对象?

（2）、?innerHeight获取当前网页高度，innerWidth获取当前网页宽度

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

navigator对象举例：获取userAgent的信息

什么是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；

参数：

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.innerWidth

6、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的信息

程序代码：

<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）、浏览器等信息

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

看完点赞~人美心善~

文章来源:https://blog.csdn.net/weixin_72083767/article/details/135271670
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！