BOM(浏览器对象模型)

一、BOM

• 浏览器的顶级对象是window>页面的顶级对象document
• 页面中的所有内容都是属于浏览器的,页面中的内容也是window的
• window的一个特殊属性是window.name

       console.log(window.name);//是空----特殊地方在于js是动态类的语言,正常结果一个是undefined
       console.log(window.type);//undefined

• window等于top

        console.log(top);//输出得是window对象
        console.log(window);//和上面一样,是等价的
        console.log(window===top);//true

二、系统对话框

   <script>
        window.alert("哈哈");//弹出警告框,一般用于测试,用户体验不好
        window.prompt("请输入内容");//用于接受用户输入的数据
        window.confirm("你确认吗?");//返回值有两个true和false
        //这些系统对话框在不同的浏览器里呈现的样式不一样,无法统一
    </script>

三、页面加载事件

    <script>
    //1. widow.onload-------页面加载完成后才触发执行
    //一般的页面加载都是从上而下,比如获取document.getElementById(),必须先有这个id才能够获取,所以必须先定义在获取
    //这个方法可以把放在任何位置,因为它是页面加载完毕后才触发的
    window.onload=function(){
            document.getElementById("btn").onclick=function(){
                console.log("sss")
            }
        }
    //2. window.onunload------页面关闭后触发事件
    //3.window.onbeforeunload------页面关闭之前触发事件
    </script>

四、location对象

    <script>
    //属性1:window.location.hash------->#及后面的内容

    //属性2:window.location.host------->主机及端口号

    //属性3:window.location.hostname------->主机名

    //属性4:window.location.pathname------->文件路径(相对路径)

    //属性5:window.location.port------->端口号

    //属性6:window.location.protocl------->协议(比如http)

    //属性7:window.location.search------->搜索的内容

    //方法1:window.location.href="网址"------>跳转页面

    //方法2:window.location.assign("网址")------>跳转页面(同上)

    //方法3:window.location.replace("网址")----->跳转页面,没有历史记录
    </script>

    <input type="button" value="跳转页面1" id="btn1">
    <script>
        document.getElementById("btn1").onclick=function(){
            window.location.href="http://www.baidu.com";
        };
    </script>
    <input type="button" value="跳转页面2" id="btn2">
    <script>
        document.getElementById("btn2").onclick=function(){
            window.location.assign("http://www.baidu.com");
        };
    </script>
    <input type="button" value="跳转页面3" id="btn3">
    <script>
        document.getElementById("btn3").onclick=function(){
            window.location.replace("http://www.baidu.com");
        };
    </script>

五、history对象

   <script>
    // window.history.forward()---向前跳转
    // window.history.go()-----向前跳转,等同于上面
    // window.history.back()----向后跳转
    //注意,这几个方法都必须产生了历史记录才可以向前或向后跳转网页
    </script>
    <input type="button" value="前进" id="btn1">
    <input type="button" value="后退" id="btn2">
    <script>
        document.getElementById("btn1").onclick=function(){
            window.history.forward();
            //window.history.go();
        };
        document.getElementById("btn2").onclick=function(){
            window.history.back();
        };
    </script>

六、navigator对象

   <script>
    //navigator.platform----->获取系统类型
        console.log(window.navigator.platform);//Win32
    //navigator.userAgent----->获取浏览器类型
        console.log(window.navigator.userAgent);//Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
    </script>