js中的简单BOM操作

威猛的卡桑

已于 2022-11-18 08:55:21 修改

阅读量488

点赞数 1

文章标签： html javascript 前端

于 2022-10-20 21:17:21 首次发布

本文链接：https://blog.csdn.net/wdtn5656/article/details/127433840

版权

1.什么是BOM

BOM:Browser Object Model浏览器对象模型，在Bom中给我们提供了一整套可以操作浏览器的属性和方法

浏览器的部分（一般都是css不能操作的）

BOM操作中统一语法都是：window.XXX

但是其实一般写代码的时候这个window是可以忽略不写

比如alert其实是归属于BOM的，标准语法应该是：window.alert()

注意：因为这些东西都是属于浏览器给的，所以就会导致在不同的浏览器上显示的效果可能是不一样的。比如相同的alert代码，在谷歌上的显示效果和在edge上的显示效果是不一样的。

2.浏览器可视窗口尺寸

可视窗口：就是我们可以看见的区域

获取可视窗口的尺寸：

获取窗口的宽度：window.innerWidth

获取窗口的高度：window.innerHeight

注意：获取的宽度和高度是包含滚动条在内的

3.浏览器的弹出框

1.提示框：

语法：window.alert('提示文本')

表现形式：一个提示文本+一个确定按钮

返回值：undefined

2.询问框

语法：window.confirm('提示文本')

表现形式：一个提示文本+一个确定按钮+取消按钮

返回值：用户点了确定就返回true，点取消就返回false

3.输入框

语法：window.prompt('提示文本')

表现形式：一个提示文本+一个确定按钮+取消按钮+一个文本输入框

返回值：点了确定返回的就是文本输入框的内容，点了取消返回的就是null

共同点：都会阻止程序的执行，必须等到用户点了程序才会继续向下执行

4.浏览器的常见事件

事件一般都是有触发条件，事件名称之前写的时候一般都要加on

1)load

语法：window.onload = function(){}

当触发了load事件之后才会执行function中的代码

load什么时候触发：当页面中所有的外部资源（html、css、js、图片、视频、音频）全部加载完毕的时候就会自动触发load事件

使用场景：

假如js代码写在了head标签中了，你还想操作页面元素（标签），这个时候因为代码从上到下依次执行，会先执行js，再执行body中的语句，所以会存在找不见这个标签的风险。

这个时候我们就只需要加一句：window.onload将我们的代码放到load的执行函数中就没有这个问题了;因为onload会等到页面资源加载完毕之后才会执行。

2)resize

语法：window.onresize = function(){}

resize的触发时机：当页面尺寸发生改变的时候就会触发

3)scroll

语法：window.onscroll = function(){}

触发时机：当页面的滚动条位置发生改变的时候就触发

5.浏览器的地址栏

在window之下有一个location对象，这个对象中存储了一些和浏览器地址栏相关的信息

1）window.location.href 这是一个可读可写属性

拿到网址：

语法：window.location.href

设置网址：

语法：window.location.href = '新的网址'

案例：点击一个按钮，切换网址

1.在js中获取按钮

2.给按钮绑定一个点击事件

3.更改网址

<body>
<button id='btn'>点击我切换</button>
</body>

<script>
//先获取这个按钮
var btn=document.getElementById('btn')
//添加点击事件
    btn.onclick=funtion(){
    //更改网址
    windows.location.href='http://www.baidu.com'
}
</script>

2）reload()

语法：window.location.reload()

作用：重新加载页面（其实就是刷新的意思）

注意：这句话不要放在打开页面就能执行的地方,否则会一直刷新

案例：

写一个点击按钮实现刷新的功能

步骤：

1.在js中先获取按钮

2.给按钮绑定点击事件

3.点击执行执行刷新语句

<body>
<button id='bttn'>点击刷新</button>
</body>
<script>
//先获取这个按钮
var bttn=document.getElementById('bttn')
//添加点击属性
bttn.onclick=funtion(){
     windows.location.reload()
}
</script>

6.操作浏览器的标签页

