JavaScript中Windows 对象

一、Boom浏览器对象模型 

1、 相关方法 

1.1 prompt(提示框)

1.2 alert(警告框)

1.3 open(打开页面)

1.4 close(关闭页面)​​​​

 <script>
        //提示用户输入对话框
        let str= window.prompt('请输入姓名:')
        //警告框
        alert(str)
        //确定和取消按钮的对话框
        let flag=confirm('是否删除?')
        alert(flag)
        function a(){
            //关闭页面
            close()
        }
        document.querySelector('#bt1').onclick=a

        function b(){
            //打开页面
            open('a.html','新的页面',
            'height=500px,left:300px,top=500px')
        }
    </script>

2.Location对象

History对象是在使用过程中出现跳转等操作

两种方式表达

location/go()

 <button>前进</button>
    <button>后退</button>
    <a href="3.html">hfhkahdfl</a>
    <script>
        function a(){
            history.forward()
            //history.go(1)
        }
        function b(){
            history.back()
            //history.go(-1)
        }
        document.querySelector('button:nth-child(1)').onclick=a
        document.querySelector('button:nth-child(2)').onclick=b
    </script>

3.History对象

<script>
        document.write('端口号:'+location.host+'<br>')
        document.write('主机名:'+location.hostname+'<br>')
        document.write('url:'+location.href+'<br>')
        //所有浏览器端口号都为80
        function a(){
            location.reload()//相当于刷新页面
        }
        function b(){
            location.replace('2.html')
        }
    </script>
    <button onclick="a()">重新加载</button>
    <button onclick="b()">替换</button>

 二、Document 对象 

1.概念

浏览器对外提供的支持js的用来操作HTML文档的一个对象,此对象封存的HTML文档的所有信息.  

2.使用document 

获取HTML元素对象

直接获取方式： 通过id 、 通过name属性值 、通过标签名 、通过class属性值.

<script>
        //通过id获取元素,获取的是单个元素
        document.getElementById('aaa').style.backgroundColor='blue'
        //通过class获取元素,获取到的是一个伪数组
        document.getElementsByClassName('bbb')[1].style.color='red'
        //通过标签名获取元素,获取到的是一个伪数组
        // document.getElementsByTagName('li')[0].style.color='green'
        let lis=document.getElementsByTagName('li')
        for(let i=0;i<lis.length;i++){
             document.getElementsByTagName('li')[i].style.color='green'
        }
        //根据选择器进行获取,只获取第一个
        document.querySelector('li').style.backgroundColor='yellow'
        //获取所有,伪数组
       let li2= document.querySelectorAll('li')
       for(let i=0;i<li2.length;i++){
             document.querySelectorAll('li')[i].style.fontSize='30px'
        }
        //写入文本
        document.write('<h2>hello,world!</h2>')




    </script>