day 0701

day 0701"/>

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]);}

//历史记录hashvar 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个