操作BOM对象

• BOM：浏览器对象模型

• window对象不但充当全局作用域，而且表示浏览器窗口。

  //window 对象有 innerWidth 和 innerHeight 属性，可以获取浏览器窗口的内部宽度和高度
  console.log('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight);
  //还有一个 outerWidth 和 outerHeight 属性，可以获取浏览器窗口的整个宽高
  

• navigator 对象表示浏览器的信息

  //常用属性
  console.log('appName = ' + navigator.appName); //名称
  console.log('appVersion = ' + navigator.appVersion);//版本
  console.log('language = ' + navigator.language);//设置的语言
  console.log('platform = ' + navigator.platform); //操作系统类型
  console.log('userAgent = ' + navigator.userAgent);//浏览器设定的 User-Agent 字符串
  /*请注意， navigator 的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的。
  */
  

• screen 对象表示屏幕的信息

  //常用的属性有：
  /*  screen.width：屏幕宽度，以像素为单位；
      screen.height：屏幕高度，以像素为单位；
      screen.colorDepth：返回颜色位数，如8、16、24  */
  console.log('Screen size = ' + screen.width + ' x ' + screen.height);
  

• location 对象表示当前页面的URL信息

  location.href; //https://ai.taobao.com/?pid=mm_124190590_30248727_109212350230
  location.protocol; // 'http'
  location.host; // 'ai.taobao.com'
  location.port; // '8080'
  location.reload();//重新加载当前页面
  location.assign('https://baidu.com/'); // 重新加载新的页面
  

• document 对象就是整个DOM树的根节点

  //document 的 title 属性是从HTML文档中的 xxx 读取的，但是可以动态改变
  document.title = '百度一下，你就知道';
  //用 document 对象提供的 getElementById() 和 getElementsByTagName() 可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点
  var menu = document.getElementById('code-menu');
  var drinks = document.getElementsByTagName('dt');
  //Cookie是由服务器发送的key-value标示符,JavaScript可以通过 document.cookie 读取到当前页面的Cookie
  document.cookie; // 'v=123; remember=true; prefer=zh'
  //为了确保安全，服务器端在设置Cookie时，应该始终坚持使用 httpOnly
  

• history 对象保存了浏览器的历史记录

  //	Js可以调用 history 对象的 back() 或 forward () ，相当于用户点击了浏览器的“后退”或“前进”按钮
  //  任何情况，你都不应该使用 history 这个对象了
  history.back() //后退
  history.forward() //前进