JavaScript学习笔记 07、BOM元素(一)

简介: JavaScript学习笔记 07、BOM元素(一)

一、认识BOM


BOM(Browser Object Model,浏览器对象模型):是js和浏览器窗口交互的接口。


应用场景:一些与浏览器改变尺寸,滚动条相关的特效,都要借助BOM技术。



二、介绍window对象


window对象是当前js脚本运行所处的窗口,而这个窗口中包含DOM结构,window.document属性就是document对象。


标签页与window关系:在有标签页功能的浏览器中,每个标签都拥有自己的window对象,标签与标签之间的window互不干扰!



2.1、全局变量是window的属性(以及一些内置函数)


全局变量会成为window对象的属性,这也就意味着多个应用于同一页面中的js文件是共享全局作用域的,即js文件没有作用域隔离功能!


<script>
    var a = 100;
    //全局变量属于window的变量
    console.log(window.a == a);
    //window内置函数
    console.log(window.alert == alert);
    console.log(window.hasOwnProperty('setInterval'));//测试是否包含属性(或对象)
    //window.alert() 与之前写的 alert()实际上效果一致,这些函数默认都是window对象
    window.alert("123");
</script>




示例


测试一个小案例:看看在一个页面中的多个js文件里作用域同一个window


1.js


var a = 111;


2.js


a++;
console.log(a);


准备两个js文件之后引入到一个HTML中来测试:


<body>
    <script src="./1.js"></script>
    <script src="./2.js"></script>
</body>




2.2、窗口尺寸相关属性


属性

意义

innerHeight

浏览器窗口的内容区域高度,包含水平滚动条(若是有)

innerWidth

浏览器窗口的内容区域宽度,包含垂直滚动条(若是有)

outerHeight

浏览器窗口的外部高度(含浏览器)

outerWidth

浏览器窗口外部宽度


若是想要获得不包含滚动条的窗口宽度,使用:document.documentElement.clientWidth


测试:


<style>
    body {
        /* 让浏览器有宽度 */
        height: 1000px;
    }
</style>
<body>
    <script>
        console.log(window.innerWidth);//浏览器内部宽度+水平滚动条
        console.log(window.outerWidth);//浏览器内部宽度+水平滚动条+浏览器外部线条宽度
        console.log(window.document.documentElement.clientWidth);//浏览器内部宽度
    </script>
</body>
————————————————
版权声明:本文为CSDN博主「长路 ㅤ   」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/cl939974883/article/details/124622832




2.3、窗口改变大小事件(onresize)


在窗口大小改变之后,就会触发resize事件。(window.onresize或window.addEventListener('resize'))


示例:



<script>
    //绑定onresize事件
    window.onresize = function () {
        console.log(window.document.documentElement.clientWidth);
    }
</script>


2.4、卷动高度与卷动事件(onscroll)


卷动高度



通常若是页面有一定的高度时,可通过使用window.scrollY或document.documentElement.scrollTop来获取到。



注意:其中window.scrollY是只读的,而document.documentElement.scrollTop是可读可写的表示可以修改!


应用场景:可通过使用该属性来检测浏览器此时处于的位置,或者说来进行定位浏览器的卷动位置,实现自定义!



卷动事件


语法:window.scroll。


示例:


<style>
    body {
        height: 1000px;
    }
</style>
<body>
    <script>
        window.onscroll = function () {
            console.log(window.scrollY);
        };
    </script>
</body>



三、document相关事件


3.1、切换屏幕(onvisibilitychange)


<script>
    //切换屏幕事件
    document.onvisibilitychange = function () {
        alert("不允许切换屏幕,警告一次!");
        document.onvisibilitychange = null;
    };
</script>




四、navigator对象


window.navigator:该对象包含了用户此次活动的浏览器相关属性和标识。


属性

意义

appName

浏览器官方名称

appVersion

浏览器版本

userAgent

浏览器的用户代理(含有内核信息和封装壳信息)

platform

用户操作系统


测试:


<script>
    console.log(window.navigator.appName);
    console.log(window.navigator.appVersion);
    console.log(window.navigator.userAgent);
    console.log(window.navigator.platform);
</script>



五、history对象


window.history:该对象提供了操作浏览器会话历史的接口。常用操作就是模拟浏览器回退按钮。


常用方法:介绍两个模拟浏览器回退方法


history.back()。

history.go(-1)。


测试:


第一个页面:usuallyexer.html


<a href="./u2.html">跳转u2网页</a>


第二个页面:u2.html,提供了两种方式来进行回退


<body>
    <h1>我是u2网页</h1>
    <!-- 方式一:按钮绑定点击事件 -->
    <button>点我回退网页</button>
    <!-- 方式二:通过链接中编写js脚本进行回退 -->
    <a href="javascript:history.go(-1);">点我回退</a>
    <script>
        var m_button = document.getElementsByTagName("button")[0];
        // 绑定单击事件
        m_button.onclick = function () {
            //window.history.back();//等同于history.go(-1);
            window.history.go(-1);
        }
    </script>
</body>




相关文章
|
13天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML1、H5文本元素
H5+CSS3+JS逆向前置——HTML1、H5文本元素
16 0
|
16天前
|
前端开发 JavaScript API
JavaScript中多种获取数组最后一个元素的策略。
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
20天前
|
JavaScript
如何用js在页面中添加元素?
如何用js在页面中添加元素?
15 0
|
1月前
|
存储 算法 JavaScript
|
1月前
|
编解码 JavaScript 前端开发
JavaScript学习 --- BOM
JavaScript学习 --- BOM
11 0
|
1月前
|
前端开发 JavaScript
探索JavaScript元素节点的属性和方法
探索JavaScript元素节点的属性和方法
6 0
|
1月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
17 0
|
1月前
|
存储 JavaScript
【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
16 0
|
1月前
|
存储 JSON JavaScript
JavaScript:BOM操作
JavaScript:BOM操作
30 1
|
1月前
|
JavaScript 前端开发 小程序
js将数组中相同的元素进行分组 必看
js将数组中相同的元素进行分组 必看

相关产品

  • 云迁移中心