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

即：用對象的形式表示HTML、CSS。

DOM包含：

DOM Core

DOM HTML

DOM Style

DOM Event

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

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

getElementById

//返回live（實時變化）的動態(tài)集合
getElementsByClassName("classA")
//獲取同時有兩個類名的元素節(jié)點
getElementsByClassName("classA classB") 

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

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

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

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

//獲取節(jié)點及其后代節(jié)點的文本內容或為節(jié)點添加內容
element.textContent
element.innerText
element.textContent = "newValue";
element.innerText = "newValue";

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

如果想把一個節(jié)點從原來的位置移動到指定位置。那么只需要：

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

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

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

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

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

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") //會將id設置為unique
特例：disabled屬性
//以下三種都會將disabled設置為生效
input.setAttribute("disabled", true)
input.setAttribute("disabled", "")
input.setAttribute("disabled", false)
因為setAttribute只是字符串的操作，所以想要移除disabled屬性只能input.removeAttribute("disabled");

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

HTMLElement.dataset：dataset是HTML元素上的一個屬性，是data-*屬性的一個集合，主要的用途是在元素上保存數(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"); // 為元素添加一個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";

缺點：更新每一個屬性都需要多帶帶的一條語句。

缺點：樣式混在邏輯中。

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

element.className += " invalid"

存在的問題：一次更新很多元素的樣式時會很麻煩。

//html


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

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