JavaScript全解析——常见的BOM操作(下)

最新推荐文章于 2024-11-07 13:38:59 发布

千锋HTML5大前端

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量728

点赞数

分类专栏： JavaScrip系列文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/sdasadasds/article/details/130412575

版权

JavaScrip系列专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本篇为JavaScript全解析，常见的BOM操作下篇，上篇可以点此查看

浏览器的常用事件

浏览器的 onload 事件

这个不再是对象了，而是一个事件

该事件是在页面所有资源(html 结构, 视音频, 图片等)加载完毕后函数触发

window.onload = function () {
  console.log('页面已经加载完毕')
}

在 html 页面中把 js 写在 head 里面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 这个代码执行的时候，body 还没有加载
        // 这个时候我们就获取不到 body 中的那个 div

        // 就需要使用 window.onload 事件
        window.onload = function() {
            // 这个函数会在页面加载完毕以后在执行
            // 那么这个时候页面的 DOM 元素都已经加载了，我们就可以获取 div 了
        }
    </script>
</head>

<body>
    <div></div>
</body>

</html>

在html页面中把js写在body最后面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div></div>
    <script>
        // 这个代码执行的时候，body 已经加载完毕了
        // 在这里就可以获取到 div，写不写 window.onload 就无所谓了

        window.onload = function() {
            // 这个函数会在页面加载完毕以后在执行
            // 那么这个时候页面的 DOM 元素都已经加载了，我们就可以获取 div 了
        }
    </script>
</body>

</html>

浏览器的 onscroll 事件

这个 onscroll 事件是当浏览器的滚动条滚动的时候触发，也就是滚动条的位置发生改变的时候触发

这个滚动条的位置改变不管是横向滚动条还是纵向滚动条

或者鼠标滚轮滚动的时候出发

window.onscroll = function () {
  console.log('浏览器滚动了')
}

注意：前提是页面的高度要超过浏览器的可是窗口才可以。就是要出现滚动条

浏览器滚动的距离(卷去的高度和宽度)

浏览器内的内容既然可以滚动，那么我们就可以获取到浏览器滚动的距离

那么我们来思考一个问题

浏览器真的滚动了吗？

其实我们的浏览器是没有滚动的，是一直在那里，滚动的是什么？是我们的页面

所以说，其实浏览器没有动，只不过是页面向上走了

所以，这个已经不能单纯的算是浏览器的内容了，而是我们页面的内容

所以不是在用 window 对象了，而是使用 document 对象

scrollTop

获取的是页面向上滚动的距离

一共有两个获取方式

document.body.scrollTop
document.documentElement.scrollTop

window.onscroll = function () {
  console.log(document.body.scrollTop)
  console.log(document.documentElement.scrollTop)
}

两个都是获取页面向上滚动的距离

区别有：

IE 浏览器

没有 DOCTYPE 声明的时候，用这两个都行

有 DOCTYPE 声明的时候，只能用 document.documentElement.scrollTop

Chrome 和 FireFox

没有 DOCTYPE 声明的时候，用 document.body.scrollTop

有 DOCTYPE 声明的时候，用 document.documentElement.scrollTop

scrollLeft

获取页面向左滚动的距离

也是两个方法

○document.body.scrollLeft
○document.documentElementLeft

window.onscroll = function () {
  console.log(document.body.scrollLeft)
  console.log(document.documentElement.scrollLeft)
}

两者之间的区别和之前的 scrollTop 一样

浏览器的onresize事件

onresize 事件在浏览器窗口被调整大小时发生

不管横向还是纵向, 只要尺寸改变了就会触发此事件

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

window.onresize = function() {
    // 获取浏览器窗口尺寸
    var width = window.innerWidth
    if (width >= 600) {
        window.alert('你好啊')
    }
}

设置滚动条的偏移位置(滚动到) —scrollTo

对浏览器的滚动条进行定位,其实也就是设置浏览器卷去的高度和宽度

根据传递不同的参数决定不同的表现形式

传递数字

语法：window.scrollTo(x, y)

x: 表示设置卷去的宽度
y: 表示设置卷去的高度

■注意：必须同时传递两个参数，同时也只能进行瞬间定位, 不能平滑滚动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 3000px;
            height: 3000px;
        }
    </style>
</head>

<body>
    <button id='go'>走你</button>
    <script>
        go.onclick = function() {
            window.scrollTo(1000, 800)
        }
    </script>
</body>

</html>

传递一个对象数据类型

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

注意：

■如果你传递对象数据类型, 那么在对象内, 可以只写一个值
■默认是瞬间定位, 可以通过对象内的第三个成员来让他实现平滑滚动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 3000px;
            height: 3000px;
        }
    </style>
</head>

<body>
    <button id='go'>走你</button>
    <script>
        go.onclick = function() {
            window.scrollTo({
                top: 100,
                left: 500,
                behavior: "smooth"
            })
        }
    </script>
</body>

</html>

浏览器的历史记录

window 中有一个对象叫做 history，是专门用来存储历史记录信息的

也就说history 对象保存了当前窗口访问过的所有页面网址

history.back()

●作用：history.back方法是用来回退历史记录的，就是回到前一个页面，就相当于浏览器上的 ⬅️ 按钮
●语法：window.history.back()

window.history.back()

前提是你要有上一条记录，不然就是一直在这个页面，也不会回退

history.forward()

history.forward 是去到下一个历史记录里面，也就是去到下一个页面，就相当于浏览器上的 ➡️ 按钮
语法：window.history.forward()

window.history.forward()

前提是你要之前有过回退操作，不然的话你现在就是最后一个页面，没有下一个

history.go()

作用：进行历史跳转, 根据参数的不同进行不同的跳转

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

数字可以是正整数、可以是0也可以是负整数

■正整数表示历史前进

■0重新打开当前页，相当于刷新一样

■负整数表示历史后退

window.history.go(2)
window.history.go(0)
window.history.go(-2)

浏览器的标签页

就是操作浏览器标签页的方法

window.open方法

●作用：开启一个新的标签页或者打开指定地址

●语法：window.open(‘地址’)

window.open('https://www.baidu.com')

window.close 方法

●作用：关闭当前标签页或者说关闭浏览器窗口

●语法：window.close()

window.close()