querySelector 選擇首次遇到的
querySelectorAll 選擇所有
classList : add remove toggle

var div = document.getElementById('div1')
console.log(typeof div.classList); //object
// alert(div.classList)  //box1 box2 box3
div.classList.add('box4')
div.classList.remove('box2')
div.classList.toggle('box4') // 有則刪，無則加

---

eval(): 可以解析任何字符串變成js

parse: 只能解析JSON形式的字符串變成JS 安全性高些

字符串[json形式]轉 -- > JS ; JSON.parse(str)

json轉--> 字符串 ；JSON.stringify(json)

//str是一個fun
var str = 'function show(){ alert(123) }'
eval(str);     //字符串轉成原生js
show()     //之後即可調用*/

//str是一個json
var str = '{"name":"elmok"}'   //'{name:"elmok"}' 這咱不行，一定要加引號
var json = JSON.parse(str)   // json =  {"name":"hello"}
console.log(json.name);      //hello

//json變字符串
var json = {name:"hello"}    //json變成字符串 會自動加上雙引號
var str = JSON.stringify(json)
console.log(str);

問題：克隆一個json a{}，並且改變不影響原json
先把a{}轉為字符串'a{}'，存在str = 'a{}'裏，再把str轉為json,存在新建變量b = {}，則改變b不影響a

var a = {name: 'hello'}
var str = JSON.stringify(a)
var b = JSON.parse(str)
b.name = 'hi'
console.log(a.name);

兼容 https://github.com/douglascrockford/JSON-js

---

自定義屬性，想要取得某個值，可使用dataset對象

<div id="div1" data-mm="BB" data-mm-bb="BBBB">div</div>

    var div = document.getElementById('div1')
    alert(div.dataset.mm)
    alert(div.dataset.mmBb) //多個駝峰寫法

---

延遲加載JS
defer : 延迟加载，会按顺序执行，在onload执行前被触发
async : 异步加载，加载完就触发，有顺序问题

<script src="a.js" defer="defer"></script> <!--onload執行之前執行-->
<script src="a.js" async="async"></script> <!--圖片與js同時加載-->

---

元素拖動<>

首先，被拖動元素自身定義：draggable="true"

draggable ：

设置为true，元素就可以拖拽了

拖拽元素事件 : 事件对象为被拖拽元素

dragstart , 拖拽前触发
drag ,拖拽前、拖拽结束之间，连续触发
dragend , 拖拽结束触发

目标元素事件 : 事件对象为目标元素

dragenter , 进入目标元素触发，相当于mouseover
dragover ,进入目标、离开目标之间，连续触发
dragleave , 离开目标元素触发，相当于mouseout
drop , 在目标元素上释放鼠标触发

See the Pen JYYKeV by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

FF下必須設置dataTransfer对象才可能拖動（圖片以外）的元素

setData() : 设置数据 key和value(必须是字符串)
getData() : 获取数据，根据key值，获取对应的value
ev.dataTransfer.effectAllowed 設置光標樣式：copy link uninitialized..
ev.dataTransfer.setDragImage(img, 0, 0) 拖動的東西變為指定的對像，如一張圖片，0,0表示對象的座標XY

See the Pen bVVeyR by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

li[i].ondragstart = function (ev) { //g開始
  var ev = ev || event
  //   ev.dataTransfer.setData('name','hello') //ff bug
  ev.dataTransfer.setData('name', 'hello')
  ev.dataTransfer.effectAllowed = 'copy'; //光標樣式
  ev.dataTransfer.effectAllowed = 'link'; //光標樣式
  ev.dataTransfer.effectAllowed = 'uninitialized'; //光標樣式
  ev.dataTransfer.setDragImage(img, 0, 0) //拖的東西指定為div，即使變為div
}

小實例1：文件拖放上傳

See the Pen ojjYqE by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
小實例2：拖放購物車

See the Pen jbbVYO by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

header用在页面头部
nav导航
footer页面底部
hgroup标题给合
section版块，区块
article结构完整独立内容部分，可以呈现一个帖子或文章等
aside和主体相关的附属信息，一般用于与article相关的或侧边
address定义作者信息，联系方式
time定義時間
帶功能性：
datalist表示input里可能出现的值，即提示列表，input list = 'valList' --> datalist id= 'valList' 相對應

<input type="text" list="valList"/>
<datalist id="valList">
<!--表示input里可能出现的值，即提示列表 -->
    <option value="javascript">javascript</option>
    <option value="html5">html5</option>
    <option value="css3">css3</option>
</datalist>

<input type="text" list="valList" class='input-def'/>
<datalist id="valList">

<option value="javascript">javascript</option>
<option value="html5">html5</option>
<option value="css3">css3</option>

</datalist>
details用于描述文档或文档某个部分的细节；，该元素用于摘录引用等，应该与页面主要内容分开

下箭頭說明： open表示打開狀態
<details open>
    <summary>details元素的標題</summary>
    <p>details元素的內容</p>
</details>

<details>

<summary>details元素的標題</summary>
<span>details元素的內容</span>

</details>
dialog類似於對話

<dialog>
    <dt>what</dt>
    <dd>what毛</dd>
    <dt>how are your</dt>
    <dd>how 毛</dd>
</dialog>

<dialog>

<dt>what:</dt>
<dd>what毛</dd>
<dt>how are your</dt>
<dd>how 毛</dd>

</dialog>
mark标记，加默认黄色背景
<mark>

标记，加默认黄色背景

</mark>

<form action="http://baidu.com" method="get">
    用户：<input type="text" name = 'username'/>
    公钥：
    <keygen name="security" />
    <input type="submit" value=""/>
</form>

keygen name="security"公钥
<form action="http://baidu.com"; method="get">

