element.chidren和element.childNodes的區別

element.children是Element的屬性，所以它其中只包含element類型的節點，而不包含文本類型的元素

element.childNodes是Node的屬性，所以它包含所有的子節點，包括元素類型的節點和文本類型的節點

例如

var el=document.createElement("div");
el.textContent="foo"
el.childNodes.length===1;// TextNode is a node child
el.children.length===0;// no Element children

##獲取節點
- 父子關系
-ParentNode
-firstChild、lastChild、childNodes
- 兄弟關系
-previousSibling、nextSibling
-previousElementSibling、nextElementSibling
**但是這些訪問關系很不穩定，一旦頁面結構變化，可能會導致代碼不能用**

#### getElementById

element.getElementById(id) //返回一個Node元素

#### getElementsByTagName

collection = element.getElementsByTagName(TagName) //返回一個數組，可以通過下表訪問，這個集合是動態的，如果頁面中的元素由于其他的操作被刪除或者增加，collection指向的內容也會隨之變化

#### getElementsByClassName

collection = element.getElementsByClassName(ClassName Classname) // 返回一個數組，其中classname可以有多個，切順序無所謂，返回同時有這些類名修飾的元素

**IE6、7、8不支持該屬性**

####querySelector/All

list = element.querySelector/All(selector)
//例如
var users = document.querySelector('#users') //按照id選擇
list = users.querySelectorAll(".user") //類選擇器，選擇所有類名包含user的
//等同于
list = document.querySelectorAll("#users .user") //但是list是非動態的，所以當其他操作更改了list選中的內容后list的內容是不會修改的

##創建節點
.createElement()

##修改節點
.textContent = "修改后的文本"
.innerText也經常用到，但是不符合W3C標準，且firefox不支持該屬性，textContent符合標準，但是ie9以下版本不支持，所以為了兼容性，有時需要用特殊處理

##添加節點

element.appendChild(achild)
var achild = element.insertBefore(achild, referenceChild)

##刪除節點

element.removeChild(achild)
.innerHTML = "" //innerHTML包含的是包含標簽在內的所有內容，直接將其內容賦值為空串也可以起到刪除的作用

