BOM编程

一.什么是BOM 和 DOM？

1.什么是BOM？

BOM是Browser Object Model的简写，即浏览器对象模型。
BOM有一系列对象组成，是访问、控制、修改浏览器的属性的方法
BOM没有统一的标准(每种客户端都可以自定标准)。
BOM的顶层是window对象

2.什么是DOM？

DOM是Document Object Model的简写，即文档对象模型。
DOM用于XHTML、XML文档的应用程序接口(API)。
DOM提供一种结构化的文档描述方式，从而使HTML内容使用结构化的方式显示。
DOM由一系列对象组成，是访问、检索、修改XHTML文档内容与结构的标准方法。
DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。
DOM的顶层是document对象

3.DOM和BOM的关系？

BOM编程就是把整个浏览器抽象成一个对象(window),这个对象中有很多的属性和方法,访问这些属性或者调用这些方法就可以控制浏览器作出…行为
DOM编程就是把浏览器当前页面对应的文档抽象成一个对象(document),这个对象中有很多关于操作文档的一些属性和方法,访问这些属性和方法的时候,我们就可以通过代码动态控制页面上显示的内容
BOM 是为了操作浏览器出现的 API，window 是其根对象。
DOM 是为了操作文档出现的 API，document 是其根对象。
也可以说DOM也是归BOM管的

二、window对象及常用方法

1.什么是window对象？

Window 对象简单理解就是把浏览器抽象成一个对象,它表示一个浏览器窗口或一个框架。在客户端 JavaScript中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如：可以只写document，而不必写 window.document。同样，可以把当前窗口对象的方法当作函数来使用，如只写alert()，而不必写 Window.alert()。

除了上面列出的属性和方法，Window 对象还实现了核心 JavaScript 所定义的所有全局属性和方法。Window 对象的 window 属性和 self 属性引用的都是它自己。当你想明确地引用当前窗口，而不仅仅是隐式地引用它时，可以使用这两个属性。除了这两个属性之外，parent 属性、top 属性以及frame[] 数组都引用了与当前 Window 对象相关的其他 Window 对象。

2.Window对象的属性

3.Window 对象方法

三、弹窗的三种样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>三种弹窗方式</title>
        <script type="text/javascript">
            function fun01(){
                // 提示弹窗
                window.alert('helloworld');
                
                //确认框  点击 确定 按钮返回TRUE 点击取消按钮返回false
                var message = window.confirm('确认要删除该用户吗？');
                console.log(message);
                
                //信息输入框
                var name = window.prompt('请输入您的名字：','注意是全名哦！！！');
                console.log(name);
            }
        </script>
    </head>
    <body>
        <input type="button" value="点我呀" onclick="fun01()"/>
    </body>
</html>

四、定时器的使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            //定义一个数组，用来保存定时器任务id
            var IntervalIDS = new Array();
        
            function stopInterval(){
                
                //遍历保存任务id的数组，然后取值进行关闭
                for(var i=0;i<IntervalIDS.length;i++){
                    window.clearInterval(IntervalIDS[i])
                }
            }
        
            //循环执行的定时器
            function startInterval(){
                var IntervalID = window.setInterval(
                function(){
                    var today = new Date()
                    var h = today.getHours()
                    var m = today.getMinutes()
                    var s = today.getSeconds()
                    var str = s+'点'+m+'分'+s+'秒'
                    
                    //根据id属性获取页面元素对象
                    var it = document.getElementById('IntervalText')
                    it.value = str
                    //console.log(str)
                },1000) //每个1s中执行一次
                
                IntervalIDS.push(IntervalID) //每次将生成的id添加到数组中
            }
            
            
            var timeoutIDS = new Array();
            //执行一次的定时器
            function startTimeout(){
                //设置时间耗尽的任务
                var timeoutid = window.setTimeout(
                function(){
                    var today = new Date()
                    var h = today.getHours()
                    var m = today.getMinutes()
                    var s = today.getSeconds()
                    var str = s+'点'+m+'分'+s+'秒'
                    console.log(str)}
                ,5000)
                
                //将每次生产的任务id添加到任务id数组中
                timeoutIDS.push(timeoutid)
            }
        
            //结束timeout
            function stopTimeout(){
                for(var j=0;j<timeoutIDS.length;j++){
                    //遍历任务列表id数组，然后关闭数组
                    window.clearTimeout(timeoutIDS[j])
                }
            }
        </script>
    </head>
    <body>
        <input type="text" id="IntervalText"/>
        
        <input type="button" value="测试启动Interval" onclick="startInterval()"/>
        <input type="button" value="测试停止Interval" onclick="stopInterval()"/>
        <input type="button" value="测试    启动timeout" onclick="startTimeout()"/>
        <input type="button" value="测试    停止timeout" onclick="stopTimeout()"/>
    </body>
</html>

五、open和close方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>open和close方法</title>
        <script type="text/javascript">
            function fun01(){
                window.open('http://www.bing.com')
            }
            function fun02(){
                window.close()
            }
        </script>
    </head>
    <body>
        <input type="button"  value="打开百度" onclick="fun01()" />
        <input type="button"  value="关闭当前页面" onclick="fun02()"/>
    </body>
</html>

六、location对象

location对象,是window对象的一个属性,代表浏览器上URL地址栏,使用location对象可以操作地址栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>localtion对象</title>
        <script type="text/javascript">
            function fun1(){
                console.log(window.location.host) //服务的ip和端口
                console.log(window.location.hostname) //服务ip
                console.log(window.location.port) //端口
                console.log(window.location.href) //URL地址
            }
        </script>
    </head>
    <body>
        <input type="button" value="location测试按钮" onclick="fun1()"/>
    </body>
</html>

七、history对象

history对象是window对象的一个属性,代表浏览器访问历史记录,通过history可以实现翻阅浏览器历史网页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>history对象</title>
        <script type="text/javascript">
            function fun1(){
                window.history.forward()
            }
            function fun2(){
                window.history.back()
            }
            function fun3(){
                window.history.go(2)
            }
        </script>
    </head>
    <body>
        <input type="button" value="向前" onclick="fun1()" />
        <input type="button" value="向后" onclick="fun2()" />
        <input type="button" value="go" onclick="fun3()" />
        <a href="new_file.html" target="_blank">马大师来了</a>
    </body>
</html>

八、screen和navigator

screen代表屏幕,navigator代表浏览器软件本身,通过这两个对象可以获得屏幕和浏览器软件的一些信息

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>screen和navigator</title>
        <script type="text/javascript">
            function fun1(){
                console.log(window.screen.width) //窗口的宽
                console.log(window.screen.height) //窗口的高
                console.log(window.navigator.userAgent) //userAgent的信息
                console.log(window.navigator.appName) // js 网景公司的名字
            }
        </script>
    </head>
    <body onload='fun1()'>
    </body>
</html>

posted @ 2021-11-23 11:37 酒剑仙* 阅读(226) 评论(0) 收藏举报

刷新页面返回顶部

Augus