BOM模型

坦然的橘子

于 2024-04-14 12:11:19 发布

阅读量708

点赞数 24

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/2301_79542525/article/details/137740474

版权

BOM编程

window对象

alter():显示带有一个提示信息和一个确定按钮的整示框

confirm显示一个带有提示信息、确定和取消按纽的对话框

prompt显示可提示用户输入的对话框

open打开新的浏览器窗口，close关闭浏览器窗口

setTimeout()定时器(只调用一次)

setInterval定时器(一直调用)

clearInterval取消定时器

screenLeft获取浏览器相对于屏幕左上角的x坐标

screenTop获取浏览器相对于屏幕左上角的y坐标

location对象

history对象

几乎所有的浏览器都内嵌了javaScript引擎，使得javaScript语⾔能够在浏览器环境下运⾏。那么，如果要使⽤javaScript语⾔来操作浏览器中的各种对象，就需要使⽤BOM模型与DOM模型。

1.浏览器对象模型BOM（Browser Object Model）：提供了独⽴于内容的、可以与浏览器窗⼝进行互动的对象结构。

2.⽂档对象模型DOM（Document Object Model）：定义访问和处理HTML⽂档的标准⽅法。DOM将HTML⽂档呈现为带有元素、属性和⽂本的树结构（节点树）。

BOM编程

window对象

window对象是BOM的核⼼，window对象指当前的浏览器窗⼝。 window对象是整个浏览器对象模型中的顶层对象，它下有很多⼦对象（包括document对象（DOM））。

window对象有很多属性与⽅法：

方法名称	说明
alert()	显示带有一个提示信息和一个确定按钮的整示框,
prompt()	显示可提示用户输入的对话框,
confirm()	显示一个带有提示信息、确定和取消按钮的对话框。
close()	关闭浏览器窗口
open()	打开一个新的浏览器窗口，加载给定 URL所指定的文档,
setTimeout() clearTimeout()	在指定的毫秒数后调用的数或计算表达式(一次调用)。 setTimeout(“函数名0”,毫秒数) setTimeout(函数名,毫秒数) clearTimeout():取消定时器,
setInterval() clearInterval()	按照指定的周期(以室秒计)来调用的数或表达式, setlnterval(“函数名0”,毫秒数) setlnterval(函数名,毫秒数) clearnterval():取消定时器
screenLeft()	获取浏览器相对于屏幕左上角的x坐标。
screenTop	获取浏览器相对于屏幕左上角的y坐标。

alter():显示带有一个提示信息和一个确定按钮的整示框

alter是一个模式对话框，它独占一个线程，只有当alert进行完后才会进行接下来的代码

window.alert('hello');
//window可以不写，因为window是最顶部的

confirm显示一个带有提示信息、确定和取消按纽的对话框

confirm的弹窗会有确定、取消两个按钮，分别对应true和false两个量，根据用户点击的按钮的不同，confirm返回不同的布尔值

let str = confirm('确定要删除数据嘛？');
console.log(str);
//常用示例
if (confirm('确定删除嘛？'))
    {
        console.log("删除成功")
    }
else
    {
        console.log("删除成功")
    }

prompt显示可提示用户输入的对话框

let str = prompt("请输入数据");//接收用户输入的数据并返回
console.log(str);

open打开新的浏览器窗口，close关闭浏览器窗口

<html>
    <head>
        <meta charset="UTF-8"/>
    </head>
    <body>
        <script>
            let obj = null;//声明一个引用
            //事件处理函数
            function openBaidu(){
                obj = open('http://www.baidu.com');//obj引用指向新窗口对象
            }
            function closeBaidu(){
                obj.close();
            }
        </script>
        <!--onclick：当用户点击按钮后触发，随后执行引号中的代码，
        因此函数后面加()进行函数的调用-->
        <button onclick="openBaidu()">打开百度</button>
        <button onclick="cloceBaidu()">关闭百度</button>
    </body>
</html>

setTimeout()定时器(只调用一次)

//setTimeout也叫做回调函数
//方式一
setTimeout(function(){
    console.log('hello');
},3000)//间隔3秒后调用一次括号里面的函数
//方式二
let callback = function(){
    console.log("hello");
}
setTimeout(callback,3000);

setInterval定时器(一直调用)

let callback = function(){
    console.log("hello");
}
setInterval(callback,3000);

clearInterval取消定时器

let callback = function(){
    console.log("hello");
}
let timer = setInterval(callback,1000);
clearInterval(timer);//取消定时器timer

screenLeft获取浏览器相对于屏幕左上角的x坐标

screenTop获取浏览器相对于屏幕左上角的y坐标

console.log(screenLeft);
console.log(screenTop);

location对象

location⽤于获取或设置地址栏中的url，并且提供若⼲⽅法⽤于刷新或跳转等。

location.reload() ⻚⾯重新加载（相当于刷新按钮）

location.href 返回或设置完整的url(地址栏上输入地址进行跳转)href是一个属性

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script>
            let ule = 'http://www.baidu.com'
            //事件处理函数
            function openBaidu(){
                location.href = ule;//obj引用指向新窗口对象
            }
            function myReload(){
                window.location.reload();
            }
        </script>
        <!--onclick：当用户点击按钮后触发，随后执行引号中的代码
        //因此函数后面加()进行函数的调用-->
        <button onclick="openBaidu()">打开百度</button>
        <button onclick="myReload()">刷新</button>
    </body>
</html>

history对象

history对象记录了⽤户曾经浏览过的⻚⾯(URL)，并可以实现浏览器前进与后退相似导航的功能。

history对象就是访问后的URL。

history.back() 加载history列表中的前⼀个URL，也就是后退。

history.forward() 加载history列表中的下⼀个URL，也就是前进。

history.go() 加载history列表中的某⼀个URL。括号里可以放:0：当前； -1：相当于back()； 1：相当forward()

坦然的橘子

关注

24
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
BOM模型

几乎所有的浏览器都内嵌了javaScript引擎，使得javaScript语⾔能够在浏览器环境下运⾏。那么，如果要使⽤javaScript语⾔来操作浏览器中的各种对象，就需要使⽤与。（Browser Object Model）：提供了独⽴于内容的、可以与浏览器窗⼝进行互动的对象结构。（Document Object Model）：定义访问和处理HTML⽂档的标准⽅法。DOM将HTML⽂档呈现为带有元素、属性和⽂本的树结构（节点树）。
复制链接

扫一扫