文档树 DOM：Document Object Model

即：用对象的情势示意HTML、CSS。

DOM包含：

• DOM Core
• DOM HTML
• DOM Style
• DOM Event

1.节点遍历：ヾ(o◕∀◕)ﾉ

node.parentNode
    .childNodes //取得node的悉数子节点，包含各种范例
    .firstChild
    .lastChild
    .previousSibling
    .nextSibling //下一个兄弟节点

2.元素范例节点遍历：

p.parentElement  //父元素节点
 .children //返回指定节点的一切element子节点的活HTMLCollection，能够children[0].nodeName猎取
 .firstElementChild
 .lastElementChild
 .previousElementSibling
 .nextElementSibling

节点操纵

1.猎取节点

getElementById

//返回live（及时变化）的动态鸠合
getElementsByClassName("classA")
//猎取同时有两个类名的元素节点
getElementsByClassName("classA classB") 

//返回live（及时变化）的动态鸠合
getElementsByTagName()

//特别注重：querySelectorAll是non-live(非及时变化)的。 ヾ(o◕∀◕)ﾉ
querySelector("#users") 猎取第一个相符前提的元素
querySelector("input[type='text']") 能够依据属性举行挑选，很轻易
querySelectorAll(".user") 猎取一切婚配的元素
querySelectorAll("#users .user")

注重：以上挑选器（getElementById除外），除了能够在全部文档中寻觅，比方： document.getElementsByClassName('className')，还能够在某个节点下寻觅，比方：element.getElementsByClassName('className') 。

2.增添节点

建立节点 ヾ(o◕∀◕)ﾉ

//建立指定标签称号的节点
element = document.createElement(tagName)
var li = document.createElement("li");
var a = document.createElement("a");

设置节点内容

//猎取节点及其子女节点的文本内容或为节点增加内容
element.textContent
element.innerText
element.textContent = "newValue";
element.innerText = "newValue";

插进去节点到文档中 ヾ(o◕∀◕)ﾉ

//插进去节点
//appendChild会增加到parentElement完毕标签之前，也就是变成parentElement元素的末了一个子元素
parentElement.appendChild(childElement); 
//insertBefore会增加newElement到parentElement下referenceElement元素前面
parentElement.insertBefore(newElement, referenceElement)

3.挪动&克隆节点 ヾ(o◕∀◕)ﾉ

假如想把一个节点从本来的位置挪动到指定位置。那末只须要：

const myElementClone = document.getElementById("myElement");
document.getElementById("new-position").appendChild(myElementClone);

但假如不想挪动本来节点的位置，而是想克隆一个新的节点出来，那末须要用到cloneNode(true)

const myElementClone = document.getElementById("myElement").cloneNode(true);
document.getElementById("new-position").appendChild(myElementClone);

4.删除节点 ヾ(o◕∀◕)ﾉ

parentElement.removeChild(child);
平常不必特地猎取parentElement，直接写child.parentNode即可

5.可同时用于增加节点，设置节点内容，插进去节点，删除节点

 //猎取节点内部的一切HTML构造代码，或为节点增加内部的html代码
element.innerHTML
element.innerHTML = "<a href="#">hahaha</a>"
//能够有内存走漏和平安题目，因而仅发起用于新建节点，并只管不必于用户填的内容

属性操纵

1.HTML attribute -> DOM property

input元素

• id – id
• type – type
• class – className

label元素

• for – htmlFor

2.property accessor 属性接见器

两种接见体式格局：

1. input.className;
2. input["id"] = 'cute'

属性接见器的通用性和拓展性不好。

3.getAttribute/setAttribute

1. element.getAttribute(attritubeName)

eg: input.getAttribute("class");

1. element.setAttribute(name, value)

eg: input.setAttribute("id", "unique") //会将id设置为unique
惯例：disabled属性
//以下三种都会将disabled设置为见效
input.setAttribute("disabled", true)
input.setAttribute("disabled", "")
input.setAttribute("disabled", false)
由于setAttribute只是字符串的操纵，所以想要移除disabled属性只能input.removeAttribute("disabled");

瑕玷：仅仅是字符串的操纵。
长处：通用性好，直接把HTML属性名传进去就好了。

4.自定义属性: dataset

HTMLElement.dataset：dataset是HTML元素上的一个属性，是data-*属性的一个鸠合，重要的用途是在元素上保留数据。平常用来做自定义的数据属性。

<div id="users" data-id="123456" data-account-name="darcy">Darcy
</div>
<p id="info"></p>

div.dataset.

• id： 123456
• accountName： darcy

