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

悠悠 2022-08-05 05:17 169阅读 0赞

## 一  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];
       }