javaScript学习笔记（五）BOM篇

最新推荐文章于 2025-08-09 20:51:19 发布

可嘞

最新推荐文章于 2025-08-09 20:51:19 发布

阅读量178

点赞数

CC 4.0 BY-SA版权

分类专栏：慕课文章标签： javascript js css html5 定位

本文链接：https://blog.csdn.net/qq_42113778/article/details/118030599

慕课专栏收录该内容

15 篇文章

订阅专栏

本文深入讲解了BOM（浏览器对象模型）的基础概念、窗口属性、滚动位置管理、核心对象如Navigator和History的使用，以及DOM特效开发，包括返回顶部按钮和楼层导航小效果的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

BOM基本操作以及案例

一、BOM常用对象
1)Window对象 2)Navigator对象 3)History对象 4)Location对象
二、BOM特效开发

一、什么是BOM?

BOM（Browser Object Model,浏览器对象模型）是JS与浏览器窗口交互的接口
1全局变量都是window属性
2 内置函数都是window 的方法

二、窗口相关属性

在这里插入图片描述

        console.log('窗口内宽(包含滚动条)', window.innerWidth) // 内容区域+滚动条的宽度(注意:是边上滚动条缝的宽度,大概17px)
        console.log('窗口外宽(包含滚动条)', window.outerWidth) // 整个浏览器页面的宽度的宽度
        console.log('窗口内宽(不含滚动条)', document.documentElement.clientWidth) // 更window.innerWidth相差不了多少 
        console.log('***************分割线****************')
        console.log('窗口内高度(包含滚动条)', window.innerHeight)
        console.log('窗口外高(包含滚动条)', window.outerHeight)
        console.log('窗口内高度(不包含滚动条)', document.documentElement.clientHeight)

        //  console.log(  window.innerHeight)

        // resize事件
        // 在窗口大小改变之后，就会触发resize事件，可以使用window.onresize或者window.addEventListener(resize)来绑定事件处理函数

        window.onresize = function () {
            console.log(document.documentElement.clientWidth)
            console.log(document.documentElement.clientHeight)
        }

三、已卷动高度(滚动高度)

window.scrollY
document.documentElement.scrollTop
window.scrollX
document.documentElement.scrollLeft
resize事件
scroll事件

在这里插入图片描述

  滚动高度：
      // 1、document.documentElement.scrollTop属性也表示窗口卷动高度
        var scrallTop=window.scrollY || document.documentElement.scrollTop;
        console.log(scrallTop)
        // 2\document.documentElement.scrollTop不是只读的，而window.scrollY是只读的

         function scllow(){   //可以实现案例回到顶部
            document.documentElement.scrollTop=1000
         }


     // scroll事件
        //  在窗口被卷动之后，就会触发scroll事件，可以使用window.onscroll或者window.addEventListener(scroll")来绑定事件处理函数
        window.onscroll=function(){
        var scrallTop=window.scrolly || document.documentElement.scrollTop
        var scrolLleft=window.scrollX || document.documentElement.scrollLeft
        console.log(scrallTop,scrolLleft)
        }

	 滚动宽度：
	 var scrolLleft=window.scrollX || document.documentElement.scrollLeft    // 同高度

四、Navigator对象

在这里插入图片描述

        console.log('浏览器品牌',navigator.appName)
        console.log('浏览器版本',navigator.appVersion)
        console.log('用户代理',navigator.userAgent)
        console.log('操作系统',navigator.platform)

五、history对象

        1\window.history 对象提供了"操作浏览器会话历史"的接口
        2\常用操作就是模拟浏览器回退按钮
          history.back() // 等同于点击浏览器的回退按钮
          history.go(-1) // 等同于history.banck()

六、loacation对象

history.back() ==== history.go(-1)
window.location
location.reload(true)
location.search

        1\window.history 对象提供了"操作浏览器会话历史"的接口
        2\常用操作就是模拟浏览器回退按钮
        history.back() // 等同于点击浏览器的回退按钮
        history.go(-1) // 等同于history.banck() 

        // loacation对象
       1 window.location标识当前所在网址，可以通过给这个属性赋值命令浏览器进行页面跳转
        window.location = 'www,baidu.com'
        window.location.herf = 'www,baidu.com'


       2可以调用location的reload方法以重新加载当前页面，参数true表示强制从服务器强制加载
        window.location.reload(true)


       3 GET请求查询参数:window.location.search属性即为当前浏览器的GET请求查询参数
        比如网址https://www.imooc.com/?a=1&b=2    
        console.log(window.location.search) // "?a=1&b=2"

