day 0701

location.hash	//如果URL包含#，返回该符号之后的内容，如#anchor1 
/* 
hash  一般用于锚点或者路由
当改变hash会触发onhashchange事件
可以通过hash改变产生历史记录，也可以通过历史回退前进切换hash
可以通过hash不同设置同页面中不同的位置，以及同页面中不同的内容
*/
location.host	//IP+Port
location.hostname	//IP
location.href //当前载入页面的完整URL
location.port //URL声明的请求的端口
location.reload(true | false); //重新载入当前页面，为false时从浏览器缓存中重载，为true时从服务器端重载，默认为false

//获取浏览器定位信息
navigator.geolocation.getCurrentPosition(function(geo){
console.log(geo.coords);
},function(err){
console.log(err);
})
//谷歌浏览器会报错，原因：默认使用谷歌地图，信息安全原因

SSR与CSR的了解链接：点我

文档碎片容器

createDocumentFragment()

DocumentFragment，文档片段接口，一个没有父对象的最小文档对象。它被作为一个轻量版的 Document 使用，就像标准的document一样，存储由节点（nodes）组成的文档结构。与document相比，最大的区别是DocumentFragment 不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会导致性能等问题。

虚拟DOM 复制DOM（不复制属性等），解决元素属性更改页面就重绘的问题

了解1 了解2

案例：

//历史记录
 var arr=[
            ["苹果","香蕉","西瓜","桃子","杏","榴莲","葡萄","芒果","荔枝","菠萝","火龙果","橘子","橙子"],
            ["番茄","白菜","菠菜","茄子","土豆","豆角","黄瓜","油菜","油麦菜","花白","韭菜","西蓝花"],
            ["小米","大米","燕麦","黑米","薏仁","绿豆","红豆","黄豆","花生油","菜籽油","玉米油","橄榄油","调和油"],
            ["鸡","鸭","鱼","牛肉","羊肉","狗肉","驴肉","蛇肉","排骨","肋条","牛腱","眼肉","五花肉","鸡爪","鸡脖"],
            ["虾爬子","带鱼","鲅鱼","平鱼","生蚝","石斑鱼","多宝鱼","章鱼","澳龙","青龙","鲍鱼","海胆","帝王蟹","海参"]
        ]
        var list=["水果","蔬菜","粮油","禽肉","海鲜"]

        var lis,div,prev;

        init();
        function init(){
            lis=Array.from(document.getElementsByTagName("li"));
            div=document.getElementById("div1");
            lis.forEach(function(item){
                item.onclick=clickHandler;
            });
            var index=history.state;
            if(index===null)index=0;
            history.replaceState(index,lis[index].innerHTML)
            changePrev(lis[index]);
            window.onpopstate=popstateHandler;
        }

        function clickHandler(){
            changePrev(this);
            history.pushState(list.indexOf(this.innerHTML),this.innerHTML);
        }

        function setData(elem){
            var data=arr[list.indexOf(elem.innerHTML)];
            div.innerHTML=data.reduce(function(value,item){
                return value+item+"   "
            },"");
        }

        function changePrev(elem){
            if(prev){
                prev.style.backgroundColor="orange"
                prev.style.boxShadow="none";
            }
            prev=elem;
            prev.style.backgroundColor="rgb(255, 217, 0)"
            prev.style.boxShadow="0px 0px 3px 3px rgb(255, 253, 148) inset";
            setData(prev);
        }


        function popstateHandler(){
            if(history.state===null) return;
            changePrev(lis[history.state]);
        }

//历史记录hash
 var arr=[
            ["苹果","香蕉","西瓜","桃子","杏","榴莲","葡萄","芒果","荔枝","菠萝","火龙果","橘子","橙子"],
            ["番茄","白菜","菠菜","茄子","土豆","豆角","黄瓜","油菜","油麦菜","花白","韭菜","西蓝花"],
            ["小米","大米","燕麦","黑米","薏仁","绿豆","红豆","黄豆","花生油","菜籽油","玉米油","橄榄油","调和油"],
            ["鸡","鸭","鱼","牛肉","羊肉","狗肉","驴肉","蛇肉","排骨","肋条","牛腱","眼肉","五花肉","鸡爪","鸡脖"],
            ["虾爬子","带鱼","鲅鱼","平鱼","生蚝","石斑鱼","多宝鱼","章鱼","澳龙","青龙","鲍鱼","海胆","帝王蟹","海参"]
        ]
        var list=["水果","蔬菜","粮油","禽肉","海鲜"]

        var lis,div,prev;

        init();
        function init(){
            lis=Array.from(document.getElementsByTagName("li"));
            div=document.getElementById("div1");
            lis.forEach(function(item){
                item.onclick=clickHandler;
            });
            var index=~~(location.hash.slice(1));
            history.replaceState(index,lis[index].innerHTML,"#"+index);
            changePrev(lis[index]);
            window.onhashchange=hashchangeHanlder;
        }

        function clickHandler(){
            changePrev(this);
            var index=list.indexOf(this.innerHTML);
            history.pushState(index,this.innerHTML,"#"+index);
        }

        function setData(elem){
            var data=arr[list.indexOf(elem.innerHTML)];
            div.innerHTML=data.reduce(function(value,item){
                return value+item+"   "
            },"");
        }

        function changePrev(elem){
            if(prev){
                prev.style.backgroundColor="orange"
                prev.style.boxShadow="none";
            }
            prev=elem;
            prev.style.backgroundColor="rgb(255, 217, 0)"
            prev.style.boxShadow="0px 0px 3px 3px rgb(255, 253, 148) inset";
            setData(prev);
        }


        function hashchangeHanlder(){
           var index=~~(location.hash.slice(1));
           changePrev(lis[index]);
        }

作业（后补）：

1.获取当前浏览器版本和型号的函数

2.document.body获取类似于"我的产品"标签内容10个