js DOM學習筆記4

DOM 編程就是使用 W3C 定義的 API (Application Program Interface)來操做 HTML 文檔 （此處不侷限於 HTML，亦可操做 XHTML、XML 等），使用戶能夠與進行頁面交互。 你須要瞭解節點、屬性、樣式等基本 DOM 操做，DOM 事件模型，數據存儲 (Cookie、Storage) 與數據通訊 (Ajax) ，JavaScript 動畫，音頻、視頻、Canvas 等 HTML5 特性，表單、列表操做。DOM(Document Object Model)爲文檔對象模型,使用對象的表示方法來表示對應的文檔結構及其中的內容<p id="target">Hello World!</p>包含的屬性:p#targetaccessKey: ""align: ""attributes: NamedNodeMapbaseURI: ""childElementCount: 0childNodes: NodeList[1]children: HTMLCollection[0]classList: DOMTokenList[0]className: ""clientHeight: 0clientLeft: 0clientTop: 0clientWidth: 0contentEditable: "inherit"dataset: DOMStringMapdir: ""draggable: falsefirstChild: textfirstElementChild: nullhidden: falseid: "target"innerHTML: "Hello, World!"innerText: "Hello, World!"isContentEditable: falselang: ""lastChild: textlastElementChild: nulllocalName: "p"namespaceURI: "http://www.w3.org/1999/xhtml"nextElementSibling: nullnextSibling: nullnodeName: "P"nodeType: 1nodeValue: nulloffsetHeight: 0offsetLeft: 0offsetParent: nulloffsetTop: 0offsetWidth: 0onabort: nullonautocomplete: nullonautocompleteerror: nullonbeforecopy: nullonbeforecut: nullonbeforepaste: nullonblur: nulloncancel: nulloncanplay: nulloncanplaythrough: nullonchange: nullonclick: nullonclose: nulloncontextmenu: nulloncopy: nulloncuechange: nulloncut: nullondblclick: nullondrag: nullondragend: nullondragenter: nullondragleave: nullondragover: nullondragstart: nullondrop: nullondurationchange: nullonemptied: nullonended: nullonerror: nullonfocus: nulloninput: nulloninvalid: nullonkeydown: nullonkeypress: nullonkeyup: nullonload: nullonloadeddata: nullonloadedmetadata: nullonloadstart: nullonmousedown: nullonmouseenter: nullonmouseleave: nullonmousemove: nullonmouseout: nullonmouseover: nullonmouseup: nullonmousewheel: nullonpaste: nullonpause: nullonplay: nullonplaying: nullonprogress: nullonratechange: nullonreset: nullonresize: nullonscroll: nullonsearch: nullonseeked: nullonseeking: nullonselect: nullonselectstart: nullonshow: nullonstalled: nullonsubmit: nullonsuspend: nullontimeupdate: nullontoggle: nullonvolumechange: nullonwaiting: nullonwebkitfullscreenchange: nullonwebkitfullscreenerror: nullonwheel: nullouterHTML: "<p id="target">Hello, World!</p>"outerText: "Hello, World!"ownerDocument: documentparentElement: nullparentNode: nullprefix: nullpreviousElementSibling: nullpreviousSibling: nullscrollHeight: 0scrollLeft: 0scrollTop: 0scrollWidth: 0shadowRoot: nullspellcheck: truestyle: CSSStyleDeclarationtabIndex: -1tagName: "P"textContent: "Hello, World!"title: ""translate: truewebkitdropzone: ""__proto__: HTMLParagraphElement經過使用 DOM 提供的 API (Application Program Interface)能夠動態的修改節點（node），也就是對 DOM 樹的直接操做。瀏覽器中經過使用 JavaScript 來實現對於 DOM 樹的改動。DOM 包含DOM CoreDOM HTMLDOM StyleDOM Event節點遍歷在元素節點中提取本身所需的節點，並予以操做。// Document.getElementsByTagName()// 更具標籤名找到目標節點的集合，此例中爲 <h1>My header</h1>var node = document.getElementsByTagName('h1')[0];// Node.parentNode;// 得到目標節點的父節點，此例中爲 body 元素node.parentNode;// Node.firstChild// 得到目標節點的第一個子節點，此例中爲 "My header"node.firstChild;// Node.lastChild// 得到目標節點的最後一個子節點，此例中爲 "My header"node.lastChild;// Node.previousSibling;// 得到目標節點的前一個相鄰節點node.previousSibling;// Node.nextSibling;// 得到目標節點的下一個相鄰節點node.nextSibling;節點類型經常使用節點類型ELEMENT_NODE 可以使用 Document.createElement('elementName'); 建立TEXT_NODE 可以使用 Document.createTextNode('Text Value'); 建立不經常使用節點類型COMMENT_NODEDOCUMENT_TYPE_NODE不一樣節點對應的NodeType類型須要清楚節點和元素的區別。咱們日常說的元素 其實指的是節點中得元素節點，因此說節點包含元素，節點還包括文本節點、實體節點等。元素遍歷:元素節點符合 HTML DOM 樹規則，因此它與 DOM 中存在的節點類似。<p>    Hello,    <em>Xinyang</em>!    回到    <a href="http://li-xinyang.com">        主頁    </a>    。</p>// 在選取元素節點後p.firstElementChild;       // <em>Xinyang</em>p.lastElementChild;        // <a href="http://li-xinyang.com">主頁</a>em.nextElementSibling;     // <a href="http://li-xinyang.com">主頁</a>em.previousElementSibling; // "Hello,"節點操做:經過 JavaScript 來獲取、建立、修改、或刪除節點。獲取節點父子關係element.parentNodeelement.firstChild/element.lastChildelement.childNodes/element.children兄弟關係element.previousSibling/element.nextSiblingelement.previousElementSibling/element.nextElementSibling經過節點直接的關係獲取節點會致使代碼維護性大大下降（節點之間的關係變化會直接影響到獲取節點），而經過接口則能夠有效的解決此問題。<ul id="ul">    <li>First</li>    <li>Second</li>    <li>Third</li>    <li>Fourth</li></ul><p>Hello</p><script type="text/javascript">    var ulNode = document.getElementsByTagName("ul")[0];    console.log(ulNode.parentNode);             //<body></body>    console.log(ulNode.previousElementSibling); //null    console.log(ulNode.nextElementSibling);     //<p>Hello</p>    console.log(ulNode.firstElementChild);      //<li>First</li>    console.log(ulNode.lastElementChild);       //<li>Fourth</li></script>在節點遍歷的例子中，body、ul、li、p節點之間是沒有空格的，由於若是有空格，那麼空格就會被當作一個TEXT節點，從而用ulNode.previousSibling獲取到得就是一個空的文本節點，而不是 <li>First</li> 節點了。即節點遍歷的幾個屬性會獲得全部的節點類型，而元素遍歷只會獲得相對應的元素節點。通常狀況下，用得比較多得仍是元素節點的遍歷屬性。實現瀏覽器兼容版的element.children有一些低版本的瀏覽器並不支持 element.children 方法，但咱們能夠用下面的方式來實現兼容。<body id="body"><div id="item">    <div>123</div>    <p>ppp</p>    <h1>h1</h1></div><script type="text/javascript">    function getElementChildren(e){        if(e.children){            return e.children;        }else{            /* compatible other browse */            var i, len, children = [];            var child = element.firstChild;            if(child != element.lastChild){                while(child != null){                    if(child.nodeType == 1){                        children.push(child);                    }                    child = child.nextSibling;                }            }else{                children.push(child);            }            return children;        }    }    /* Test method getElementChildren(e) */    var item = document.getElementById("item");    var children = getElementChildren(item);    for(var i =0; i < children.length; i++){        alert(children[i]);    }</script></body>4.121.屬性操做HTML屬性與DOM屬性的對應:每一個HTML屬性都會對應相應的DOM對象屬性下面的代碼:input.id == "username"input.type == "text"input.className == "text"label.htmlFor == "username"<div>    <label for="username">UserName:</label>    <input type="input" name="username" id="username" class="text" value=""></div>出現操做方式:1.方式一1.讀取屬性input.className;//textinput[id]2.寫入屬性input.value="new value"input.[id]="new_id"2.方式二讀:var attr = element.getAttribute("attributeName")寫:element.setAttribute("attributeName",value)dataset:自定義屬性爲 HTMLElement 上的屬性也是 data-* 的屬性集。主要用於在元素上保存數據。獲取的均爲屬性字符串。數據一般使用 AJAX 獲取並存儲在節點之上。<div id='user' data-id='1234' data-username='x' data-email='mail@gmail.com'></div>div.dataset.id;         // '1234'div.dataset.username;   // 'x'div.dataset.email;      // 'mail@gmail.com'dataset 在低版本 IE 不可以使用，但可經過 getAttribute 與 setAttribute 來作兼容。2.樣式操做經過JS動態修改頁面的樣式<link rel="stylesheet" type="text/css" href="sample.css">// var element = document.querySelector('link');// 對應於 element.sheet<style type="text/css" media="screen">    body {        margin: 30px    }</style>// var element = document.querySelector('style');// 對應於 element.sheet// 整個頁面的所有樣式（不包括行內樣式）document.styleSheets<p style="color:red">Text Color</p>// var element = document.querySelector('p');// 對應於 element.style1.內部樣式表<style>    body{margin:30;}    p{color: #aaa; line-height:20px}</style>// 1.對應全部樣式的列表// body{margin:30;}// p{color: #aaa; line-height:20px}element.sheet.cssRules;// 2.對應相應的 CSS 選擇器// pelement.sheet.cssRules[1].selectorText;// 3.對應一個樣式// p{color: #aaa; line-height:20px}element.sheet.cssRules[1]// 4.對應全部樣式的鍵值對// color: #aaa; line-height:20pxelement.sheet.cssRules[1].style;// 5.對應的屬性值// #aaaelement.sheet.cssRules[1].stlye.color;element.sheet.cssRules[1].lineHeight;2.行內樣式表其對應於 CSSStyleDeclaration 的對象。element.style.color;// 獲取行內樣式的鍵值對3.更新樣式表1.element.style.color = 'red';element.style.background = 'black';//result<div style="color: red; background: black;"></div>缺點每一個屬性的更新都須要一個命令命名異常（以駝峯命名法命名屬性）element.style.cssText一次同時設置多個行內樣式，其結果同 element.style 單獨設置相同。element.style.cssText = 'color: red; background: black';增長樣式後獲得的結果<div style="color: red; background: black;"></div>上面的樣式會把自身混合到邏輯中2.更新class首先須要建立對應樣式的 CSS 樣式。.angry {color: red;background: black;}而後再在 JavaScript 中，在對應的事件中給元素添加須要的類便可。element.className += ' angry';增長樣式後獲得的結果<div class="angry"></div>統一更新多個元素樣式以上方法均不適合同時更新多個樣式，經過更換樣式表的方式則可同時更改多個頁面中的樣式。將須要的大量樣式也在一個皮膚樣式表中，經過 JavaScript 來直接更換樣式表來進行樣式改變。（此方法也可用於批量刪除樣式）<link rel="stylesheet" type="text/css" href="base.css"><link rel="stylesheet" type="text/css" href="style1.css">element.setAttribute('href', 'style2.css');獲取樣式element.style其對應的爲元素的行內樣式表而不是實際樣式表。<input type="checkbox" name="" value="">element.style.color; // ""line-height: 200pxwindow.getComputedStyle()將須要取出樣式的目標元素傳入 window.getComputedStyle() 函數中，便可獲得對應元素的實際樣式。注意的是這裏獲取到的樣式值爲只讀屬性不可修改！NOTE：獲取的實際爲 CSSStyleDeclaration 的實例對象。 NOTE+：此方法不支持 IE9 如下版本，IE9 中需使用 element.currentStyle 來作兼容。var style = window.getComputedStyle(element[, pseudoEle]);<input type="checkbox" name="" value="">window.getComputedStyle(element).color; // 'rgb(0,0,0)'4.13DOM事件JavaScript 有能力對 HTML 事件作出反應:鍵盤事件,鼠標事件事件流一個 DOM 事件能夠分爲捕獲過程、觸發過程、冒泡過程。DOM 事件流爲 DOM 事件的處理及執行的過程1.事件捕獲過程:當 DOM 事件發生時，它會從window節點一路跑下去直到觸發事件元素的父節點爲止，去捕獲觸發事件的元素。2.Target Phase（事件觸發過程）:當事件被捕獲以後就開始執行事件綁定的代碼3.冒泡過程:當事件代碼執行完畢後，瀏覽器會從觸發事件元素的父節點開始一直冒泡到window元素（即元素的祖先元素也會觸發這個元素所觸發的事件）// 添加Capture階段事件docuemnt.addEventListener('click',function(){alert('capture：'+1);},true);tableNode.addEventListener('click',function(){alert('capture：'+2);},true);tdNode.addEventListener('click',function(){alert('capture：'+3);},true);// 添加Bubbling階段事件docuemnt.addEventListener('click',function(){alert('bubble：'+1);});tableNode.addEventListener('click',function(){alert('bubble：'+2);});tdNode.addEventListener('click',function(){alert('bubble：'+3);});輸出結果爲：capture：1capture：2capture：3bubble：3bubble：2bubble：1事件註冊事件註冊，取消以及觸發其做用對象均爲一個 DOM 元素。註冊事件eventTarget.addEventListener(type, listener[,useCapture])evenTarget 表示要綁定事件的DOM元素type 表示要綁定的事件，如："click"listener 表示要綁定的函數useCapture 可選參數，表示是否捕獲過程useCapture 爲設定是否爲捕獲過程，默認事件均爲冒泡過程，只有 useCapture 爲 true 時纔會啓用捕獲過程。// 獲取元素var elem = document.getElemenyById('id');// 事件處理函數var clickHandler = function(event) {// statements};// 註冊事件elem.addEventListener('click', clickHandler, false);// 第二種方式，不建議使用elem.onclick = clickHandler;// 或者來彌補只可觸發一個處理函數的缺陷elem.onclick = function(){clickHandler();func();// 其餘處理函數};取消事件eventTarget.removeEventListener(type, listener[,useCapture]);evenTarget 表示要綁定事件的DOM元素type 表示要綁定的事件，如："click"listener 表示要綁定的函數useCapture 可選參數，表示是否捕獲過程// 獲取元素var elem = document.getElemenyById('id');// 取消事件elem.removeEventListener('click', clickHandler, false);// 第二種方式。不建議使用elem.onclick = null;主動觸發事件點擊元素，按下按鍵均會觸發 DOM 事件，固然也能夠以經過代碼來觸發事件。eventTarget.dispatchEvent(type);// 獲取元素var elem = document.getElemenyById('id');// 觸發事件elem.dispatchEvent('click');瀏覽器兼容型以上均爲 W3C定義的標準定義，但早期瀏覽器 IE8 及其如下版本，均沒有采用標準的實現方式。不過這些低版本瀏覽器也提供了對於 DOM 事件的註冊、取消以及觸發的實現。事件註冊與取消，attchEvent/detachEvent。事件觸發，fireEvent(e)，其也不存在捕獲階段（Capture Phase）。兼容低版本代碼實現註冊事件var addEvent = document.addEventListener ?function(elem, type, listener, useCapture) {elem.addEventListener(type, listener, useCapture);} :function(elem, type, listener, useCapture) {elem.attachEvent('on' + type, listener);}取消事件var addEvent = document.removeElementListener ?function(elem, type, listener, useCapture) {elem.removeElementListener(type, listener, useCapture);} :function(elem, type, listener, useCapture) {elem.detachEvent('on' + type, listener);}事件對象調用事件處理函數時傳入的信息對象，這個對象中含有關於這個事件的詳細狀態和信息，它就是事件對象 event。其中可能包含鼠標的位置，鍵盤信息等。// 獲取元素var elem = document.getElemenyById('id');// 事件處理函數var clickHandler = function(event) {// statements};// 註冊事件elem.addEventListener('click', clickHandler, false);NOTE：在低版本 IE 中事件對象是被註冊在 window 之上而非目標對象上。使用下面的兼容代碼既可解決。var elem = document.getElemenyById('id');// 事件處理函數var clickHandler = function(event) {event = event || window.event;// statements};屬性和方法通用屬性和方法屬性type 事件類型target(srcElement IE 低版本) 事件觸發節點currentTarget 處理事件的節點方法stopPropagation 阻止事件冒泡傳播preventDefault 阻止默認行爲stopImmediatePropagation 阻止冒泡傳播阻止事件傳播event.stopPropagation()（W3C規範方法），若是在當前節點已經處理了事件，則能夠阻止事件被冒泡傳播至 DOM 樹最頂端即 window 對象。event.stopImmediatePropagation() 此方法同上面的方法相似，除了阻止將事件冒泡傳播值最高的 DOM 元素外，還會阻止在此事件後的事件的觸發。event.cancelBubble=true 爲 IE 低版本中中對於阻止冒泡傳播的實現。阻止默認行爲默認行爲是指瀏覽器定義的默認行爲（點擊一個連接的時候，連接默認就會打開。當咱們雙擊文字的時候，文字就會被選中），好比單擊連接能夠打開新窗口。Event.preventDefault() 爲 W3C 規範方法，在 IE 中的實現方法爲 Event.returnValue=false。常見的事件:1.windowload 頁面所有加載完畢unload離開本頁面前的卸載error頁面異常abort取消加載2.imageload圖片加載完畢error圖片加載失敗abort取消圖片加載<img src="http://sample.com/img.png" onerror="this.src='http://sample.com/default.png'">3.UIEventresize,scrollresize 爲改變瀏覽器或iframe的窗體大小時會觸發事件，scroll 則會在滑動內容時觸發，做用於 Document 則不會冒泡，做用於內部元素則會冒泡。4.MouseEventclick,dbclick,mousedown,mousemove,mouseout,mouseover,mouseup,mouseenter,mouseleavemouseenter 與 mouseover 的區別爲前者在鼠標在子元素直接移動不會觸發事件，然後者會觸發。 mouseleave 與 mouseout 同上類似。屬性:clientX, clientXscreenX, screenYctrlKey, shiftKey, altKey, metaKey 若是被按下則爲真（true）鼠標的鍵位:0左邊,1中間滾輪,2右邊MouseEvent 順序鼠標的移動過程當中會產生不少事件。事件的監察頻率又瀏覽器決定。例子：從元素 A 上方移動過mousemove -> mouseover(A) -> mouseenter(A) -> mousemove(A) -> mouseout(A) -> mouseleave(A)例子：點擊元素mousedown -> [mousemove] -> mouseup -> click5.滾輪事件wheel屬性:deltaMode滾輪偏移量的單位deltaY,deltaX,deltaZ6.FocusEvent:用於處理元素得到或失去焦點的事件blur,focus,focusin,focusoutblur 失去焦點時，focus 得到焦點時，focusin 即將得到焦點，focusout即將失去焦點。一個元素失去，即另外一個元素得到焦點。這裏的 relatedTarget 則爲相對的那個元素。relatedTarget6.inputEventbeforeInput,inputbeforeInput 爲在按鍵按下後即將將輸入字符顯示以前生成的事件。IE 並無 InputEvent 則需使用 onpropertychange(IE) 來代替。7.keyboardEvent:鍵盤事件keydown,keyup屬性:key 按下的鍵字符串codectrlKey, shiftKey, altKey, metaKeyrepeat 表明按鍵不鬆開爲 truekeyCodecharCodewhich8.事件代理事件代理是指在父節點上（可爲元素最近的父節點也可爲上層的其餘節點）處理子元素上觸發的事件，其原理是經過事件流機制而完成的。能夠經過事件對象中獲取到觸發事件的對象（以下所示）。var elem = document.getElemenyById('id');elem.addEventListener('click', function(event) {var e = event || window.event;var target = e.target || e.srcElement;// statements});優勢須要管理的事件處理函數更少內存分配更少，更高效增長與刪除子節點能夠不額外處理事件缺點事件管理的邏輯變的複雜（由於冒泡機制）4.151.多媒體和圖形編程基本用法// 音頻// 指定資源類型能夠幫助瀏覽器更快的定位解碼<audio autobuffer autoloop loop controls>    <source src="/media/audio.mp3" type="audio/mpeg">    <source src="/media/audio.oga">    <source src="/media/audio.wav">    <object type="audio/x-wav" data="/media/audio.wav" width="290" height="45">        <param name="src" value="/media/audio.wav">        <param name="autoplay" value="false">        <param name="autoStart" value="0">        <p><a href="/media/audio.wav">Download this audio file.</a></p>    </object></audio>// 視頻<video autobuffer autoloop loop controls width=320 height=240>    <source src="/media/video.oga">    <source src="/media/video.m4v">    <object type="video/ogg" data="/media/video.oga" width="320" height="240">        <param name="src" value="/media/video.oga">        <param name="autoplay" value="false">        <param name="autoStart" value="0">        <p><a href="/media/video.oga">Download this video file.</a></p>    </object></video>測試音頻兼容性。var a = new Audio();// 檢測媒體類型返回// 支持 - 'maybe' 或 'probably'// 不支持 - ''a.canPlayType('audio/nav');常見的屬性:src:URL地址或者文件地址controls:是否顯示自帶的控件(音量,時間軸...)autoplay:就緒後是否自動播放preload:(none|metadata|auto),音頻在頁面加載是否進行加載,並預備播放.使用autoplay會忽略改屬性loop:是否循環控制多媒體:方法:load()加載資源,play()播放,pause()暫停播放屬性:playbackRate 1爲正常播放,大於1爲快速,最大20currentTime:調整播放時間,單位秒.volume:取值範圍是0--1mutedpaused:暫停值seeking:是否跳轉ended:是否播放完成duration:時長initialTime:媒體開始時間多媒體相關事件:loadstart 開始請求媒體內容loadmetadata:元數據加載完成(時長,編碼格式等)canplay:調用play或者autoplaywaiting緩存數據不夠,暫停播放playing:正在播放多媒體事件:https://www.w3.org/wiki/HTML/Elements/audio#Media_Events2.canvascanvas默認寬高度300和150,可使用CSS設置,可是由於CSS與JS渲染速度的差別,不建議使用CSS來設置<canvas id="canvasId" width="300" height="150"></canvas>渲染圖形上下文:contextvar canvas = document.getElementById('canvasId');var ctx = canvas.getContext('2d');// 繪畫 canvas 的屬性ctx.globalCompositeOperation = 'destination-over';globalCompositeOperation 爲對於 canvas 繪畫時的渲染屬性設置包含:source-over,source-in,source-out,source-atop,destination-over,destination-in,destination-out,destination-atop,lighter,darker,copy,xor使用context繪圖過程清除畫布---繪製圖形--保存渲染狀態--繪製圖形--恢復上下文狀態---繪圖---var sun = new Image();var moon = new Image();var earth = new Image();function init() {sun.src = 'Canvas_sun.png';moon.src = 'Canvas_moon.png';earth.src = 'Canvas_earth.png';window.requestAnimationFrame(draw);}function draw(){var ctx = document.getElementById('canvas').getContext('2d');ctx.globalCompositeOperation = 'destination-over';// 清空畫布內容ctx.clearRect(0, 0, 300, 300);ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)';// 保存畫布狀態ctx.save();ctx.translate(150, 150);// 開始繪製圖形// 地球var time = new Date();ctx.rotate(((2*Math.PI)/60)* time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds());ctx.translate(105, 0);// 陰影ctx.fillRect(0, -12, 50, 24);ctx.drawImage(earth, -12, -12);// 月亮ctx.rotate(((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds());ctx.translate(0, 28.5);ctx.drawInmage(moon, -3.5, -3.5);// 恢復畫布狀態ctx.restore();ctx.beginPath();ctx.arc(150, 150, 105, 0, Math.PI*2, false);ctx.stroke();ctx.drawImage(sun, 0, 0, 300, 300);window.requestAnimationFrame(draw);}init();4.16BOM:Browser Object Module屬性:navigator,location,history,screen(屏幕信息)1.navigator:navigator.userAgentChrome, Mozilla/5.0(Windows NT 6.1; WOW64) Apple WebKit/37.36 (KHTML, like Gecko)Chrome/40.0.2214.115 Safari/537.36Firefox, Mozilla/5.0(Windows NT 6.1; WOW64; rv:36.0) Gecko/20100101 Firefox/36.0IE, Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727;.NET CLR 3.5.30729; .NET CLR 3.0.30729;Media Center PC 6.0; .NET4.0C; .NET4.0E; InfoPath.3; rv:11.0) like Gecko經過userAgent判斷瀏覽器類型2.location:表明瀏覽器的定位和導航。可使用 location 來操做 URL 中的各個部分。最經常使用的有 href 屬性，當前訪問資源的完整路徑。方法:assign(url) 載入新的 url，記錄瀏覽記錄replace(url) 載入新的 url 不記錄瀏覽記錄reload() 從新載入當前頁3.history瀏覽器當前窗口的瀏覽歷史。方法back(int) 後退forward(int) 前進go(int) 正數向前，負數向後screen其中包含屏幕信息。其中 avil- 開頭的屬性爲可用屬性，其他則爲顯示器設備屬性。4.window方法alert(),confirm()返回真假,prompt()返回用戶輸入值(對話框會堵塞主線程)setTimeout(),setInterval(),open(),clos()var w = window.open('subwindow.html', 'subwin', 'width=300, height=300, status=yes, resizable=yes');// 既可關閉窗口w.close();事件:load:文檔和全部的圖片加載完畢unload:離開當前文檔beforeunload:和 unload 相似，可是它提供詢問用戶是否確認離開的機會resize:拖動改變瀏覽器窗口的大小scroll:拖動瀏覽器時二.網絡數據通訊HTTP:HyperTextTransferProtocol,超文本傳輸協議客戶端發起請求並建立端口,服務器在端口監聽客戶端的請求,server在接收到請求後返回狀態和請求的內容HTTP網頁瀏覽的過程:網頁瀏覽全過程 （粗淺流程）一.域名解析    1.搜索瀏覽器自身 DNS 緩存    2.搜索操做系統自身 DNS 緩存（如上一級未找到或已失效）    3.讀取本地 HOST 文件 （如上一級未找到或已失效，/etc/hosts）    4.瀏覽器發起 DNS 系統調用請求        ISP 服務器查找自身緩存        ISP 服務器發起迭代（逐域尋找須要的地址）請求二.獲得請求資源的 IP 地址三.發起 HTTP 「三次握手」（下面爲一個超級簡化版）    1.創建鏈接，等待服務器確認    2.服務器接受請求，回覆客戶    3.客戶端與服務器鏈接成功（TCP/IP 鏈接成功）四.客戶端根據協議發送請求五.服務器根據請求返回客戶需求資源六.客戶得到資源經常使用的HTTP方法:GET,POST,PUT,DELETE,HEAD,TRACE,OPTIONSURL的組成:http://www.github.com:8080/index.html?user=li-xinyang&lang=zh-CN#home|          |          |       |                  |              |protocol  hostName   port    pathname            search          hashHTTP 版本HTTP/0.9 1991年 HTTP 原型，存在設計缺陷HTTP/1.0 第一個普遍應用版本HTTP/1.0+ 添加持久的 keep-alive 連接，虛擬主機支持，代理鏈接支持，成爲非官方的事實版本HTTP/1.1 校訂結構性缺陷，明確語義，引入重要的新能優化措施，刪除很差的特性（當前使用版本）AJAXAJAX（Asynchronous JavaScript and HTML）異步獲取數據的概念，由 Jesse James Garrett 在2005年提出。AJAX 調用三部完成 AJAX 調用1.建立 XHR 對象2.處理返回數據及錯誤處理3.發送請求var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(callback) {if (xhr.readyState === 4) {if ((xhr.status >== 200 && xhr.status < 300) || xhr.status === 304) {callback(xhr.responseText);} else {console.error('Request was unsuccessful: ' + xhr.status);}}}xhr.open('get', 'exmaple.json', true);xhr.setRequestHeader('myHeader', 'myValue');xhr.send(null);openxhr.open(method, url[, async = true]);method 爲上面說過的 HTTP 方法（例如，GET、POST）url 爲資源地址async 默認爲真，用於設置異步請求setRequestHeaderxhr.setRequestHeader('myHeader', 'myValue');xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');用於設置頭部的鍵值對。sendxhr.send([data=null]);xhr.send()數據可包含字符串或表單數控，但須要提早爲 RequestHeader 作設置。請求參數序列化將查詢參數使用字符串，跟入資源地址中。xhr.open('get', 'example.json?' + 'name=value&age=value', true);對象轉換字符串的函數實現function serialize(data) {    if (!data) return '';    var pairs = [];    for (var name in data) {        if (!data.hasOwnProperty(name)) continue;        if (typeof data[name] === 'function') continue;        var value = data[name].toString();        name = encodeURIComponent(name);        value = encodeURIComponent(value);        pairs.push(name + '=' + value);    }    return pairs.join('&');}GET 請求var url = 'example.json?' + serialize(formData);xhr.open('get', url, true);xhr.send(null);POST 請求查詢參數須要做爲 send() 的存數傳入。xhr.open('get', 'example.json', true);xhr.send(serialize(formData));JSONP全程爲 JSON with Padding（填充式 JSON），它利用 <script> 能夠跨域的原理。請求一段 JavaScript 代碼，而後執行 JavaScript 代碼來實現跨域。function handleResponse(response) {    alert(response.name);}var script = document.createElement('script');script.src = 'http://localhost:3000/json?callback=handleResponse';document.body.insertBefore(script, document.body.firstChild);4.21一.數據存儲Cookie:小型文本,4kb左右,又鍵值對構成,分號隔開,多數是在服務器端對Cookie進行設置在頭文件中set-Cookie來對Cookie進行設置,頁面能夠訪問當前頁面的Cookie,也能夠訪問父域的Cookie屬性:Name:名稱必填Value:值,必填Domain:當前文檔域,做用域Path:當前文檔路徑,做用路徑Expires(時間戳)/Max-Age(毫秒數值)Secure:https協議時生效讀取Cookie:並轉換爲JS對象        function getCookie(){            var cookie = {};            var all = document.cookie;            if (all === '') return cookie;            var list = all.split(';');            for(var i = 0,len = list.length;i<len;i++){                var item = list[i];                var p = item.indexOf('=');                var name = item.substring(0,p);                name = decodeURIComponent(name);                var value = item.substring(p+1);                value = decodeURIComponent(value);                cookie[name] = value;            }            return cookie;        }設置與修改document.cookie = 'name=value';下面爲設置Cookie值的封裝函數:function setCookie(name,value,expires,path,domain,secure){    var cookie = encodeURIComponent(name) + '=' +encodeURIComponent(value)    if (expires){        cookie += ';expires=' + expires.toGMTString();    }    if (path){        cookie += ';path=' + path;    }    if (domain){        cookie += ';domain=' +domain;    }    if (secure) {        cookie += '; secure=' + secure;        document.cookie = cookie;    }}刪除Cookie值的函數function removeCookie(name,path,domain){    document.cookie = 'name=' + name +';path=' + path + ';domain=' + domain + ';max-age=0';}Cookie缺陷流量代價,安全性,大小限制二.Storage        做用域不一樣分爲LocalStorage和SessionStorage,前者在用戶不清理的狀況下時間默認爲永久,後者默認爲瀏覽器的會話時間(瀏覽器不一樣窗口直接不共享 Session Storage)不一樣瀏覽器對其實現的不一樣致使支持大小也不太，一般在 5MB 做用。對象讀取localStorage.name添加或修改localStorage.name = 'Value';瀏覽器只支持字符串在 Storage 中的存儲。刪除delete localStorage.nameAPI使用 API 操做 Storage 能夠進行向下兼容的功能，在不支持的狀況下能夠用 Cookie 來代替。localStorage.length 獲取鍵值對數量localStorage.getItem('name') 獲取對應值localStorage.key(i) 對應值的索引獲取localStorage.setItem('name', 'value') 設置鍵值對localStorage.removeItem('name') 刪除一個值localStorage.clear() 刪除全部數據