//在JS中能够如许猎取：
var data = div.dataset;
//然后如许用
var dataId = data.id;
document.getElementById("info").innerText = data.accountName;

5.修正class列表: classList

element.classList.add("classA"); // 为元素增加一个class
element.classList.remove("classA"); // 删除元素上名为classA的类
element.classList.toggle("classA");

款式操纵（经由历程JS动态修正款式）

style, style.cssText, class, styleSheet, window.getComputedStyle

1. element.style.cssProperty

<div id="users" style="color:red;">
Darcy
</div>

var div = document.getElementById("users");
console.log(div.style.color); // red

2.更新款式

element.style.cssProperty

element.style.borderColor = "red";
element.style.color = "red";

瑕玷：更新每一个属性都须要零丁的一条语句。

革新：用element.style.cssText = "border-colot: red; color: red;"

瑕玷：款式混在逻辑中。

再次革新：更新class（引荐要领）

.invalid {
  border-color: red;
  color: red;
}

element.className += " invalid"

存在的题目：一次更新许多元素的款式时会很贫苦。

革新（一次更新许多元素的款式）：替换款式表

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

//js
document.getElementById("skin").href = "skin.summer.css";

3.猎取款式

element.style.cssProperty

只能猎取到写在HTML元素上的款式，若写在<style>标签中，或外联的css文件中就没法猎取到了。

window.getComputedStyle("element")（引荐 ヾ(o◕∀◕)ﾉ）

//html
<div id="users">Darcy</div>
//css
#users{ color: blue; }
//js
var color = window.getComputedStyle("element").color;
color;// rgb(0, 0, 255);

事宜

1.事宜流

DOM事宜流就是DOM事宜处置惩罚实行的历程。分为三个历程：

• capture phase （捕获历程：从DOM树最顶端也就是window元素往下捕获，直到触发事宜的元素的父元素为止）
• target phase（事宜触发历程：在触发事宜的节点上举行）
• bubble phase（冒泡历程：从触发事宜的节点的父节点最先，冒泡到顶层的window对象）

点击<a>标签：

如何捕获一个事宜，我们讲DOM事宜终究是为了编程，那末如何去捕获一个事宜，如何去处置惩罚一个事宜呢？

2.事宜注册

事宜注册，作废与触发的主体都是事宜对象的DOM元素。

1.事宜注册

eventTarget.addEventListener(type, listener[, useCapture])
type： 事宜范例
listener：事宜处置惩罚函数
useCapture：是不是在捕获阶段触发。默许是false，DOM事宜处置惩罚的是冒泡历程，只要设置这个值为true，才会处置惩罚捕获历程。

var elem = document.getElementById("div1");
//定义一个事宜处置惩罚函数，即当事宜被触发时愿望做的事变
var clickHandler = functin(event){
  //TODO
}
//注册事宜
elem.addEventListener('click', clickHandler, false);

2.作废事宜注册

eventTarget.removeEventListener(type, listener[, useCapture]);

3.事宜触发

• 点击元素
• 按下按键
• 用代码触发： eventTarget.dispatchEvent(type);
• eg.用代码触发一个click事宜： elem.dispatchEvent('click')

4.事宜对象

当事宜被触发时，会挪用事宜处置惩罚函数，在挪用的时刻会传入一些信息，这些信息代表了当前事宜的一些状况，这就是事宜对象。挪用事宜处置惩罚函数的时刻，引擎会传入一个对象给我们，就是事宜对象。我们在编程的时刻，会用到这个事宜对象的一些属性和要领。

var elem = document.getElementById("div1");
var clickHandler = functin(event){ //这个event就是事宜对象
  //TODO
}
elem.addEventListener('click', clickHandler, false);

第二行的event就是事宜对象。当我们用鼠标点击的时刻，这个event对象能够包含了鼠标的位置，x，y坐标等等。

– 事宜对象的属性：

• type，事宜范例，比方click
• target，事宜触发的节点，比方点击一个<a>元素，target就是<a>元素
• currentTarget，是我们当前处置惩罚事宜节点的元素。适用于如许一种状况：当我们须要注册一个click事宜的时刻，我们不一定须要将事宜注册在target上，也能够注册在target的父节点上。由于当事宜冒泡到target的父节点的时刻，依然能够处置惩罚这个事宜。所以，假如我们把事宜注册在target的父节点上，依然点击target元素，event.target任然是target元素，那末currentTarget就是它的父节点这个元素。只要当事宜处于目的阶段（target phase）被触发的时刻，currentTarget才与target的值一样。

– 事宜对象的要领：

