JavaScriptAPI中BOM：浏览器对象模型-优快云博客

本文链接：https://blog.youkuaiyun.com/The_over/article/details/129755853

BOM

BOM：browser object model (浏览器对象模型)

网址的组成

协议 + 主机 + 端口号 +路径 + 参数

协议：http / https
主机 :域名 ip( ip 分为 公网ip 和 局域网ip )
参数：？之后的内容
例如https://www.baidu.com/s?ie=UTF-8&wd=%E5%93%88%E5%93%88
加粗部分为参数

属性

console
location
history
navigator

console

Console 对象常见的两个用途：
1、显示网页代码运行时的错误信息。
2、提供了一个命令行接口，用来与网页代码互动。

location

1、location.hash：地址栏上#及后面的内容
2、location.host：主机名及端口号
3、location.reload()：页面刷新

history

1、history.back：页面的后退
2、history.forward：页面的前进

<button id="btn">跳转页面</button>
<button id="forWord">前进</button>

<script>
    document.getElementById('btn').onclick = function () {
        window.location.href = './5-BOM.html'
    }
    // 前进
    document.getElementById('forWord').onclick = function () {
        window.history.forward()
    }
</script>

navigator

navigator 浏览器嗅探

<body>
    <button id="btn">跳转</button>
    <button id="reload">重新加载</button>
    <button id="back">返回</button>
</body>

<script>
    // console.log(age);
    // console.log(window);
    // console.log(name);
    /*
          BOM:
             属性：console location history navigator
             方法：alert()  prompt() confirm()
             事件：onload() onscroll()
    */
    //alert('我是弹框')
    //var str = prompt('我是带有输入框的弹框')
    // var flag = confirm('请充值')
    // console.log(flag);
    // if (flag) {
    //     console.log('VIP玩家，你好');
    // } else {
    //     console.log('没钱别玩游戏');
    // }
    /*
       location
      */
    console.log(location);
    console.log(window.location);
    //  hash：地址栏上#及后面的内容
    console.log(window.location.hash);
    // host：主机名及端口号
    console.log(window.location.host);
    document.getElementById('btn').onclick = function () {
        window.location.href = 'http://www.taobao.com'
    }
    //页面刷新
    document.getElementById('reload').onclick = function () {
        location.reload()
    }
    /*
        history
      */
    console.log(window.history);
    // 后退
    document.getElementById('back').onclick = function () {
        window.history.back()
    }
    /*
    navigator  浏览器嗅探
    */
    console.log(window.navigator);
</script>

方法

alert() 弹框
prompt() 带输入框的弹框
confirm() 带确认取消按钮的弹框

alert('我是弹框')

alert() 弹框

var str = prompt('我是带有输入框的弹框')

prompt() 带输入框的弹框
confirm() 带确认取消按钮的弹框

事件

onload（）加载完成事件
onscroll（）滚动事件
滚动条事件

 var num = 1
    onscroll = function () {
        num++
        console.log(num);
    }