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包含的是包含标签在内的所有内容，直接将其内容赋值为空串也可以起到删除的作用
##属性操作
dom对象实际上是一个{}括起来的字典，所有的属性都可以通过[]和点号来访问。所有用属性访问器访问到的属性都是一个经过转换的实用对象。如下图：获取到的字符串会被转换为String类型，数字会被转换为Number类型，函数会被封装到另一个函数中。
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一般是用来做自定义属性的，如下图
##样式操作
####样式访问
css样式表中的内容可以通过js进行动态的修改，其中，外部引入的文件以及被
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文件，如
document.getElementById("skin").href = "css/skin2.css" //对整个页面的css文件进行了替换
####样式获取
即如何获取实际样式，显然element.style是不行的，因为如果元素没有内前样式的话，这种方式是不能获取到实际样式值，本标题指的是如何获取实际样式的值
var style = window.getComputedStyle(element [,pseudoElt]);
//返回的是一个CSSStyleDeclaration的类，但是是一个只读属性，不可以改，但获取到的确实是一个元素的实际属性，pseudoElt属性一般不常用
##事件
事件有一个事件流的概念，控制的时间的发生顺序，事件流分为3个阶段
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）
其中，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：某个键是否一直按着不放
####事件代理
例如上述代码，如果所有的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执行一次，这样的动画效果一般会更加流畅
##音频与视频
video和audio标签非常像，但是由于video一般用于视频，所以需要指定宽高，而audio不需要，除此之外，两个标签的属性基本上都一样
var a = new Audio();
a.canPlayType('audio/nav')//可以用来检测浏览器是否支持这种audio格式，如果不支持，则返回空串，否则返回“probaly或者maybe”
####
var canvas = document.getElementById("aCanvas")
var ctx = canvas.getContent('2d') //获取一个渲染上下文的对象
ctx.globalCompositeOperation = “source-in”
//globalCompositeOperation的的属性值是一个字符串，可选值见下图，表示画布上的多个内容被绘制时的显示内容。下图中，蓝色正方形先画，红色的圆形后话，不同的属性值分别可以确实他们的交叠次序，显示互相的交集补集等
##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由于是浏览器相关，并没有统一的标准，所以由浏览器厂商自行决定其接口等内容*
| 属性名 | 描述 |
|:---------:|:---------:|
| 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 | 拖动滚动浏览器时 |
##表单操作
表单中的数据需要传送到服务器以便处理，每一个表单中的数据都是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的元素（除了所有的图片元素），即标签不会被囊括在elements中
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事件
如如果选择了错误文件想重新选择，可以使用reset方法来重置，对于一般的input标签，input.value=''和reset方法基本结果一致，但是type为file的input标签不可以通过操作value来重置
####htmlFor
当然，for标签关联的必须是可关联元素，可关联元素有button, fieldset, input, keygen, label, object, output, select, textarea
####input type=“file”
当选择为文件时，属性可以有
accept：可以接受的文件类型，类型指定方式
- audio/\*，video/\*，image/\*
- 指定以点号开头的后缀名，如.mp3
- 使用MIME-type
- 多中类型的话需要都好分割
例如
multiple：可以选择多个文件
####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标签用来在其中嵌套另外一个稳定，实现局部的更新，当form的目标指向一个iframe，当表单被提交后，服务器返回的数据会自动返回给iframe，这样在表单提交后就可以不用刷新本页面而实现内容的填充