• stopPropagation 阻挠冒泡，有时刻我们不想事宜继承冒泡上去了。
• preventDefault 阻挠默许行动
• stopImmediatePropagation 阻挠冒泡

挪用要领：

• event.stopPropagation(); 阻挠事宜通报到父节点。
• event.stopImmediatePropagation(); 除了阻挠事宜通报到父节点，还阻挠了当前节点的后续事宜。
• event.preventDefault()阻挠默许行动

3.事宜范例

1.Event

运用：<img>标签中，当图片找不到时，显现默许图片onerror事宜

<img alt="photo" src="http://www.xxx.com/a.jpg" onerror="this.src='http://www.xxx.com/default.jpg'"/>

2.UIEvent

resize 转变页面或窗体大小时触发的事宜
scroll 转动事宜

3.MouseEvent

事宜范例：

注重：
mouseout与mouseleave的区分就是mouseleave不冒泡
mouseover与mouseenter的区分也是mouseenter不冒泡

MouseEvent事宜属性：

• clientX（触发事宜的点到页面最左端的距离）， clientY（触发事宜的点到页面最上方的距离）
• screenX（触发事宜的点到屏幕最左端的距离）， screenY（触发事宜的点到屏幕最上方的距离）

MouseEvent事宜递次：

比方：

1.从元素A上方移过期

mousemove -> mouseover(A) -> mouseenter(A) -> mousemove(A)[许多个] -> mouseout(A) -> mouseleave(A)

2.点击元素

mousedown -> [mousemove] -> mouseup -> click

例子：拖拽div

需求：按下鼠标并挪动时最先拖拽div，松开鼠标时住手拖拽div。mousedown -> mousemove -> mouseup

jsfiddle拖拽div栗子

4.FocusEvent

事宜范例：

blur 元素落空核心时
focus 元素取得核心时
focusin 元素行将取得核心时
focusout 元素将要落空核心时

属性：

relatedTarget 作用：当一个元素落空核心时，别的一个元素就要取得核心。在blur落空核心事宜中，取得核心的元素就是这个relatedTarget；在focus取得核心事宜中，落空核心的元素就是这个relatedTarget。

5.InputEvent

6.KeyBoardEvent键盘事宜

属性

• key 按下了什么键
• code 按下了什么键

jsfiddle中MDN官方例子

4.事宜代办

需求：一个列表，点击哪一行，这一行背景就变灰色，其他满是白色。
题目变成：想要给一个ul下的多个li注册同一个click事宜（让背景变灰），假如li个数不多还好，假如li许多，那末为每一个li都注册一遍明显太浪费了，那末如何处理呢？

回想我们的事宜流中的事宜冒泡，能够发明触发事宜的元素触发了事宜后，它会往上去冒泡，一向冒泡到window对象。而事宜是在冒泡阶段被触发的，所以它的一切父元素也是能够吸收到这个click事宜被触发了的。所以假如我们把事宜注册到 触发事宜的元素 的父元素上，它也是会实行的。因而，我们能够把事宜注册在元素的父节点上来完成，能够是近来的父节点，也能够是再上层的父节点。这里我们经由历程在ul上注册来完成这一功用，然后经由历程事宜处置惩罚函数中的event.target能够拿到当前触发的li元素。

//html
<ul id="myUl">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

//js
var myUl = document.getElementById("myUl");
myUl.addEventListener("click", function(event){
  var target = event.target;//当前点击的li，就是事宜触发的节点
  //TODO
});

长处：
1.要治理的handle更少
2.分派的内存更少
3.当增添或删除子节点时不必处置惩罚事宜，上例中的li

瑕玷：
1.注册到父元素上的事宜的回调函数的逻辑更庞杂

用的比较多的处所是列表eg. ul>li*4

数据通信

1.http协定

经常运用http要领

URL组成

罕见HTTP状况码

2.ajax要求

1.翻开浏览器

var xhr = new XMLHttpRequest();

2.在地点栏输入地点

xhr.open('get', '1.txt', true);

2.1[可选]设置要求头

xhr.setRequestHeader(header, value);
eg:
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded" );

3.提交，发送要求

xhr.send([data = null]);

data能够是string范例，也能够是form-data范例

4.守候服务器返回内容

xhr.onreadystatechange = function(){
  if(xhr.readyState == 4){
    if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304){
      console.log(xhr.responseText);
    } else {
      console.log('Request was unsuccessful:' + xhr.status)
    }
  }
}

还能够监听xhr.onload事宜，这个事宜是当xhr.readyState = 4而且xhr.status = 200才会触发的。

