javaScript-BOM浏览器对象模型

最新推荐文章于 2022-10-30 18:05:04 发布

weixin_45070265

最新推荐文章于 2022-10-30 18:05:04 发布

阅读量122

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45070265/article/details/107433445

版权

javascript 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

一.什么是BOM

BOM(Browser Object Model)浏览器对象模型, BOM不是一个具体的对象,而是很多对象的集合, 通过对象中的属性和方法操作浏览器. 比如操作浏览器窗口的大小,地址栏,历史记录等.

二.BOM中的对象有哪些

1.window对象
window对象是BOM中的顶层对象,也是脚本中的全局对象, 在调用window属性和方法时, 可以省略window前缀.
window对象中的方法:
① alert()弹出警告框

<script>
    window.alert('hello')
    // 可以省略window
    alert('666')
</script>

② confirm()弹出消息确认框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <!-- 弹出一个消息确认框,他的返回值是布尔值,确定-true,取消-false -->
    <a href="http://www.baidu.com" onclick="return confirm('是否跳转到百度?')">百度</a>
</body>
</html>

③ prompt()显示提示用户输入的对话框

  <script>
      let myStar = prompt('请输入你喜欢的明星','某某某')
      console.log(myStar)
  </script>

④ setInterval()间隔调用   	
⑤ clearInterval()清除间隔调用
⑥ setTimeout()超时调用
⑦ clearTimeout()清除超时调用

<script>
/*
需求： 每隔1s在控制台依次输出1 2  3  4... 10
*/
let num = 0
let timeId = setInterval(function(){
    num++
    console.log(num)
    if(num===10){
        clearInterval(timeId)
    }
},1000)
console.log('计时器id:',timeId)
</script>

倒计时案例, 5秒后跳转页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <span id="time">5</span>秒后跳转到淘宝页面
    </div>
</body>
</html>
<script>
    /* 
    需求:4、制作一个倒计时5秒钟的页面，时间显示为0时跳转到淘宝首页。
     */
    //  定义变量保存数字
    let num = 5
    // 开启定时器
    let timeId = setInterval(fn, 1000);
    // 单独拿出函数
    function fn() {
        // 数字自增
        num--
        // 判断,倒数到0秒跳转
        if (num === 0) {
            // 清除定时器
            clearTimeout(timeId)
            // 跳转到淘宝
            location.href = 'http://www.taobao.com'
        } else {
            // 输出
            document.getElementById('time').innerHTML = num
        }
    }
</script>

2.screen对象,获取屏幕的一些信息
screen对象中的属性:availWidth显示屏的可用宽度,除任务栏, availHeight显示屏的高度, width屏幕实际宽度,height屏幕实际高度

<script>
    // 显示屏可用高度
    console.log( screen.availHeight );
    // 显示屏可用宽度
    console.log( screen.availWidth )
    // 显示屏实际宽度
    console.log( screen.width );
    // 显示屏实际高度
    console.log( screen.height );
</script>

3. history对象, 可以用来访问历史记录页面
history对象中的方法:
① back()返回上一页
② forward() 进入当前页面的下一页
③ go() 进入指定的页面,例如: go(1)进入下一些, go(-1)返回上一页.

4.location对象, 访问当前网页的URL地址
location对象中的属性:
① location.href 返回当前页面的完整的URL地址
② location.hostname 返回当前页面中的主机名
③ location.pathname 返回当前页面的相对路径
④ location.search 返回当前页面中的参数部分,例如:keyWord=‘hello’
⑤ location.hash 返回网页路径中的锚点部分#
5.navigator对象,提供了有关浏览器的各种信息.
navigator对象属性:userAgent, 返回客户机发送服务器的user-agent头部值.

weixin_45070265

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript-BOM浏览器对象模型

一.什么是BOMBOM(Browser Object Model)浏览器对象模型, BOM不是一个具体的对象,而是很多对象的集合, 通过对象中的属性和方法操作浏览器. 比如操作浏览器窗口的大小,地址栏,历史记录等.二.BOM中的对象有哪些1.window对象window对象是BOM中的顶层对象,也是脚本中的全局对象, 在调用window属性和方法时, 可以省略window前缀.window对象中的方法:① alert()弹出警告框<script> window.alert(
复制链接

扫一扫