摘要：推薦事件事件流事件流就是事件處理執(zhí)行的過程。事件注冊(cè)事件類型事件處理函數(shù)是否在捕獲階段觸發(fā)。這個(gè)就是事件對(duì)象第二行的就是事件對(duì)象。除了阻止事件傳遞到父節(jié)點(diǎn)，還阻止了當(dāng)前節(jié)點(diǎn)的后續(xù)事件。缺陷流量代價(jià)，安全性問題，大小限制。

即：用對(duì)象的形式表示HTML、CSS。

DOM包含：

DOM Core

DOM HTML

DOM Style

DOM Event

node.parentNode
    .childNodes //得到node的全部子節(jié)點(diǎn)，包括各種類型
    .firstChild
    .lastChild
    .previousSibling
    .nextSibling //下一個(gè)兄弟節(jié)點(diǎn)

p.parentElement  //父元素節(jié)點(diǎn)
 .children //返回指定節(jié)點(diǎn)的所有element子節(jié)點(diǎn)的活HTMLCollection，可以children[0].nodeName獲取
 .firstElementChild
 .lastElementChild
 .previousElementSibling
 .nextElementSibling

getElementById

//返回live（實(shí)時(shí)變化）的動(dòng)態(tài)集合
getElementsByClassName("classA")
//獲取同時(shí)有兩個(gè)類名的元素節(jié)點(diǎn)
getElementsByClassName("classA classB") 

//返回live（實(shí)時(shí)變化）的動(dòng)態(tài)集合
getElementsByTagName()

//特別注意：querySelectorAll是non-live(非實(shí)時(shí)變化)的。 ヾ(o???)?
querySelector("#users") 獲取第一個(gè)符合條件的元素
querySelector("input[type="text"]") 可以根據(jù)屬性進(jìn)行選擇，很方便
querySelectorAll(".user") 獲取所有匹配的元素
querySelectorAll("#users .user")

注意：以上選擇器（getElementById除外），除了可以在整個(gè)文檔中尋找，比如： document.getElementsByClassName("className")，還可以在某個(gè)節(jié)點(diǎn)下尋找，比如：element.getElementsByClassName("className") 。

//創(chuàng)建指定標(biāo)簽名稱的節(jié)點(diǎn)
element = document.createElement(tagName)
var li = document.createElement("li");
var a = document.createElement("a");

//獲取節(jié)點(diǎn)及其后代節(jié)點(diǎn)的文本內(nèi)容或?yàn)楣?jié)點(diǎn)添加內(nèi)容
element.textContent
element.innerText
element.textContent = "newValue";
element.innerText = "newValue";

//插入節(jié)點(diǎn)
//appendChild會(huì)添加到parentElement結(jié)束標(biāo)簽之前，也就是變成parentElement元素的最后一個(gè)子元素
parentElement.appendChild(childElement); 
//insertBefore會(huì)添加newElement到parentElement下referenceElement元素前面
parentElement.insertBefore(newElement, referenceElement)

如果想把一個(gè)節(jié)點(diǎn)從原來的位置移動(dòng)到指定位置。那么只需要：

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

但如果不想移動(dòng)原來節(jié)點(diǎn)的位置，而是想克隆一個(gè)新的節(jié)點(diǎn)出來，那么需要用到cloneNode(true)

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

parentElement.removeChild(child);
通常不用專門獲取parentElement，直接寫child.parentNode即可

 //獲取節(jié)點(diǎn)內(nèi)部的所有HTML結(jié)構(gòu)代碼，或?yàn)楣?jié)點(diǎn)添加內(nèi)部的html代碼
element.innerHTML
element.innerHTML = "hahaha"
//可能有內(nèi)存泄漏和安全問題，因此僅建議用于新建節(jié)點(diǎn)，并盡量不用于用戶填的內(nèi)容

id - id

type - type

class - className

for - htmlFor

兩種訪問方式：

input.className;

input["id"] = "cute"

屬性訪問器的通用性和拓展性不好。

element.getAttribute(attritubeName)

eg: input.getAttribute("class");

element.setAttribute(name, value)

eg: input.setAttribute("id", "unique") //會(huì)將id設(shè)置為unique
特例：disabled屬性
//以下三種都會(huì)將disabled設(shè)置為生效
input.setAttribute("disabled", true)
input.setAttribute("disabled", "")
input.setAttribute("disabled", false)
因?yàn)?b>setAttribute只是字符串的操作，所以想要移除disabled屬性只能input.removeAttribute("disabled");

缺點(diǎn)：僅僅是字符串的操作。
優(yōu)點(diǎn)：通用性好，直接把HTML屬性名傳進(jìn)去就行了。

HTMLElement.dataset：dataset是HTML元素上的一個(gè)屬性，是data-*屬性的一個(gè)集合，主要的用途是在元素上保存數(shù)據(jù)。一般用來做自定義的數(shù)據(jù)屬性。

Darcy

id： 123456

accountName： darcy

//在JS中可以這樣獲取：
var data = div.dataset;
//然后這樣用
var dataId = data.id;
document.getElementById("info").innerText = data.accountName;

element.classList.add("classA"); // 為元素添加一個(gè)class
element.classList.remove("classA"); // 刪除元素上名為classA的類
element.classList.toggle("classA");

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

Darcy

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

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

缺點(diǎn)：更新每一個(gè)屬性都需要多帶帶的一條語句。

缺點(diǎn)：樣式混在邏輯中。

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

element.className += " invalid"

存在的問題：一次更新很多元素的樣式時(shí)會(huì)很麻煩。

//html


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

只能獲取到寫在HTML元素上的樣式，若寫在