同源战略

不满足同源战略的接见，就叫跨域资本接见，遵照W3C定义的CORS规范。

流程图：

数据存储

cookie

document.cookie：是一段小型的文本文件。大小在4kb摆布。由键值对（name-value）组成，键值对中心由; 和空格离隔。
eg：

"SRCHD=AF=NOFORM; SRCHUSR=DOB=20160521; SRCHUID=V=2&GUID=48081778AFB747C3925DAF775B98D983; MUID=29B9478F16FC621D1C93409312FC61CF; ipv6=hit=1; _FP=hta=on; SRCHHPGUSR=CW=1349&CH=638&DPR=1.25&UTC=480; WLS=TS=63629214318; _SS=SID=18C4028A873563381E5C08FF86946247&HV=1493617535&bIm=475643"

虽然cookie是存储在浏览器端，但大部分时刻cookie是在服务器端举行设置。服务端经由历程在HTTP返回的Response Headers内里经由历程设置set-cookie这个字段让浏览器晓得须要存储的cookie。

属性：
除了Name和Value以外，另有
Domain
Path
浏览器会话时候：Expires（时候戳）/Max-Age（最长时候）

对cookie举行增编削查：

document.cookie 属性看起来像是一个一般的文本字符串，实在它不是。
所以，很奇异的一点是：增加新的cookie只须要document.cookie = "newKey=newValue";就能够了，不须要document.cookie += ...，之前的cookie不会被掩盖。
另有一点是：纵然在 document.cookie 中写入一个完整的 cookie 字符串, 当从新读取该 cookie 信息时，cookie 信息是以名/值对的情势展现的。

去jsfiddle里看吧

删除cookie：将它的max-age属性设置为0就能够删除了。

缺点：流量价值，平安性题目，大小限定。

storage [localStorage & sessionStorage]

localStorage有效期：永远

sessionStorage有效期：浏览器会话时期，差别窗口见不同享sessionStorage

大小在5MB摆布。

localStorage.name
delete localStorage.name

运用API

//读取值
localStorage.getItem("name"); //传入name来接见对应的值
localStorage.key(i); //传入索引值来接见对应的值

//设置值
localStorage.setItem("name", "realValue");

//删除值
localStorage.removeItem("name");

//清空一切的数据
localStorage.clear();

动画

三要素：对象，属性，定时器

setInterval, setTimeout, requestAnimationFrame()

var intervalId = setInterval(func, delay); //delay 为触发的距离
clearInterval(intervalId);

var intervalId2 = setTimeout(func, delay); //delay默许是0，假如不写就马上触发，是一个异步的历程
clearTimeout(intervalId2);

区分在于：setTimeout只实行一次，setInterval会反复实行。