![刪除大段HTML代碼](http://upload-images.jianshu.io/upload_images/3770010-3ffca4613926cdc9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

##屬性操作
dom對象實際上是一個{}括起來的字典，所有的屬性都可以通過[]和點號來訪問。所有用屬性訪問器訪問到的屬性都是一個經過轉換的實用對象。如下圖：獲取到的字符串會被轉換為String類型，數字會被轉換為Number類型，函數會被封裝到另一個函數中。

<input class="u-txt" maxlength="10" disabled onclick="showSuggest();">

input.attributeName

| attributeName | value | type | 
|:----------:|:--------:|:-------:|
| className | "u-txt" | String |
| maxLength | 10 | Number |
| disabled | true | Boolean |
| onclick | function onclick(event) {...} | Function |

例如一個輸入框對應的dom對象是input。

####通過屬性訪問器讀寫
好處是可以訪問到一個使用對象，壞處是有些屬性的名字會有沖突需要單獨記憶
**** 注：由于某些css屬性名和js的關鍵字沖突，某些屬性的訪問名字需要特殊記憶，如：
類名：input.className
for屬性：input.htmlFor
等.......

input.value = "輸入的內容" //就可以設置屬性
input["disabled"] = true //兩種訪問方式

####通過attribute讀寫
通過attribute讀寫不會存在屬性名和關鍵字沖突的問題，但是通過getAttribute操作得到的屬性都是字符串

input.getAttribute("attributeName")

| attributeName | value | type |
|:-------------------:|:-------:|:------:|
| class | "u-txt" | String |
| maxLength | "10" | String |
| disabled | "" | String |
| onclick | "showSuggest(); " | String |

var attribute = element.getAtrribute(String attributeName)
var attribute = element.setAttribute(String name, value)
//例如：
var attribute = input.getAttribute("class")
input.setAttribute("disabled", "") //只要disabled出現過，他就是disabled的，value無所謂，數字，布爾，字符串，都行

####通過dataset訪問
在屬性名前加data-符號即可，dataset一般是用來做自定義屬性的，如下圖

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/3770010-5fc3a846eca73ae9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

##樣式操作
####樣式訪問
css樣式表中的內容可以通過js進行動態的修改，其中，外部引入的文件以及被<style>標簽圍繞的樣式是通過element.sheet訪問的，而標簽內部的style屬性包圍的值對應的js是element.style。
例如

<style>
body{margin: 30}
p{color:#aaa; line-height: 20px;}
</style>

element.sheet.cssRules[1].style //{color: #aaa, line-height: 20px}, 類型是CSSStyleDeclaraiton的類
element.sheet.cssRules[1].selectorText //p
element.sheet.cssRules[1].style.lineHeight //line-height

內部樣式訪問中

element.style.lineHeight //element.style同樣是一個CSSStyleDeclaration

以上的訪問方式的缺陷在于，屬性名和css中的名字不完全一樣，使用上不是很方便，因此，

element.style.cssText = "border-color: red; color: #bbb"; //也是一種訪問方式，可以直接修改css內部的文本

好的編程習慣要求盡量不在代碼邏輯中修改css，因此如果要對元素的樣式進行修改，一般建議事先在css中寫好另外一種樣式，并在通過修改類的方法來修改樣式，如，

element.className += "another_class" //會自動覆蓋其他的樣式

而如果要對大量元素進行替換，如要修改整個頁面的樣式和風格，可以直接更改應用于本頁面的css文件，如

<link id = "skin" rel="stylesheet" href="css/skin1.css">

document.getElementById("skin").href = "css/skin2.css" //對整個頁面的css文件進行了替換

####樣式獲取
即如何獲取實際樣式，顯然element.style是不行的，因為如果元素沒有內前樣式的話，這種方式是不能獲取到實際樣式值，本標題指的是如何獲取實際樣式的值

var style = window.getComputedStyle(element [,pseudoElt]);
//返回的是一個CSSStyleDeclaration的類，但是是一個只讀屬性，不可以改，但獲取到的確實是一個元素的實際屬性，pseudoElt屬性一般不常用

##事件
事件有一個事件流的概念，控制的時間的發生順序，事件流分為3個階段

![事件流](http://upload-images.jianshu.io/upload_images/3770010-43f9b281c762a0a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

1.capture（捕獲階段）
2.target（目標階段）
3.upward（回溯階段）
具體見
([http://www.w3.org/TR/uievents/#dom-event-architecture](http://www.w3.org/TR/uievents/#dom-event-architecture) )
####事件的注冊

eventTarget.addEventListener(type, listener[, useCapture])
//第一個是事件類型，如點擊，hover等，第二個是監聽器，即事件觸發后要調用的函數，第三個參數可選，是一個布爾值，當為false時，回調函數在upward階段觸發，當為true時，回調函數在capture階段觸發，默認值為false。useCpature的直觀表現就是控制先觸發父元素的事件還是先觸發子元素的時間
//當事件為點擊事件的時候，也可以eventTarge.onclick = listener來注冊，但是如此注冊則只能有一個監聽器，不可以有多個。

####事件取消注冊

eventTarget.addEventListener(type, listener[, useCapture])

####事件觸發
1. 事件發生觸發
2. 代碼觸發

eventTarget.dispatchEvent(type)

####事件對象
事件對象指的是當一個時間被觸發的時候，listener有一個參數為event會被傳入，event中包含事件的一些相關信息，如點擊事件鼠標的坐標，鍵盤中shift是否被按下等信息，event被稱為事件對象。
*注意：在ie9以下的ie版本中，event不是被傳入的，而是保存在window.event中，因此需要如下代碼來做兼容*

event = event || window.event

事件對象有些屬性和方法
屬性：
- 繼承了UIEvent的所有屬性
- type //事件類型，如點擊事件等等

type = event.type

- targets（srcElement）//目標節點，即觸發事件的標簽 ,ie低版本中屬性名為srcElement，其他瀏覽器為targets
- currentTarget //當前事件位于哪個標簽

targets = event.targets || event.srcElement

方法：
- stopPropagation //阻止事件繼續傳播

event.stopPropagation()

- preventDefault //阻止默認事件，如點擊a標簽會默認進行頁面跳轉，如果要阻止默認事件，而僅僅是調用listener，則需要調用這個方法

event.preventDefault()

- stopImmediatePropagation //不僅阻止事件繼續傳播，也中斷了當前節點后續監聽器的觸發，即如果當前節點注冊了多個監聽器，則之后的監聽器也不再執行

event.stopImmediatePropagation()

####事件分類（type）
![事件分類](http://upload-images.jianshu.io/upload_images/3770010-6bcae3a62817b62a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
其中，WheelEvent繼承自鼠標事件，是滾輪事件。這些事件中最常用的就是鼠標事件

######事件
| 事件類型 | 觸發場景 | 是否冒泡 | 元素 | 默認事件 | 例子      | 
|:------------:|:------------:|:------------:|:------:|:------------:|:----------:|
| load | 當一個元素加載完成時，如window、image等 | NO | window\document\element | None | window\iframe\image
| unload | 當頁面退出時 | NO | window\document\element | None | window |
| error | 報錯，如設置了錯誤的url等| NO | window\document\element | None | window\image |
| select | 內部元素被選中時 | NO | element | None | input\textarea |
| abort | 加載被終止 |  NO | window\document\element | None | window\image |

######UI事件（UIEvent）
| 事件類型 | 觸發場景 | 是否冒泡 | 元素 | 默認事件 | 例子      | 
|:------------:|:------------:|:------------:|:------:|:------------:|:----------:|
| resize | 修改窗體大小時 | NO | window\element | None | window\iframe
| scroll | 頁面發生滾動 | 當元素scroll時YES，當瀏覽器滾動時NO | window\element | None | document\div |

######鼠標事件（MouseEvent）
鼠標事件類型：
click：鼠標點擊并松開后觸發
dbclick：雙擊后觸發
mousedown：鼠標鍵按下
mouseup：鼠標鍵松開
mousemove：鼠標移動
mouseenter：當鼠標進入某個元素A時，A會觸發該事件，但是當鼠標再次從A進入A的子元素時，不會再次出發
mouseleave：與enter對應，鼠標離開某個元素A時觸發，但是當鼠標進入A的子元素時，不會觸發，因為想到于此時鼠標仍然處于A的內部
mouseover：功能與mouseenter類似，但是會級聯觸發，即當一個元素觸發mouseover事件時，該元素的所有祖先元素也會觸發over。因此，當鼠標從A中移到A的子元素 或 從A的子元素移到A都會觸發mouseover
mouseout：與mouseleave類似，但是會級聯觸發，與mouseover相對應，即當一個元素觸發mouseout時，它的所有祖先元素都會觸發這個事件。

event.clientX, event.client.Y //鼠標距離瀏覽器最左、上端的距離
event.screenX, event.screenY//鼠標距離屏幕最左、上端的距離
event.ctrlKey, event.shiftKey, event.altKey, event.metaKey //鼠標事件觸發時是否同時有鍵盤上的一些按鍵被按下，類型為boolean。其中metaKey在Windows上代表“Win鍵”，在Mac上代表“command鍵”
event.button //值為0，1，2分別代表鼠標按下的左、中、右鍵，4，5代表瀏覽器的前進和后退鍵，即部分鼠標擁有的側面的按鍵

鼠標事件的觸發順序：
1.當鼠標從A元素上方經過
mousemove(A的某祖先元素) -> mouseover(A) -> mouseenter(A) -> mousemove(A) -> mouseout(A) -> mouseleave(A)
2.當鼠標在A中點擊
mousedown -> mouseup -> mouseclick

######焦點事件（FocuseEvent）
| 事件類型 | 是否冒泡 | 元素 | 默認事件 | 元素例子 | 何時觸發 |
|:------------:|:------------:|:------:|:------------:|:------------:|:------------:|
| blur | NO | Window\Element | None | window\input | 失去焦點時 |
| focus | NO | Window\Element | None | window\input | 獲得焦點時 | 
| focusin | YES | Window\Element | None | window\input | 即將獲得焦點時 |
| focusout | YES | Window\Element | None | window\input | 即將失去焦點時 |
*“冒泡”指的是是否會級聯觸發，即當一個元素觸發該事件時，其祖先元素會不會觸發該事件*
*后兩個主要就是在blur和focus被觸發前會率先觸發*

事件屬性：
- 繼承了UIEvent的所有屬性
- relatedTarget：當一個元素失去焦點時，會有另外一個獲得焦點，反之亦然。此時，獲得焦點和失去焦點的這兩個元素互為relatedTarget

######輸入事件（InputEvent）
事件類型
- beforeInput：指敲擊鍵盤后，輸入的內容還沒顯示出來時觸發的事件
- Input：指敲擊鍵盤后，輸入的內容已經顯示出來時觸發的事件

######鍵盤事件（KeyboardEvent）
事件類型
- keydown
- keyup
屬性
- 繼承的屬性
- key：按下什么鍵盤，String類型，按鍵類型，如：數字鍵，控制鍵等
- code：按鍵碼，String類型
- ctrlKey、altKey、metaKey、shiftKey：布爾型，這些鍵是否被按下
- repeat：某個鍵是否一直按著不放

####事件代理

<ul>
<li></li>
<li></li>
<li></li>
</ul>

例如上述代碼，如果所有的li都具有相同的事件和事件處理過程，我們逐個為標簽注冊監聽器，一個方便的方法是只為ul注冊監聽器而不管li，因為很多的事件都會冒泡，因此同樣的事件如果在li上觸發了，那么也會在ul上觸發。這個方法稱為事件代理
- 好處：減少代碼，方便修改 
- 壞處：當一個父元素有太多的監聽器要處理時，會使得代碼難以維護，如理論上所有會冒泡的事件都可以掛在window上，通過代理來觸發，但是這顯然不是一個好的決定

##數據通信
網頁的請求是先由瀏覽器發送一個請求到服務器（請求報文），然后服務器再返回內容給瀏覽器，然后瀏覽器將內容顯示出來。
####請求報文格式
1.頭行
- 請求方法
- 主體地址
- http版本

2.頭部
- Accept：http接受的媒體類型
- Accept-Encoding：媒體類型的編碼方式
- Accept-Language：瀏覽器端可以接受的語言
- Cache-Control：緩存策略
- Cookie：想服務器發送的cookie內容
- User-Agent：瀏覽器的名詞和版本


3.請求體
GET方法請求體為空

####響應報文格式
1.頭行
- HTTP版本
- 狀態碼
- 狀態碼描述

2.頭部
- Server：服務器端的服務器是哪種服務器

3.相應內容
請求獲得的內容主題

####請求方法
| 方法 | 描述 | 是否含有主體 |
|:-------:|:-------:|:-----------------:|
| get | 獲取一份文檔 | NO |
| post | 發送需要處理的數據 | YES |
| put | 將請求的主體部分存儲在服務器上 | YES |
| delete | 刪除一份文檔 | NO |
| TRACE | 對報文進行追蹤| NO |
| OPTIONS | 決定可以在服務器上執行哪些方法 | NO |
| HEAD | 只獲取文檔的頭部 | NO |

####URL構成
protocol://host/pathname ? search # hash

例如：
http://www.163.com:8080/index.html?r=admin#news

####HTTP版本
目前廣泛使用的是http 1.1版本

####HTTP狀態碼
| 狀態碼 | 狀態嗎描述 | 含義 |
|:---------:|:---------------:|:-----------:|
| 200 | OK | 一般用于響應GET和POST方法 | 
| 301 | Moved Permanently | 請求的資源已經轉移，瀏覽器會自動跳轉 |
| 304 | Not Modified | 所請求的數據未修改，瀏覽器讀取緩存 | 
| 400 | Bad Request | 請求語法錯誤，服務器無法理解 |
| 404 | Not Found | 資源未找到 | 
| 500 | Internal Server Error | 服務器內部錯誤 | 

####Ajax
通信流程
1. 創建一個XHR對象，包含3個關鍵屬性
 - readyState
 - status
 - responseText
剛創建時,readyState的值為1

var xhr = new XMLHttpRequest()

2. 調用open()方法，此時readyState變為2，調用時會定義請求的方法，請求的內容等等

xhr.open(method, url[ ,async = true]) //method是請求方法，如get、post等，url是請求地址，async表示開啟一個異步請求，默認為true
xhr.sendRequestHeader( header, value) //也可以不設置

3. 調用send()方法，此時readyState變為3， 開始像服務器發送請求

xhr.send([data = null]) // 發送一個請求
//當使用post方法時，請求參數就通過data傳入，如果是get方法，則請求字符串在open時url中設置

4. 服務器端返回數據，此時readyState變為4，status變為返回的狀態碼，如200，responsText變為請求得到的內容

> **同源策略**
> 如果兩個頁面具有相同的協議，主機，端口，那么兩個頁面則同源。同一個源內的網頁在訪問時url都是用的是相對地址

> **跨域資源的訪問**
> Frame代理，JSONP代理等
> Frame代理資料 [https://github.com/genify/nej/blob/master/doc/AJAX.md](https://github.com/genify/nej/blob/master/doc/AJAX.md)
> CORS：[http://www.w3.org/TR/cors/](http://www.w3.org/TR/cors/)

##數據存儲
####cookie
形式：鍵值對
屬性：

| 屬性名 | 默認值 | 作用域 | 
|:---------:|:---------:|:---------:|
| name | | 名 | 
| value | | 值 |
| Domain | 當前文檔域 | 作用域 |
| Path | 當前文檔路徑 | 作用路徑 |
| Expries/Max-age | 瀏覽器會話時間 | 失效時間 |
| Secure | false | http協議時生效 | 
作用域和作用路徑對應url中的域名和路徑名，例如：當域名為163.com時，則訪問163.com之下的所有域名都會攜帶此cookie，路徑名也相同，當路徑名為/learn時，則訪問該路徑以及其所有子路徑都會攜帶此cookie

cookie的設置和修改

document.cookie = 'name = value; secure = false';
//或者
function setCookie(name, value, domain, path, expires, secure){
var cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
if(expries)
cookie += '; expires = ' + expries.toGMTString();
if(path)
cookie += '; path = ' + path;
if(domain)
cookie += '; domain = ' + domain;
if(secure)
cookie += '; secure = ' + secure;
document.cookie = cookie;
}

cookie的刪除
- 指定cookie的max-age屬性設置為0即可

Cookie的缺陷
- 明文傳遞，缺乏安全性
- 不同的網頁跳轉時可能會攜帶cookie，會產生巨大的流量
- 大小限制，瀏覽器對cookie的大小都會有限制，一般為4kb左右，所以傳輸內容有限

由于以上缺陷，目前很多網頁使用Storage來替代cookie

####Storage
分為localStorage和SessionStorage兩種。

######localstorage
作用域由協議，主機名，端口三個參數來確定。同一個瀏覽器內多個窗口可以共享
######sessionStorage
作用域由協議，主機名，端口，窗口來確定，也就是說sessionStorage的作用域由一個窗口獨享而不能延伸到同一個瀏覽器的其他窗口

大小一般為5MB左右，由于要在內存中存放，一般不建議開放過大

######JS接口
讀取：localStorage.name
添加修改：localStorage.name = "aaa"
刪除：delete localStorage.name
localStorage.length //鍵值對的數量
localStorage.getItem("name"), localStorage.key(i) //name是鍵值，i是索引，區間是0~length-1
localStorage.setItem("name", "aaa")
localStorage.removeItem("name")
localStorage.clear() //清空所有內容


##JS動畫
JS動畫三要素
- 對象：dom對象，即“誰在動”
- 屬性：即dom對象的屬性，如寬高、背景顏色、透明度等等
- 定時器：如setInterval、setTimeout、requestAnimationFrame等，可以利用定時器不斷的改變對象的屬性，從而實現動畫的效果


1. setInterval

var intervalID = setInterval(func, delay[, para1, para2, ...])//設置動畫
//func參數是一個函數，delay規定func執行的時間間隔，后面的參數是傳遞給func函數的參數
clearInterval(intervalID)//清除動畫

2. setTimeout

var timeoutID = setTimeout(func[, delay, para1, para2, ...])
//setTimeout函數只執行一次，delay表示從何時開始執行，默認立即執行

3. requestAnimationFrame

var requestID = requestAnimationFrame(func) //不用設置間隔時間
cancelAnimationFrame(requestID) //清除動畫
//這個函數沒有間隔時間這個選項，由瀏覽器自己控制時間，間隔和顯示器的刷新一幀的時間相等，顯示器每刷新一次，func執行一次，這樣的動畫效果一般會更加流暢

##音頻與視頻

![視頻音頻、圖形](http://upload-images.jianshu.io/upload_images/3770010-a44f6428be5e730d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
video和audio標簽非常像，但是由于video一般用于視頻，所以需要指定寬高，而audio不需要，除此之外，兩個標簽的屬性基本上都一樣

<audio>
<source src="music.mp3" type="audio/mpeg">
<source src="music.wav" type="audio/x-wav">
<source src="music.ogg" type="audio/ogg">
</audio>

<video>
<source src="movie.mp4" type="video/mp4; codecs='avc1.42E01E, mp4.a.40.2'">
<source src="movie.webm" type="video/webm; codecs='vp8, vorbis'">
</video>

var a = new Audio();
a.canPlayType('audio/nav')//可以用來檢測瀏覽器是否支持這種audio格式，如果不支持，則返回空串，否則返回“probaly或者maybe”

####<video>和<audio>的屬性

| 屬性名 | 是否必須 | 默認值 | 音頻文件的URL |
|:---------:|:------------:|:-----------:|:-------------------:|
| src | 是 | | 音頻文件的URL |
| controls | 否 | false | 是否向用戶顯示控件 |
| autoplay | 否 | false | 是否自動播放 |
| preload | 否 | none | 可取值為none, metadata, auto。none是不預加載，metadata是只加載源信息，不加載資源，auto是自動加載資源。音頻在頁面加載時預加載，并準備播放，如果設置了autoplay，則忽略此屬性 |
| loop | 否 | false | 音頻結束時是否循環播放 | 

####視頻音頻的JS接口
load() //加載資源
play() //開始播放
pause() //暫停
muted //是否靜音
volume //音量，0——1之間的浮點數
playbackRate //播放速度，恒正，正常速度為1
currentTime //當前時間，單位為s
**前三個為方法，后面4個位屬性，以上屬性都是可以修改值的**

paused //文件是否暫停
seeking //是否正在發生跳轉
ended //是否播放完成
duration //媒體總時長
initialTime //默認起始播放時間
**以上屬性都是只讀屬性**

loadstart //開始請求媒體內容
loadmetadata //已經加載完成了源信息
canplay //已經加載了一些內容，可以開始播放了
play //調用了play()方法，或者設置了自動播放并已加載完資源
waiting //緩沖數據不夠，播放暫停
playing //正在播放
**以上都是可以監聽的事件，一共有12個事件可以監聽，以上只是一部分**

####canvas

<canvas id="aCanvas" width="300px" height="150px"></canvas>

var canvas = document.getElementById("aCanvas")
var ctx = canvas.getContent('2d') //獲取一個渲染上下文的對象
ctx.globalCompositeOperation = “source-in”
//globalCompositeOperation的的屬性值是一個字符串，可選值見下圖，表示畫布上的多個內容被繪制時的顯示內容。下圖中，藍色正方形先畫，紅色的圓形后話，不同的屬性值分別可以確實他們的交疊次序，顯示互相的交集補集等

![組合操作](http://upload-images.jianshu.io/upload_images/3770010-d314fb7fa2d835c9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

##BOM（Browser Object Model）
廣義上來講，JS包含三個部分：
ECMAScript：即狹義的JS，也就是JS的語法等內容
DOM（Document Object Model）：已經學習過，是前端JS進行文檔內容操作的接口，頂層對象為window.document
BOM：BOM包含DOM以及history, location, navigator等一些屬性和方法，BOM的頂層對象是window

*分了三個部分，是因為，雖然從所屬關系來講，document屬于window，但是W3C對于document的一系列內容都是有標準規定的，而window由于是瀏覽器相關，并沒有統一的標準，所以由瀏覽器廠商自行決定其接口等內容*

![BOM和DOM的包含關系](http://upload-images.jianshu.io/upload_images/3770010-2f3ae0034edc4f5f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

| 屬性名 | 描述 | 
|:---------:|:---------:|
| navigator | 瀏覽器信息，包含瀏覽器版本，內核版本，瀏覽器運行平臺等諸多信息 |
| location | 瀏覽器定位和導航，包括端口，協議，主機地址，路徑等諸多地址 |
| history | 窗口瀏覽器歷史，僅記錄本窗口中的瀏覽歷史|
| screen | 屏幕信息,包括屏幕寬高、色域等 |

####location的方法

location.replace(url) //跳轉到另一個網頁，不記錄瀏覽歷史
location.assign(url) //跳轉到另一個網頁，記錄瀏覽歷史
location.reload(url) //重載本頁面

####history

history.go( Number length) //有一個參數，可正可負，代表將網頁前進或者后退幾步
history.back() //網頁后退一步，沒有參數，等同于history.go(-1)
history.forward() //網頁前進一步，沒有參數，等同于history.go(1)

####window下的一些方法
| 方法名 | 描述 |
|:---------:|:-------:|
| alert(), comfirm(), prompt() | 三種對話框 |
| setInterval(), setTimeout() | 計時器 |
| open(), close() | 打開新窗口，關閉窗口 |
window.open(url, name, String attr) //url是新窗口的地址，name是給新窗口起一個名字，attr是一個字符串，是新建窗口的一些屬性，如寬高等

####window下的一些事件
| 事件 | 描述 |
|:-------:|:---------:|
| load | 文檔和所有資源加載完畢時觸發 |
| unload | 離開文檔前 | 
| beforeunload | 和unload類似，但它提供詢問用戶是否離開的機會 |
| resize | 拖動改變瀏覽器大小時 |
| scroll | 拖動滾動瀏覽器時 | 

##表單操作

<form method=“post” action="url" enctype="xxxxx">
<fieldset>
<legend>標題</legend>
<p><label></label><input></p>
<input required>
</fieldset>
</form>

![fieldset](http://upload-images.jianshu.io/upload_images/3770010-9897b108ecd2d43d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

表單中的數據需要傳送到服務器以便處理，每一個表單中的數據都是name：value鍵值對，所以每個被提交的數據都應該有name和value，當然，默認輸入框中的內容也就是input標簽的value值

form標簽是表單的核心，它的可以設置的屬性有
name，target，method，autocomplete，accept-charset，action，enctype，novalidate等

####name
var form1 = document.forms.name
即只要寫出name就可以直接獲取到表單

####autocomplete
值為一個字符串，可以是“on”或者“off”，若是on的話，輸入框被點擊時被給一些輸入提示，提示源有可能是之前的填寫歷史等

####elements
form標簽外的元素如果申明的form屬性，則這個標簽雖然在空間上獨立于form之外，但是在功能上卻隸屬于form。
form的elements包含的內容就包括form的子元素或者form外部隸屬于form的元素（除了所有的圖片元素），即<input type="image"/>標簽不會被囊括在elements中

<form name = “ff” id="f">
<p><label><input name="a"/></label></p>
</form>
<p name="b" form="f"><label><input/></label></p>

var form1 = document.forms.ff
ff[name]
ff[index]
ff.elements[name]
ff.elements[index]
//以上4個方法都可以訪問表單元素的內容

####form[name]

ff['a'] //注意！！此處可以返回id或者name為a的元素，而如果取到的內容為空，則返回name或者id為a的img元素，即優先返回非img元素
//如果有多個同名的元素，則返回的是一個動態集合
//一旦用form[name]取過某個標簽，即使這個標簽改名了，依然可以用原名字來取，而form.elements[name]卻必須使用新的名字來取

####form.reset()
可以被reset的控件有keygen，input，output，select，textarea
reset的時候會觸發reset事件，但不會觸發change和input事件
如<input type="file">如果選擇了錯誤文件想重新選擇，可以使用reset方法來重置，對于一般的input標簽，input.value=''和reset方法基本結果一致，但是type為file的input標簽不可以通過操作value來重置

####htmlFor

<form>
<input type="file" id="file1" hidden>
</form>
<label for="file1"></label>

當然，for標簽關聯的必須是可關聯元素，可關聯元素有button, fieldset, input, keygen, label, object, output, select, textarea

####input type=“file”
當選擇為文件時，屬性可以有
accept：可以接受的文件類型，類型指定方式
- audio/\*，video/\*，image/\*
- 指定以點號開頭的后綴名，如.mp3
- 使用MIME-type
- 多中類型的話需要都好分割
例如<input type="audio/*, .mp3">

multiple：可以選擇多個文件

####select

<select>
<option></option>
<optgroup>
<option></option>
<option></option>
</optgroup>
</select>

######select屬性
name：選項名稱
value：選項的值
multiple：控制是否可以多選
options：所有選項的集合，動態集合
selectedOptions：所有選中的選項集合，動態集合
selectedIndex：第一個選中的選項的索引，沒有則返回-1
add（element[, before]）：添加一個選項
remove([index])：刪除某個選項

######optgroup屬性
disabled：表示這個組中的所有選項不可選
label：表示這個組為必選項

######option屬性
disabled和label，同optgroup
value：option的值
text：顯示的文本
index：option的索引
selected：已經被選中
defaultSelected：默認選中

######創建選項
documen.createElement("option")
new Option([text[, value[, defaultSelected[, selected]]]])

######添加選項
selectNode.add(toAdded, reference) //selectNode是select節點類
select.insertBefore(toAdded, reference) //select.insertBefore是一個接口，select不是節點類

######刪除選項
selectNode.removeChildI(optionNode)
select.remove(index)

####表單驗證
可驗證的表單有button, select, textarea, input
以下情況這些元素也不會驗證
- input的標簽的類型設置為了reset, button或者hidden
- button標簽的類型設置為了reset和button
- input和textarea標簽的屬性設置了readonly
- 作為datalist的子孫節點
- disabled

######驗證涉及到的接口element.
- willValidata：表示這個元素是否會在提交時被驗證，布爾型
- checkValidity()：驗證一個元素，通過驗證返回true，否則觸發invalid事件
- validity：存儲驗證的結果
- validationMessage：用于顯示驗證異常的信息
- setCustomValidity(message)：用來自定義驗證異常的信息

######隱式提交
即不通過點擊提交按鈕，而是通過回車鍵提交，隱式提交的情況有兩種
- 表單中有非禁用的提交按鈕
- 表單中沒有提交按鈕，但是表單中不超過一個類型為text, search, url, email, password, data, time, number的input元素

######提交過程
1. 瀏覽器根據enctype構建指定的數據結構
2. 從form中找出要提交的數據
3. 將數據按照指定數據結構組織并提交

######編碼方式enctype
可選值為
application/x-www-form-urlencoded //默認，url方式，形式如：name=value&name2=value2
multipart/form-data //形式如：字符流，文件一般用這種編碼方式
text/plain //形式如：name=value name2=value。中間使用回車符分割，一般用于給人閱讀

######無刷新表單提交

<iframe name="iframe1">

</iframe>
<form target="iframe1">

</form>

iframe標簽用來在其中嵌套另外一個穩定，實現局部的更新，當form的目標指向一個iframe，當表單被提交后，服務器返回的數據會自動返回給iframe，這樣在表單提交后就可以不用刷新本頁面而實現內容的填充