BOM编程

R࿆ebirth Fire

于 2024-07-31 22:23:41 发布

阅读量236

点赞数 4

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/2301_77193348/article/details/140833412

版权

1.BOM定义

BOM是Browser Object Model的简写，即浏览器对象模型；
BOM由一系列对象组成，是访问、控制、修改浏览器的属性和方法；
BOM没有统一的标准(每种客户端都可以自定标准)；
BOM编程是将浏览器窗口的各个组成部分抽象成各个对象，通过各个对象的API操作组件行为的一种编程；

2.BOM编程的对象结构

window 顶级对象，代表整个浏览器窗口；

location属性，代表浏览器的地址栏；
history属性，代表浏览器的访问历史；
screen属性，代表屏幕；
navigator属性，代表浏览器软件本身；
document属性，代表浏览器窗口目前解析的html文档；
console属性，代表浏览器开发者工具的控制台；
localStorage属性，代表浏览器的本地数据持久化存储；
sessionStorage属性，代表浏览器的本地数据会话级存储；

3.window对象的常见属性和常见方法

https://www.runoob.com/jsref/obj-window.html

4. 通过BOM编程控制浏览器行为演示

4.1三种弹窗方式：


<head>
    <meta charset="UTF-8">
    <title>小标题</title> 
<script>
    function testAlert(){
        //普通信息提示框 
        window.alert("提示信息");  
        }

    function testConfirm(){
        //确认框
        varcon=confirm("确定要删除吗?");
        if(con){
           alert("点击了确定")
        }else{
           alert("点击了取消")
        }
        }
     function testPrompt(){
        //信息输入对话框
        varres=prompt("请输入昵称","例如:张三"); 
        alert("您输入的是:"+res);
        }
</script>
       </head>
       <body>
           <input type="button"value="提示框"onclick="testAlert()"/><br>
           <input type="button"value="确认框"onclick="testConfirm()"/><br>  
           <input type="button"value="对话框"onclick="testPrompt()"/><br>
      </body>

4.2页面跳转：

    <head>
        <metacharset="UTF-8">
        <title>小标题</title>
        <script>
           functiongoAtguigu(){
                varflag=confirm("即将跳转到CSDN官网,本页信息即将丢失,确定吗?")                          
           if(flag){
                    // 通过BOM编程地址栏url切换
                    window.location.href="https://www.csdn.net/"
                }
           }          
        </script>
    </head>
    <body>
        <inputtype="button"value="跳转到尚硅谷"onclick="goAtguigu()"/><br>    
    </body>

5.通过BOM编程实现会话级和持久级数据存储

会话级数据：内存型数据，是浏览器在内存上临时存储的数据，浏览器关闭后数据失去，通过window的sessionStorge实现；
持久级数据：磁盘型数据，是浏览器在磁盘上持久存储的数据，浏览器关闭后数据仍在，通过window的localStorge实现；

在F12开发者工具的应用程序栏，可以查看数据的状态；

F12 > 找到控制台 > 点击那个加号 > 点击应用程序就可以找到会话存储、本地存储

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">    
    
    <title>Document</title>
    <script>
        functionsaveItem(){
            // 让浏览器存储一些会话级数据
            window.sessionStorage.setItem("sessionMsg","sessionValue")
            // 让浏览器存储一些持久级数据
            window.localStorage.setItem("localMsg","localValue")
            console.log("haha")
        }
        functionremoveItem(){
            // 删除数据
            sessionStorage.removeItem("sessionMsg")
            localStorage.removeItem("localMsg")
        }
        functionreadItem(){
            console.log("read")
            // 读取数据
            console.log("session:"+sessionStorage.getItem("sessionMsg"))
            console.log("local:"+localStorage.getItem("localMsg"))
        }
    </script>
</head>
<body>
    <buttononclick="saveItem()">存储数据</button>
    <buttononclick="removeItem()">删除数据</button>
    <buttononclick="readItem()">读取数据</button>
</body>
</html>

R࿆ebirth Fire

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
BOM编程

BOM是的简写，即浏览器对象模型；BOM由一系列对象组成，是访问、控制、修改浏览器的属性和方法；BOM没有统一的标准每种客户端都可以自定标准；BOM编程是将浏览器窗口的各个组成部分抽象成各个对象，通过各个对象的API操作组件行为的一种编程；
复制链接

扫一扫