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個

總結

以上是生活随笔為你收集整理的day 0701的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。