用户：<input type="text" name = 'username'/>
公钥：
<keygen name="security" />
<input type="submit" value=""/>

</form>
progress進度條

<progress max="100" value="70">
    <span>80</span>%  <!--向下兼容-->
</progress>

<progress max="100" value="70">

<span>80</span>%  <!--向下兼容-->

</progress>

---

Input表單 type = ??

email 只允許輸入email類型

tel 移動端切換數字健盤

url 只允許輸入url類型

search input 刪除輸入按鈕

range

<input type="range" step="2" min="0" max="100" value="80"/>

<input type="range" name="" id="" step="2" min="0" max="100" value="80"/>

以下兼容性問題較大

color
datetime
datetime-local
time
date
week
month

---

新增屬性

placeholder placeholder = '請輸入四-六個字'

autocomplete autocomplete = 'off' 關閉自動提示

autofocus 打開顯示焦點

required 必須輸入內容

<input type="text" autofocus/>  與 input.focus();效果一致
<input type="text" required/>

pattern 正則驗證，有安全問題
formaction 臨時提交
formnovalidate 關閉驗證

<form action="http://badiu.com" >  <!--正常提交至baidu.com-->
    <input type="password" name="" id=""/>
    <input type="text" pattern="\d{1,5}"/> <!-- 正則 有安全隱患 -->
    <input type="submit" value="提交" />

    <input type="submit" value="臨時保存提交" formaction="http://163.com" formnovalidate/>  
    <!--臨時提交至163.com,所以需關閉驗證-->
</form>

---

兼容h5标签，在头部插入：

<script>
    document.createElement('elmok')
    document.createElement('header')
    document.createElement('article')
    document.createElement('aside')
    document.createElement('section')
    document.createElement('footer')
</script>

elmok,header.....{ display:block; }

當然，也可使用google小插件：http://html5shiv.googlecode.com/svn/trunk/html5.js

---

驗證表單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的验证反馈</title>
</head>
<body>
    <form>
        <input type="text" required id="text" pattern="\d{1,5}" maxlength="5">
        <input type="submit">
    </form>
    <script>
        var txt = document.getElementById('text');
        txt.addEventListener('invalid', fn, false);
        function fn(){
            // alert(this.validity);
            // alert('若輸入無效，即受input內限制條件，返回false： '+this.validity.valid)
            // alert(this.validity.valueMissing);
            // alert(this.validity.typeMismatch);
            // alert(this.validity.patternMismatch);
            // alert(this.validity.tooLong);
            ev.preventDefault();
        }

        觸發驗證條件時返回true,當下面所有都返回false時[即不觸發驗證條件通過]，valid返回true
       
         //valueMissing: 当输入值为空时，返回true
        //typeMismatch: 当输入类型和要求的类型不一致时，返回true
        //patternMismatch: 当输入内容和预期的正则是不匹配时，返回true
        //tooLong: 当输入内容的长度超出了maxlength的限制，返回true
    </script>
</body>
</html>

完整自定義驗證1：

<form action="">
    <input type="txt" id="text"/>
    <input type="submit" value="sub"/>
</form>
<script>
    var text = document.getElementById('txt')
    txt.oninput = function () {
        if(this.value == "講粗口"){
            this.setCustomValidity('請唔好講粗口!')
        }
        else{
            this.setCustomValidity('')   //非常重要！取消自定义
        }
    }
</script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>自定义错误信息示例</title>
    <script type="text/javascript">
        var check = function() {
            var passwd1 = document.forms['testForm'].passwd1;
            var passwd2 = document.forms['testForm'].passwd2;
            if(passwd1.value != passwd2.value) {
                passwd2.setCustomValidity("密码不一致！");
                return false;
            } else {
                passwd2.setCustomValidity("");
            }
            var email = document.forms['testForm'].email1;
            if(!email1.checkValidity()) {
                email1.setCustomValidity("请输入正确的E-mail地址！");
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
<form id="testForm" name="testForm" onsubmit="return check();">
    <label for="pass1">密码:</label><input type="password" name="passwd1"/><br/>
    <label for="pass2">确认密码:</label><input type="password" name="passwd2"/><br/>
    <label for="email">E-mail:</label><input type="email" name="email1"/><br/>
    <button type="submit">提交</button>
</form>
</body>
</html>

---

明确一点：正常提交条件：

patternMismatch

valueMissing

rangeOverflow

rangeUnderflow

stepMismatch

tooLoog

typeMismatch

以上属性接口全部为false时，valid才返回true,表明可正常提交

只有当validity接口下的属性（customError除外）都为false并且validationMessage为空时才算验证通过。

查看属接口：console.dir(document.querySelector('input'))

See the Pen wKKMQx by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

从上面的截图可以看到validationMessage没清空，valueMissing、patternMismatch都已经验证通了。

document.getElementById('t2').querySelector('input').setCustomValidity('請輸入4位數字代碼')

//单纯这样写，即使写对条件，因为提示内容validationMessage未清空，也会导致验证不过; 
只有当validity接口下的属性（customError除外）都为false并且validationMessage为空时才算验证通过。

优化后：

<!DOCTYPE html>
<html>
<head>
    <mata charset="utf-8">
    <title>form test</title>
</head>

<body>
    <form name="test" action="." method="post">
        <input type="text" required pattern="^\d{4}$" oninput="out(this)" placeholder="请输入代码" >
        <button type="submit">Check</button>
    </form>
<script type="text/javascript">
function out(i){
    var v = i.validity;
    if(true === v.valueMessing){
        i.setCustomValidity("请填写些字段");
    }else{
        if(true === v.patternMismatch){
            i.setCustomValidity("请输入4位数字的代码");
        }else{
            i.setCustomValidity("");
        }
    }
}
</script>
</body>
</html>

感谢参考来源：http://tid.tenpay.com/?p=3592