2-3BOM

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

1.window

window是浏览器的一个实例,在浏览器中,window对象有双重角色,它既是通过Javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象(全局对象)。在javascript中声明的全局变量是window的属性,方法是window的方法

1.1Window alert() 方法

定义：alert() 方法用于显示带有一条指定消息和一个 确认 按钮的警告框。
语法：alert(message)

window.alert("hello world")

1.2Window confirm() 方法

定义：confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。
如果访问者点击"确定"，此方法返回true，否则返回false。
语法:window.confirm(“msg”)

<ul>
    <li>html<button>删除</button></li>
    <li>css<button>删除</button></li>
    <li>js<button>删除</button></li>
    </ul>
    <script>
        var btns=document.getElementsByTagName("button");
        for(var i=0;i<btns.length;i++){
            btns[i].onclick=function(){
                var temp=window.confirm("确定吗");
                if(temp){
                    this.parentNode.style.display="none"
                }
            }
        }
    </script>

1.3 Window prompt() 方法

定义：prompt()方法用于显示可提示用户进行输入的对话框。这个方法返回用户输入的字符串。
语法：prompt(msg,defaultText)//msg表示在对话框显示的纯文本；defaultText 要输入文本。

<script>
        var test=window.prompt("请输入","hello");
        console.log(test)
 </script>

2.window对象方法：定时器

超时调用-setTimeout()
间歇调用-setInterval()

  /* 超时调用 
        间隔一段时间触发,只会触发一次
        */
        setTimeout(function(){
            console.log("hello world")
        },2000)
        /* 
        setInterval()间歇调用
        每间隔一段时间,就会触发
         */
        setInterval(function(){
            console.log("1")
        },1000)

2.1递归

函数调用函数自身,就叫递归

 <script>
        function show(){
            setTimeout(function(){
                console.log(1)
                show();
            },1000)
        }
        show()
    </script>

2.2清除定时器 clearInterval()

 <button id="btn">停止定时器</button>
    <script>
        /* 设置定时器的时候,会在window下挂载一个属性 */
        var btn =  document.getElementById("btn");
        var temp = setInterval(function(){
            console.log("2")
        },1000)
        btn.onclick =  function(){
            clearInterval(temp);
        }
    </script>

3.location对象

location对象提供了与当前窗口中加载的文档有关信息,还提供了一些导航的功能,他既是window对象的属性,也是document对象的属性。

3.1location对象属性

location.href与window.location.href等价
语法：location.hash
功能：返回URL中的hash(#号后跟0或多个字符),如果不包含则返回空字符串
语法：location.host
功能:返回服务器名称和端口号
语法：location.hostname
功能:返回不带端口号的服务器名称
语法：location.pathname
功能：返回URL中的目录和(或)文件名
语法：location.port
功能:返回URL中指定的端口号,如果没有,返回空字符串

//location.href
<button id="btn">跳转到百度</button>
    <script>
        var btn = document.getElementById("btn");
        btn.onclick =  function(){
           console.log(location.href="https://www.baidu.com/")
        }
    </script>

4.history对象

history对象保存了用户在浏览器中访问页面的历史记录

history对象属性

语法：history.back()
功能:回到历史记录的上一步
相当于是用了history.go(-1)
//-1表示前一步,-2前两部
语法：history.go(1)
功能:回到历史记录的前一步
相当于history.forward()
语法：history.go(-n)
功能:回到历史记录的前n部
语法:history.go(n)
功能:回到历史记录的后n步

5.screen对象

screen对象包含有关客户端显示屏幕的信息
screen.availWidth //availWidth 属性声明了显示浏览器的屏幕的可用宽度，以像素计
screen.availHeight

<script>
        // 获取客户端关于屏幕的信息
        var screenWidth =  window.screen.availWidth;
         //获取可视区域的width
        var viewWidth = document.body.clientWidth;
        console.log(screenWidth)
        console.log(viewWidth)
    </script>

6.navigator对象

1.掌握Navigator对象的userAgent属性
2.掌握如何判断浏览器的类型
3.掌握如何判断设备的终端是移动还是PC
UserAgent:用来识别浏览器名称，版本，引擎以及操作系统等信息的内容。
//检测浏览器类型
if(/Android|iphone|webOS/i.test(navigator.userAgent)){
location.href=”mobile.html”
}else if(/ipad/i.test(navigator.userAgent)){
location.href=”pad.html”
}

 <script>
        console.log(navigator.userAgent)
    </script>