js面向对象的学习笔记九(BOM 与 DOM 经常使用的属性分析)

一 BOM物 window 的相关属性

1. 用户配置的机器配置对象 navigator

 navigator.userAgent //该属性能够查看用户机器浏览器的配置

   "Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4"

2. 用户uri訪问地址 location

主    机：host: "www.baidu.com"

   主机名称：hostname: "www.baidu.com"

   完整uri ：href: "http://www.baidu.com/s?wd=%E5%A6%82%E4%B"

   域    名：origin: "http://www.baidu.com"

   路    径：pathname: "/s"

   端口号：port: ""

   协议类型：protocol: "http:"

   又一次加载：reload: function 无參数直接调用

   又一次加载：replace: function 有參数调用后不会在history中生成

   GET 參数：search: "?wd=aaa&lang=zh_cn&name=lizsi"

//获取用户url 上的參数

   //直接使用 getParam('name')

   function getParam(param){

   	   var getarr = (window.location.search.substring(1)).split('&');

	   var getparam = {};

	   for(var j in getarr){

		   var temp = getarr[j].split('=');

		   temp[0] = temp[0].replace(' ','');//去掉变量名中的空格

		   getparam[temp[0]] = temp[1];

	   }

	   return getparam[param];

   }

   //对于pathinfo模式的获取 直接使用getpathinfo(1); 从1開始

   function getpathinfo(index){

	   var getarr = (window.location.pathname.substring(1)).split('/');

	   return getarr[parseInt(index)-1];

   }

3. 历史訪问记录 history

仅仅同意訪问本域名下的历史记录

   后退一页：back: function 无參数直接调用

   前进一页：forward: function 无參数直接调用

   返回指定页：go: function -1 后退一页 0 刷新当前页 1 前进一页 2 前进俩页

   pushState: function () 參数

   replaceState: function () 參数

 //详情查看 http://www.zhangxinxu.com/study/201306/ajax-page-html5-history-api.html?

area=pudong

	//点击过的 增加历史记录

	var query = this.href.split("?

")[1];

	history.pushState({ title: title }, title, location.href.split("?")[0] + "?" + query);

	var title = $(this).text().replace(/\d+$/, "");

	document.title = title;

	//监听 相关事件

	window.addEventListener("popstate", function() {

        history.replaceState(null, document.title, location.href.split("?")[0]);

    });

4. 屏幕对象 screen

屏幕可见高度: availHeight: 667

   屏幕可见宽度: availWidth: 375

   屏幕分辨率:   colorDepth: 24

   屏幕高度:     height: 667

   屏幕宽度:     width: 375

   availLeft: 0

   availTop: 0

二 DOM 对象 document

1. 缓存 cookie

 //直接使用 cookieParam('name')

   function cookieParam(param){

   	   var getarr = document.cookie.split(';');

	   var getparam = {};

	   for(var j in getarr){

		   var temp = getarr[j].split('=');

		   temp[0] = temp[0].replace(' ','');//去掉变量名中的空格

		   getparam[temp[0]] = temp[1];

	   }

	   return getparam[param];

   }