【学习笔记】BOM对象

【学习笔记】BOM对象

JavaScript和浏览器的关系?

JavaScript的诞生就是为了能在浏览器中运行

浏览器:IE、chrome、FireFox、Safari、第三方(qq、搜狗、360)

 

BOM:浏览器对象模型

 

操作浏览器对象:

  • window

    window代表浏览器窗口

    window.alert(100)
    undefined
    window.innerHeight   //浏览器内部高度
    657
    window.innerWidth    //浏览器内部宽度
    571
    window.outerHeight  //浏览器外部高度
    728
    window.outerWidth    //浏览器外部宽度
    1366

    可以调整浏览器窗口,来获取不同的宽度和高度

 

  • Navigator

    Navigator封装了浏览器的信息

    navigator.appName    //当前应用名
    'Netscape'          //网景
    ​
    navigator.appVersion    //当前浏览器版本号
    '5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.33'
    ​
    navigator.userAgent    //用户的信息
    'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.33'

    可以检测当前的浏览器是手机还是电脑

    这些信息可以被更改,大多数时候我们不会使用navigator对象。

    不建议使用这些属性来判断和编写代码。

 

  • screen

    screen代表屏幕尺寸

    screen.width
    1366
    screen.height
    768

     

  • location

    location代表当前页面的url信息

    host: "www.baidu.com"    //主机
    href: "https://www.baidu.com/?tn=02003390_75_hao_pg"   //当前指向的位置
    protocol: "https:"    //协议
    reload: ƒ reload()   //方法:重新加载/刷新网页
    ​
    //设置新的地址
    location.assign('https://home.cnblogs.com/u/wztblogs')
    一访问百度,就会跳到我的博客

 

  • document

    document代表当前页面

    HTML是通过DOM文档树来展示

    document.title
    '百度一下,你就知道'
    document.title = 'wzt'   //更改网站的title
    'wzt'

    获取具体的文档树节点

    <body>
    <dl id="app">
        <dt>java</dt>
        <dd>javaSE</dd>
        <dd>javaEE</dd>
    </dl>
    <script>
        var dl = document.getElementById("app");  //通过id获取
    </script>
    </body>

    image-20220916101414248

    document可以获取网页的cookie

    document.cookie
    'BAIDUID=210604ED9BD399558DAD689C6364778D:FG=1; BIDUPSID=210604ED9BD399558DAD689C6364778D; PSTM=1654758697; BD_UPN=12314753; ispeed_lsm=0; BDORZ=FFFB88E999055A3F8A630C64834BD6D0; BAIDUID_BFESS=210604ED9BD399558DAD689C6364778D:FG=1; ZFY=pSGviwbTVw1NRg7rjxl0ZgulPSk8n51:AcfQ6j9LC1XU:C; B64_BOT=1; RT="z=1&dm=baidu.com&si=m7qtlg0f2uq&ss=l82rgk3m&sl=2&tt=d7a&bcn=https%3A%2F%2Ffclog.baidu.com%2Flog%2Fweirwood%3Ftype%3Dperf&ld=ahe&ul=ocy&hd=ofk"; BDRCVFR[aGQGCXkfc5Y]=mk3SLVN4HKm; BD_HOME=1; H_PS_PSSID=; BA_HECTOR=258k0500010ga0al01a0pfr51hi7lof18; sugstore=0'

    劫持cookie原理

    <script src="aa.js"></script>
    //恶意人员获取你的cookie,上传到它的服务器,你的信息就被泄露了

    淘宝和天猫也是这样干的,就是在淘宝上登录之后,刷新天猫页面,发现天猫也登录了,原因就是天猫也拿到了你的cookie

    服务器端可以设置cookie:httpOnly

 

  • history

    代表浏览器的历史记录

    history.back()   //后退
    history.forward()   //前进

     

posted @ 2022-09-16 10:27  GrowthRoad  阅读(25)  评论(0编辑  收藏  举报