1)open()

语法：window.open('地址')

会以新窗口的方式打开该地址

var btn = document.getElementById('btn')
    btn.onclick = function () {
        // 执行window.open()  点了按钮之后会以新窗口的方式打开百度这个网址
        window.open('http://www.baidu.com')
    }

2)close()

语法：window.close()

会关闭当前页面

 var btn2 = document.getElementById('btn2')
    btn2.onclick = function () {
        window.close()
    }

7.浏览器卷去的尺寸

获取浏览器卷去的高度

语法1：document.documentElement.scrollTop

(html页面中有doctype标签的时候就可以使用)

语法2：document.body.scrollTop

（当html页面中没有doctype标签的时候才可以使用）

兼容语法：

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

获取浏览器卷去的宽度

语法1：document.documentElement.scrollLeft

语法2：document.body.scrollLeft

兼容语法：

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

执行条件：只要页面滚动就会自动触发

8.浏览器的历史记录

操作历史记录：

注意：得有历史记录才可以操作

1）回退：

语法：window.history.back()

作用：回到上一个历史记录页面（等价于←按钮）

2）前进：

语法：window.history.forward()

作用：去到下一个历史记录（等价于→按钮）

3)跳转：

语法：window.history.go(参数)

这个参数可以写一个数字

正整数：就是前进几个页面

负整数：回退几个页面

0：跳转到本页面，其实就是刷新

9.设置浏览器的滚动距离

语法：window.scrollTo(参数)

写参数的方案1：传递数字

第一个数字指的是x，第二个数字指的是y，x表示横向的卷去的尺寸，y表示纵向卷去的尺寸

注意：

1.他是瞬间滚动，没有动画效果

2.必须传递2个数字，1个不行

写参数的方案2：传递一个对象

语法：window.scrollTo({left:XXX,top:XXX,behavior:'smooth'})

在这里left表示横向卷去的尺寸，top表示纵向卷去的尺寸，想设置谁就设置谁

还可以在对象中写第三条属性，比如写一个behavior将值设置位smooth，这样就可以有平滑滚动的效果

var btn = document.getElementById('btn')
    btn.onclick = function () {
        // 设置卷去的尺寸，页面横向卷去100 纵向卷去0，其实就是纵向回到开始的位置
        // window.scrollTo(0,0)
        window.scrollTo({ left: 0, top: 0, behavior: 'smooth' })
    }

10.本地储存

本地存储：将程序中产生的一些数据存储到电脑中

常见的本地存储方案：

1.storage方案：

方式一：localStorage====本地持久化存储（只要不手动删除一直是存在的）

在检查工具中找-Application-storage-localStorage可以看见存储的数据

语法：

存储数据（增）：window.localStorage.setItem(key,value)

注意：改数据的语法其实和存储数据的语法是一样的，因为在对象中不允许出现重复的键名，所以键名如果第二次出现就是更改的意思

要在本地运行：open with liverServer

删除数据： window.localStorage.removeItem(键名)

一键清空：window.localStorage.clear()

查询数据：window.localStorage.getItem(键名)

特点：

1.一旦存储就永久存在，除非自己手动删除

2.可以跨页面通讯，也就是在a页面中存储的数据可以在别的页面获取到

3.存储的时候只能存一些基本类型的数据，复杂类型的数据是不能存储

<body>
    <button id="btn">修改</button>
    <button id="btn2">删除</button>
    <button id="btn3">一键清空</button>
    <button id="btn4">获取用户名</button>
</body>
<script>
    var btn = document.getElementById('btn')
    btn.onclick = function () {
        // 修改键名为username的这条数据，将值设置为李四
        window.localStorage.setItem('username', '李四')
    }
    var btn2 = document.getElementById('btn2')
    btn2.onclick = function () {
        // 把键名为password的这条数据删除掉
        window.localStorage.removeItem('password')
    }
    var btn3 = document.getElementById('btn3')
    btn3.onclick = function () {
        // 把本地存储的数据一键清空
        window.localStorage.clear()
    }
    var btn4 = document.getElementById('btn4')
    btn4.onclick = function () {
        // 得到用户名对应的值
        var res = window.localStorage.getItem('username')
        console.log(res);
    }
