2. 技术
    3. JavaScript----操作BOM对象

    JavaScript----操作BOM对象

    技术2022-08-12  87

    前言

    JavaScript中有两个比较重要的对象。一个是BOM对象（浏览器对象模型），一个是DOM对象（文档对象模型）。

    1. BOM简介

    BOM (Browser Object Model) 即浏览器对象模型，提供了独立于内容，而与浏览器窗口交互的对象；由于BOM主要用于窗口之间的通讯，其核心对象是window。 BOM由一系列相关对象构成，并且每个对象都提供了很多方法与属性

    [1] window代表浏览器窗口

    相关方法：

    window.innerHeight //窗口内边界高度 window.innerWidth // 窗口内边界宽度 window.outerHeight //窗口外边界高度 window.outerWidth //窗口外边界宽度

    浏览器上运行的截图

    [2] screen （浏览器屏幕尺寸的大小）

    这里的宽度和高度和我们window的innerWidth和 innerHeight的值是一致的

    screen.width screen.height
    [3] location （代表当前页面的URL信息）

    location的属性十分多，如下图所示： 其中主要的有

    host: "www.baidu.com" //主机名 href: "https://www.baidu.com/" //浏览地址 protocol: "https:" //协议 reload: ƒ reload() //刷新网页
    [4] document（内容）

    document代表页面的内容，HTML DOM文档树为核心，这里只做简单介绍(后面一篇讲解) 这里我们可以改变文档树里的任意内容 也可以获取文档树的节点

    <dl id = "app"> <dt>Java</dt> <dd>JavaSE</dd> <dd>JavaEE</dd> </dl> <script> var dl = document.getElementById("app"); </script>

    可以获取Cookie 。 生活中的实例： [1] 天猫和淘宝。当我们登录淘宝时，天猫会自动登录；这就是一个简单获取Cookie的实例； [2] 当我们浏览网站时，有时候会有安全警告，这时可能是非法人员通过js脚本获取你的cookie信息上传的它的服务器中，那么你的隐私就会暴露。

    [5] history (历史记录)

    主要方法：

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

    [6] navigator （访问者的浏览器详情）

    封装了浏览器的信息

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>navigator对象</title> </head> <body> <div id="example"></div> <script> txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>"; txt+= "<p>浏览器名称: " + navigator.appName + "</p>"; txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>"; txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>"; txt+= "<p>硬件平台: " + navigator.platform + "</p>"; txt+= "<p>用户代理: " + navigator.userAgent + "</p>"; txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>"; document.getElementById("example").innerHTML=txt; </script> </body> </html>
    Processed: 0.012, SQL: 9