二、BOM

BOM: browser object model 浏览器对象模型

一、网页弹框

window.prompt(“请输入你的年龄”)

window.alter()

window.confirm()

    <p>
        <span>小米9</span> <button id="btn">删除</button>
    </p>
    <script>
        var res =window.prompt("请输入你的姓名");
        console.log(res);
        // parentNode --> 可以获取父元素
        var btn=document.getElementById("btn");
        console.log(btn.parentNode);
        btn.onclick=function(){
           var isDelete= window.confirm("你确定删除嘛");
            if(isDelete){
                btn.parentNode.style.display="none"
            }
        }
    </script>

二、浏览器可视区域

1.浏览器窗口内部高度、宽度

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

2.文档当前高度、可视区域的高度

document.documentElement.clientHeight  表示HTML文档所在窗口的当前高度。客户端
document.documentElement.clientWidth  表示HTML文档所在窗口的当前宽度。

3.body属性

document.body.clientHeight
document.body.clientWidth

4.浏览器可用宽高

window.screen.availWidth
window.screen.availHeigt

5.网页内容滚动的宽高

document.documentElement.scrollHeight
document.documentElement.scrollWidth

6.滚动条距离顶部的高度

document.documentElement.scrollTop

三、定时器

1.setTimeout(,)

左边是执行的方法右边是事件 单位是毫秒；
超时调用 间隔一段时间，执行函数，且只执行一次

                <script>
            console.log(1);
            setTimeout(function(){
                console.log("a");
            },1);
            console.log(2);
        </script>
            //1,2,a

2.setInterval(,)

间歇调用 每间隔一段时间，会执行一次函数

  <script>
        var a=0;
        function go(){
            setTimeout(function(){
                console.log(a);
                a++;
                if(a==10){
                    break;
                }
            },1000)
        }
        go();
        </script>

3.定时器的清除

当调用setInterval的时候 window会给它一个ID号 代表这个setInterval事件
如果想要停止这个setInterval事件 可以用clearInterval来清除它的id号
当它的id号被清除以后 这个事件就没有了
clearInterval(timer)

        <script>
        var btn=document.getElementById("btn");
        var timer=setInterval(function(){
            console.log(Math.random()*8)
        },3000)
        // 清除定时器 clearInterval 
        console.log(timer);
        btn.onclick=function(){
            clearInterval(timer);
        }

    </script>

四、location对象

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

location.href与window.location.href等价

语法：location.hash
功能：返回URL中的hash(#号后跟0或多个字符),如果不包含则返回空字符串

语法：location.host
功能:返回服务器名称和端口号

语法：location.hostname
功能:返回不带端口号的服务器名称

语法：location.pathname
功能：返回URL中的目录和(或)文件名

语法：location.port
功能:返回URL中指定的端口号,如果没有,返回空字符串

五、history

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

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

语法：history.go(1)
功能:回到历史记录的前一步
相当于history.forward()

语法：history.go(-n)
功能:回到历史记录的前n部

语法:history.go(n)
功能:回到历史记录的后n步

1.返回历史上一个页面 history.back()

<button id="btn">跳转到index.html</button>
    <script>
      var btn=document.getElementById("btn");
      btn.onclick=function(){
          history.back()
      }
    </script>

2.返回历史记录的前一个页面 history.forward()

<a href="detail.html">detail</a>
    <button>返回detail页面</button>
    <script>
       var btn=document.getElementById("btn")
       btn.onclick=function(){
           history.forward();
       }
    </script>

六、screen对象

screen对象包含有关客户端显示屏幕的信息
screen.availWidth
screen.availHeight