eg1：
var intervalId = setInterval(function(){ //关于func的写法，我是一颗罕见的栗子 }, delay);
eg2：
var funcA = function(){//我是第二颗罕见栗子 };
var intervalId = setInterval(funcA, delay);

var requestId = requestAnimationFrame(func);
cancelAnimationFrame(requestId);

距离时候不由用户掌握，由显现器的革新频次掌握，也许1s革新60次。每次浏览器革新会触发这个操纵，不须要用户体贴距离时候，且动画更流通，不会涌现掉帧的状况。

罕见动画：

形变

位移

扭转

透明度

庞杂动画也都是由简朴动画组成的。

音频与视频

<audio src=""></audio>
<video src="" width=320 height=240></video>

掌握播放的要领和属性：

查询媒体状况：

canvas

不发起用css指定宽高，直接在<canvas>标签中指定宽和高。

<canvas id="tutorial" width=320 height=240><</canvas>

如何猎取canvas的衬着上下文对象？

经由历程getContext("2d")要领：

var canvas = document.getElementById("tutorial");
var context = canvas.getContext("2d");

基础画图步骤：

地球绕着太阳转实例代码：

Mozilla官方教程

BOM

BOM是代表浏览器窗口对象的一组API
Screen,navigator,location,history对话框,窗体互操纵,load,beforeunload,scroll,resize等事宜

1.属性：

navigator

window.navigator.platform // "Win32"
window.navigator.userAgent // 包含浏览器内核信息 "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.81 Safari/537.36"

能够经由历程userAgent推断当前运行在什么装备上。

location

protocol + host(hostname + port) + pathname + search + hash

window.location.href示意当前页面完整途径，也能够经由历程修正这个属性让浏览器跳转。

要领：

window.location.assign(url) 跳转页面，纪录汗青。
window.location.replace(url) 跳转页面，不纪录汗青。
window.location.reload() 重载当前页面。

history

属性：length

要领：

back(n) //传入正整数，退却n步
forward(n) //传入负整数，行进n步
go(n) //传入整数，正数行进，负数倒退

screen

属性：

availHeight
availWidth

加了avail的是可用的屏幕属性，没加的是显现器的属性。

2.要领：

3.事宜

注重beforeunload事宜，询问了用户是不是决议脱离。

表单操纵

示例：

服务器吸收的信息：

要求的url：https://www.xxx.com/order
花样：application/x-www-form-urlencoded
参数：custname，size，...

<form method="post" action="https://www.xxx.com/order" enctype="application/x-www-form-urlencoded">
<label>姓名：<input name="custname"></label>
<div>披萨大小：
<label>小<input type="radio" name="size" value="small"></label>
<label>中<input type="radio" name="size" value="medium"></label>
<label>大<input type="radio" name="size" value="big"></label>
</div>
...
</form>

注重增加required属性：<input required>，能够让在submit时就检测出没有填写的表单并给用户以提醒。

1.表单元素

1.1form的属性

name属性用途是能够直接拿到form节点元素：
var pizzaForm = document.forms.pizza;

1.2form的接口

reset()
可重置元素：input,keygen,output,select,textarea
触发表单reset事宜，阻挠该事宜的默许行动可作废重置。
能够用于删除文件挑选器<input type="file">中已挑选的文件哟 ʅ（´◔౪◔）ʃ

1.3select的属性和要领

要领：

• add(element[, before])
• remove([index])

建立选项：

• 示例： document.createElement('option'); 即是 new Option();
• 语法：new Option(text[, value[, defaultSelected[, selected]]])

增加选项：

• 示例： element.insertAdjacentElement("beforeBegin", option) select.add(option, before)
• 语法：selectObject.add(optionElement,beforeElement) , element.insertAdjacentElement(position, element);

删除选项：

• 示例：opt12.parentNode.removeChild(opt12) 即是 select.remove(2)
• 语法：select.remove(index)

select级联下拉挑选器

知识点：

• onchange
• remove
• add

jsfiddle栗子

重要代码：

//向列表中添补数据
function fillSelect(select, list){
  //先倒序遍历清空列表
  for(var i=select.length-1; i>0; i--){
    select.remove(i);
  }
  //然后把传入的数据列表list经由历程轮回增加到option上去
  list.forEach(function(data){
    var option = new Option(data.text, data.value)
    select.add(option);
  })
}
fillSelect(demoForm.chapter, chapters);

demoForm.chapter.addEventListener("click", function(event){
  var value = event.target.value;
  //另一种猎取value的体式格局：demoForm.chapter.value
  var list = sections[value] || [];
  fillSelect(demoForm.section, list);
})

2.表单考证

可考证元素：button input select textarea

element的属性和要领：

• willValidite 可用于推断元素是不是会被考证
• checkValidity() 考证某个元素
• validity 存储考证效果，错误信息等
• validationMessage 考证信息
• setCustomValidity(message) 设置自定义的非常显现信息

自定义非常：

假如不须要考证，就在<form>上增加一个 novalidate 属性，就制止了该表单下一切的考证。

3.表单提交

submit()要领能够手动提交
onsubmit事宜绑定的要领中，能够经由历程阻挠默许事宜触发来阻挠表单提交革新页面

4.表单运用

考证手机号能够在标签中写pattern:

<input name="telephone" type="tel" pattern="^0?(1[34578])[0-9]{9}$">

考证表单应该在表单的submit事宜被触发时举行，而不是按钮被点击时举行。由于另有其他的触发表单提交的体式格局。

列表操纵

列表的显现、增加、删除、更新、挑选

数据构造：

事宜代办：
假如须要在<ul>的每项<li>上都增加点击事宜，那末就增加到<ul>上，在事宜处置惩罚函数中经由历程event.target去猎取当前的点击的<li>元素。

编程体式格局 ： 面向视图-> 面向数据

面向视图编程

view与controller直接关联在一起。
由于视图层变化会很频仍，这直接致使掌握层的变化。
而且从自动化测试的角度来讲，由于视图层没办法完整自动化，而视图层与掌握层的耦合性云云高，致使掌握层也没办法做完整的自动化测试。

面向数据

将视图（View）笼统成数据模型（ViewModel），后续一切的操纵都针对数据模型来举行。只须要关注数据模型，不关谛视图上如何展现。

详细视图上如何展现，交给Binder（特地的数据绑定相干的库）去完成：