六、使用DOM特效案例

1、返回顶部


        // 一 返回顶部按钮制作
        // 反回顶部的原理：改变document.documentElement.scrollTop属性，
        // 通过定时器逐步改变此值，则将用动画形式返回顶部
        var timer
        function toTop() {
            clearInterval(timer)
            console.log(document.documentElement.scrollTop)
            timer = setInterval(_ => {
                document.documentElement.scrollTop -= 200
                if (document.documentElement.scrollTop <= 0) {
                    clearInterval(timer)
                }
            }, 20)
        }

2、楼层导航小效果（导航条锚点对应区域）

注意：本案例还有很多不足，可以作为参考思路

DOM元素都有offsetTop属性，表示此元素到定位祖先元素的垂直距离
定位祖先元素：在祖先中，离自己最近的且拥有定位属性的元素

<!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>
        section {
            width: 100%;
            margin-bottom: 50px;
            background-color: cadetblue;
        }

        .nav {
            position: fixed;
            top: 0;
            left: 0;
            height: 50px;
            background-color: chartreuse;
            width: 100%;
        }

        .nav ul {
            display: flex;
            justify-content: space-around;
            align-items: center;
            list-style-type: none;
        }

        .nav ul li {
            cursor: pointer;
        }

        .activer {
            border-bottom: 2px solid red;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul id='list'>
            <li class="activer" data-n='栏目一'>栏目一</li>
            <li data-n='栏目二'>栏目二</li>
            <li data-n='栏目三'>栏目三</li>
            <li data-n='栏目四'>栏目四</li>
        </ul>
    </div>

    <section class="content-nav" style="height: 200px;margin-top:60px" data-n='栏目一'>
        模块一
    </section>

    <section class="content-nav" style="height: 300px;" data-n='栏目二'>
        模块二
    </section>


    <section class="content-nav" style="height: 700px;" data-n='栏目三'>
        模块三
    </section>


    <section class="content-nav" style="height: 1208px;" data-n='栏目四'>
        模块四
    </section>

    <script>
        var list = document.getElementById('list')
        //    使用事件委托监听li 
        list.onclick = function (e) {
            if (e.target.tagName.toLowerCase() == 'li') {
                // getAttribute表示得到标签身上的某个属性值
                var n = e.target.getAttribute('data-n')
                //可以用属性选择器（就是方括号选择器）来寻找带有相同data-n的content-nav
                var contentPart = document.querySelector('.content-nav[data-n=' + n + ']')
                console.log(contentPart)
                //让页面的卷动自动成为这个盒子的offsetTop值
                console.log(contentPart.offsetTop)

                document.documentElement.scrollTop = contentPart.offsetTop

                // var timer = setInterval(() => {
                //     if(contentPart.offsetTop>=document.documentElement.scrollTop){
                //         document.documentElement.scrollTop += 20
                //     }else{
                //         document.documentElement.scrollTop -= 20
                //     }

                //     console.log(contentPart.offsetTop, document.documentElement.scrollTop+document.documentElement.clientHeight)

                //     console.log(document.documentElement.scrollHeight)
                //     if ( document.documentElement.scrollTop >= contentPart.offsetTop) {
                //         clearInterval(timer)
                //     }
                //     if(document.documentElement.scrollTop+document.documentElement.clientHeight==(document.documentElement.scrollHeight)){
                //         clearInterval(timer)
                //     }
                // }, 20);
            }
        }

        var contentList = document.querySelectorAll('.content-nav')
        var listLi = document.querySelectorAll('#list li')
        var arr = []
        for (var i = 0; i < contentList.length; i++) {
            arr.push(contentList[i].offsetTop)
        }

        // 为了比较最后一项,我们可以推入无穷大
        arr.push(Infinity)
        var nowFlppr = -1
        window.onscroll = function () {
            var scrolltop = document.documentElement.scrollTop + 60;
            console.log(arr)
            console.log(scrolltop)
            //遍历arr数组，看看当前的scrollTop值在哪两个楼层之间
            for (var j = 0; j < arr.length; j++) {
                if (scrolltop >= arr[j] && scrolltop < arr[j + 1]) {
                    break;
                }
            }
            // 得到当前楼层
            if (nowFlppr !== j) {
                console.log('楼层', j)
                nowFlppr = j

                console.log(listLi)

                for (var k = 0; k < listLi.length; k++) {
                    if (k == j) {
                        // console.log(listLi[j])
                        listLi[k].className = 'activer'
                    } else {
                        listLi[k].className = ''
                    }

                }
            }
        }



    </script>

</body>

</html>