摘要：推荐事件事件流事件流就是事件处理执行的过程。事件注册事件类型事件处理函数是否在捕获阶段触发。这个就是事件对象第二行的就是事件对象。除了阻止事件传递到父节点，还阻止了当前节点的后续事件。缺陷流量代价，安全性问题，大小限制。
文档树 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 = "hahaha" //可能有内存泄漏和安全问题，因此仅建议用于新建节点，并尽量不用于用户填的内容属性操作 1.HTML attribute -> DOM property input元素
id - id
type - type
class - className
label元素for - htmlFor
2.property accessor 属性访问器两种访问方式：
input.className;
input["id"] = "cute"
属性访问器的通用性和拓展性不好。
3.getAttribute/setAttributeelement.getAttribute(attritubeName)
eg: input.getAttribute("class");
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属性名传进去就行了。
HTMLElement.dataset：dataset是HTML元素上的一个属性，是data-*属性的一个集合，主要的用途是在元素上保存数据。一般用来做自定义的数据属性。
div.dataset.Darcy
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.cssPropertyDarcy
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
//js
document.getElementById("skin").href = "skin.summer.css";
3.获取样式
element.style.cssProperty
只能获取到写在HTML元素上的样式，若写在