JavaScript --- Bom operation tree, built-in method, and built-in objects (window objects, location the object, the object Navigator, history objects, screen objects)

JavaScript --- Bom operation tree, built-in method, and built-in objects (window objects, location the object, the object Navigator, history objects, screen objects)

What is a BOM Dian

Bom:. Browser Object Model, browser object model operating functions of the browser part of the API (event / function).

Schematic:

   Analysis: 1.window Bom target is the top-level object All objects are extended out from windom, called window child objects.

       2.dom is part of bom

       3. The global variables, custom function is window object properties and methods

       When the properties and methods of an object under 4.window call window can be omitted

Two Dian Bom common built-in methods and built-in objects

Window object

      Some method of operating a browser window: The elastic block, the window width and height

/* 弹出系统对话框 */
     alert();   //显示对话框
     confirm(); //确认对话框
     prompt();  //输入对话框
     

/* 打开窗口,关闭窗口 */
    //打开
    window.open(url,target); //url:链接地址,target:新窗口的位置
    //关闭
    window.close(); // 只关闭js开启的窗口
    

/* 获得窗口的宽高 */
    window.innerHeight;  //获得浏览器窗口的高度
    window.innerWidth;  //获得浏览器窗口的宽度


/* 定时器 */
    // setTimeOut(fn,n), n毫秒 之后只执行一次 fn函数/操作
            function add(){
                alert('hellow');
            }
           
            var t1=windom.setTimeOut(add,1000);  //直接跟函数名
            var t2=windom.setTimeOut('add()',1000);  //直接跟函数名+()
           
            // 额外方式:
            setTimeOut(function (){
                    alert('你好');
                },3000); 

           window.clearTimeout(t1); //去除定时器



    // setInterval(fn,n),指定周期, n毫秒之后,循环执行此 fn函数/操作
                function add(){
                     alert('hellow');
                }
           
            var I1=windom.setInterval(add,1000);  //直接跟函数名
            var I2=windom.setInterval('add()',1000);  //直接跟函数名+()

           window.clearInterval(I1); //去除定时器

The location object

      Obtain the information browser URL

/* location对象的属性 */
    //href :跳转
        location.href;  //当前链接地址
        location.href='url';  //跳转到url连接
    
    //hash :返回url后面 #号后面的内容,包含#号
        location.hash  //  "#/dj"
    
    //host : 主机名和端口
        location.host     //"localhost:63342"
    
    //hostname : 主机名
        location.hostname  //'localhost'

    //pathname : url的路径
        localtion.pathname // "/03%20location%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7.html"
    
    //protocol : 协议,一般是http,https(加密传输,需要有许可证)
        location.protocol

    //search : 查询?后面的字符串
        location.search  //"?_ijt=hqted3fmhsv2rhog47ro1mncq0"

    //reload() :重新加载
        window.location.reload();

navigator object

      Get some information about the client

/* userAgent:系统信息,客户端信息  */
    navigator.userAgent

/* platform 浏览器支持的系统  */
    navigator.platform

history objects

​

/* 后退和前进 */
    history.back()  //后退
    history.forward() //前进
    history.go(-1)  // 0是刷新 , 1是前进 , -1是后退

screen objects (to understand)

Screen objects

screen.availWidth // 可用的屏幕宽度
screen.availHeight // 可用的屏幕高度