JavaScript——BOM的常用属性和方法

最新推荐文章于 2021-08-08 00:09:57 发布

Abby_zzy

最新推荐文章于 2021-08-08 00:09:57 发布

阅读量678

点赞数 4

文章标签： BOM的属性 BOM的方法

本文链接：https://blog.csdn.net/Abby_zzy/article/details/88853181

版权

什么是BOM

BOM是浏览器对象模型

认识BOM

1：BOM 包括所有的JS 对象，是一个对象集合群

2: 在JS 中最大对象是window对象.

3: 全局的也是相对window 来说的；也就是说全局的东西，其它地方都可以访问

4：学习DOM 目的；进一步熟悉JS 是怎么在浏览器这个平拍进行运行的

5; 这里需要更加了解浏览器一些其它的功能

作用：

使JS有能力和浏览器对话。注意区分:时间对象；是实现用户和浏览器的交接；js与html和CSS 的交互
Bom 对象的结构图
在这里插入图片描述

window对象

window是最顶层的对象

window有六大属性，这六大属性本身也是对象

DOM对象

frames[]

history	<作用保存浏览器历史记录信息>
back()：	加载 history 列表中的前一个 URL。
forward()：	加载 history 列表中的下一个 URL。
go()：	加载 history 列表中的某个具体页面。
如常见的返回上一页：	history.go(-1)和history.back()

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <a href="./09返回页面操作.html">跳转页面</a>
    <div class="btn">下一个</div>
    <script>
      var btn = document.getElementsByClassName('btn')[0]
    </script>
</body>
</html>
----------------点击上方a标签，跳转至下个页面，点击下个页面的btn事件可返回至上方页面----------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="btn">返回上一个页面</div>
    <script>
        var btn = document.getElementsByClassName('btn')[0]
        btn.addEventListener('click', function () {
            //加载 history 列表中的前一个 URL链接；非地址 ；换句话说；返回上一个页面  绝对路径
            history.back() 
        })
    </script>
</body>
</html>

location

可通过 window.location 属性来访问，对象中信息,与URL 利用有关的所有信息

location.href	/获取url地
location.pathName	/获取页面文件路

navigator

包含的属性描述了正在使用的浏览器
常用属性：

appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
platform	返回运行浏览器的操作系统平台
appCodeName	返回浏览器的代码名

screen

存放着有关显示浏览器屏幕的信息
常用属性：

availHeight	返回显示屏幕的可用高度(以像素计，减去界面特性，比如窗口任务栏)
availWidth	返回显示屏幕的可用宽度(以像素计，减去界面特性，比如窗口任务栏)
height	返回屏幕区域的实际高度
width	返回屏幕区域的实际宽度

window对象下的document属性，也是对象

对象属性与方法

window的属性和方法的调用：
window.属性，window.方法()
也可以直接属性方法()，但在多浏览器的情况下不推荐，最好是带着window

常用的属性和方法:

Alert()	弹出一个对话框
Confirm(‘请确定或者取消’)	有确定和取消的对话框
Var num = prompt(‘请输入一个数字’,0)	第一个参数是说明，第二个是说明，返回输入的值
Open()	新建窗口，它可以接受三个参数
Open()	弹出一个新的窗口
Open(‘http://www.baidu.com’)	第一个参数是你要跳转的URL
Open(‘http://www.baidu.com’,’baidu’)	窗口的名称或者窗口的目标，命名可以给新窗口设置一个名称，凡是以这个名称打开的窗口都在这个窗口里加载URL；目标_blank _parent…以什么形式打开
Open(‘http://www.baidu.com’,’baidu’,’width=400,height=400’)	特定的字符串，表示各种窗口的配置
open本身会返回这个窗口的window对象
获取是什么模式的浏览器方法	document. compotmode // CSS1compot 标准模式 BackCompat 怪异模式

例：

window.alert('弹框方法；可以省略window') // 阻塞的邹勇
window.console.log('console对象也是window下的方法')// 测试作用
window.confirm(); //用于显示一个带有指定消息和 OK 及取消按钮的对话框
window.close(); //关闭当前窗口
window.prompt() // 输入数字内容
window.open('http://www.baidu.com') // 初始化加载网页时候；代开一个页面

Abby_zzy

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript——BOM的常用属性和方法

什么是BOMBOM是浏览器对象模型认识BOM1：BOM 包括所有的JS 对象，是一个对象集合群2: 在JS 中最大对象是window对象.3: 全局的也是相对window 来说的；也就是说全局的东西，其它地方都可以访问4：学习DOM 目的；进一步熟悉JS 是怎么在浏览器这个平拍进行运行的5; 这里需要更加了解浏览器一些其它的功能作用：使JS有能力和浏览器对话。注意区分:时间对象...
复制链接

扫一扫