JS-BOM对象

澜299

已于 2022-04-08 14:15:24 修改

阅读量180

点赞数

文章标签： java

于 2022-04-08 14:13:51 首次发布

本文链接：https://blog.csdn.net/weixin_65287845/article/details/124039577

版权

什么是BOM对象

BOM: browser （浏览器） object(对象) mode(模型 ) ，是JS的核心

浏览器对象模型：包含独立于内容的与浏览器进行交互的一些对象，那么都有那些对象？

BOM中包含的常见对象

window:浏览器窗口对象

history:历史记录对象

location:地址栏对象

window对象

是BOM的核心，是一个打开的窗口，可以通过js代码来和浏览器进行交互

window对象常见的属性

history对象：历史记录对象，记录了用户访问的URL（地址）
location对象：地址栏对象，当前用户访问的URL
screen对象：屏幕对象，可以获取一些关于显示屏的一些信息，宽度高度

window对象常见的方法

alert():警告框
confirm():消息提示框
prompt():提示输入框
open():打开一个窗口
close():关闭一个窗口

         显示open和close方法
         <script>
             /*
             * open(参数1,参数2,参数3,参数4):
             * 参数1：要打开的一个窗口地址
             * 参数2：要打开窗口的一个name（名称）
             * 参数3：打开一个新窗口的相关设置（要不要地址栏，要不要状态栏 窗口的大小）
             * 
             * close():关闭当前窗口 
             */
            function fnOpen(){
                //使用方式：window.属性/方法
                window.open("index.html","","width=400,height=400,left=400,top=200");
            }
            
            function fnClose(){
                //关闭当前窗口
                window.close();
            }
        </script>
        <button onclick="fnOpen()"> 点击打开一个新的窗口</button>

history对象

用户访问历史记录对象，存储了用户访问的历史纪录，可以通过一些方法，前进后退等操作

常见的属性

length: 长度，代表用户访问所有历史记录的个数，如果lenght=1代表第一次访问

常见的方法

go():如果传值-1 代表后退一个记录，如果是1代表前进一个记录

back()：代表后退一个记录

forward:代表前进一个记录

历史记录history
        <script>
            function fn1(){
                //前进
                //history.go(1);//代表去c页面
                history.forward();
            }
            function fn2(){
                //前进
                history.go(-1);//代表去a页面
                history.back();
            }
        </script>

        <a href="c.html">b跳转到c页面</a>
        <button onclick="fn1()"> 前进</button>
        <button onclick="fn2()">后退</button>

location对象

用来存储页面中的一些信息的（可以把URL解析成一些片段这写片段包含服务器信息地址等）

常见的属性

host: 代表服务器的一些信息，包含服务器的名称端口号
hostname:服务器的名称
href:指定一个URL

常见的方法

reload():重新加载本页面
replace():用新的文档替换当前文档

        location

        <script>
            function fnReload(){
                location.reload();//页面重新加载
            }
            function xiangqing(){
                //href属性
                location.href="index.html";
            }
        </script>

        <img  src="img/1.jpg"/><br/>
        <button onclick="xiangqing()">查看图片详情</button><br/>
        <button onclick="fnReload()">重新加载页面</button><br/>
        <hr/>
        <button onclick="javascript:location.href='index.html'">查看图片详情</button><br/>
        <button onclick="javascript:location.href='index.html'">重新加载页面</button><br/>