</script>

2：sessionStorage

添加数据、删除数据、修改数据、查询数据、一键清空语法和localStorage的语法是一样的

区别：sessionStorage是会话存储（临时存储）只要浏览器关了就没了

也支持跨页面通信，在别的页面中也可以获取数据(前提：别的页面必须是通过本页面跳转过去的才可以,而且必须是当前窗口，如果是新窗口就不行了)

<body>
    <button id="btn4">获取</button>
    <button id="btn5">获取session存储的数据</button>
</body>

<script>
    var btn4 = document.getElementById('btn4')
    btn4.onclick = function () {
        //    想得到用户名对应的值
        var res = window.localStorage.getItem('username')
        console.log(res);
        var res1 = window.localStorage.getItem('password')
        console.log(res1);
    }

    var btn5 = document.getElementById('btn5')
    btn5.onclick = function () {
        // 获取session之下键名为zhanghao的数据
      var res =   window.sessionStorage.getItem('zhanghao')
        console.log(res);
    }
</script>

11.cookie存储数据

用cookie存储数据的语法:
document.cookie = 'key=value'
document.cookie = 'password=123456;expires='+时间对象
我们设置的时间最终都会按照世界标准时间执行的
toGMTString()===转成北京时间
cookie存数据的特点：
1.cookie只能存储字符串
2.cookie存储数据是有大小限制的，只能存储4kb左右的数据，不能存太多
3.cookie存储默认是会话级别的，也就是窗口关了就没了，但是我们可以设置过期时间
4.cookie的操作必须依赖’服务器‘，通过本地打开的页面是不能操作cookie的
5.cookie的数据在前后端通讯的时候是会自动的携带
6.存储依赖域名。在哪个域名下打开的，就只能在哪个域名使用，不能跨域名通讯的
操作cookie关键点：要研究页面怎么样可以在服务器打开。（只需要借助vscode的live server插件即可）
在运行的时候：右键选择：open with live server选项运行

注意：要在本地运行：open with liverServer

<script>
    var time=new Date()
    console.log(time);
    time.setMinutes(07)
    document.cookie='username=zhangsan;expires='+time.toGMTString()
</script>

封装一个函数，保存cookie的值后，当输入对应的属性名后，可以得到对应的值

// 保存值到cookie中
    document.cookie="name=张三";
    document.cookie = "age=张三; expires=" + new Date( new Date().getTime() + 24*60*60*1000);
    // document.cookie="age=39; height="+ new Data(new Data().getTime()+1*60*1000); 
    //获取cookie的值
    console.log(document.cookie);

    // 封装一个函数，完成下面的功能：传入一个属性名，返回这个属性名对应的值
    function getCookie(key){
       //获取所有的cookie值,定义一个变量用来保存获取到的cookie值
       var data=document.cookie
       //将拿到的数据进行拆分,得到一个数组['name=张三', 'sex=true', 'age=30']
       var arr=data.split("; ")
       console.log(arr);
       //创建一个空对象
       var obj={}
       //将该数组进行遍历
       arr.forEach((item)=>{
           //将得到的数组中的字符串用=进行拆封，将分割后的属性值作为对象的属性值
           //分割后的属性名作为对象的属性名['name', '张三']
           var arrtwo=item.split('=')
           console.log(arrtwo);
           obj[arrtwo[0]]=arrtwo[1]
       })
    //    console.log(obj);
       return obj[key]
    }
    console.log( getCookie('name'));

威猛的卡桑

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中的简单BOM操作

BOM；sessionStorage&storage方案：&storage方案：&cookie存储数据&本地储存&设置浏览器的滚动距离&浏览器的历史记录&浏览器卷去的尺寸&操作浏览器的标签页&浏览器的地址栏&浏览器的常见事件&浏览器可视窗口尺寸&浏览器的弹出框
复制链接

扫一扫