選擇器
類似Jquery
querySelector(): 接受一個CSS選擇符，返回匹配的第一個元素querySelectorAll()：接受一個CSS選擇符，返回所有匹配元素。返回值是NodeList的快照。matchesSelector()：如果調用元素與該選擇符匹配，返回true，否則返回false。爲了適配不同的瀏覽器，需要下面的包裝版：function matchesSelector(element, selector) { if (element.matchesSelector) { return element.matchesSelector(selector); } else if (element.msMatchesSelector) { return element.msMatchesSelector(selector); } else if (element.mozMatchesSelector) { return element.mozMatchesSelector(selector); } else if (element.webkitMatchesSelector) { return element.webkitMatchesSelector(selector); } else { throw new Error("not supported"); } } if (matchesSelector(document.body, "body.page1")) { // 執行操作 }
元素遍歷API
以下都只針對於Element Node
屬性
childElementCount: 返回子元素（不包含文本節點和註釋）的個數
firstElementChild: 指向第一個元素；firstChild的元素版
lastElementChild: 指向以後一個元素；lastChild的元素版
previousElementSibling: 指向前一個同輩元素
nextElementSibling: 指向後一個同輩元素
與類相關的擴充
getElementsByClassName
getElementsByClassName(): 返回帶有指定類的所有元素的NodeList。只有位於調用元素子樹的元素纔會返回。
classList
某個元素擁有的所有類。
classList屬性是新集合類型DOMTokenList的實例。可以使用length獲取長度，也可以用方括號獲取每個元素
方法:
add(value)：添加類contains(value)：判斷是否屬於某個類remove(value)：刪除類toggle(value)：如果類列表中已存在該值，則刪去，否則添加。
有了classList，修改元素的類時，則不需要像以前一樣獲取class的值，再進行字符串切分連接操作。直接add，remove即可，十分方便。
焦點管理
元素獲得焦點的方式有頁面加載，用戶輸入，代碼中調用focus()方法
屬性：
document.activeElement: 獲得焦點的元素的引用。
方法：
document.hasFocus()：確定文檔是否獲得了焦點。
HTMLDocument的變化
屬性
-
document.readyState- loading
- complete
-
compatMode- CSS1Compat：標準模式
- BackCompat：混雜模式
自定義屬性
可以爲元素添加非標準屬性，但要加前綴data-，目的是爲元素提供與渲染無關的信息，或者提供語義信息
添加了自定義屬性後，可以通過元素的dataset屬性來訪問自定義屬性的值。dataset中保存的屬性名將沒有data前綴
mydiv.setAttribute("data-hbx1","I am 1")
mydiv.setAttribute("data-hbx2", "I am 2")
mydiv.dataset
//DOMStringMap {hbx1: "I am 1", hbx2: "I am 2"}
// hbx1: "I am 1"
// hbx2: "I am 2"
innerHTML
- innerHTML：
- 讀模式：返回調用者的所有子內容（不包括自己）
- 寫模式：根據HTML字符串解析成DOM樹，替換掉調用者的所有子節點
- outerHTML：
- 讀模式：返回調用者的所有子內容（包括自己）
- 寫模式：根據HTML字符串解析成DOM樹，替換掉調用者（包括所有子樹）
優點：添加子元素時十分方便，只需要將以HTML字符串的形式傳入innerHTML即可。假如使用DOM操作插入，則需要進行節點創建並按順序連接。
但是創建和銷燬HTML解析器將造成性能損失，因此需要避免多次設置innerHTML。
children屬性
等同於childNodes屬性
contains（）方法
判斷某個節點是不是另一個節點的後代。
調用者和參數均爲Nodes類型。
innerText
讀：與innerHTML類似，不過過濾去了所有的標籤，按由淺入深的順序拼接所有子文檔樹。
寫：刪除所有子節點，插入文本節點
div.innerText = div.innerText;
//使用文本內容替換容器元素中的所有內容（包括子節點）
outerText
outerText用文本節點替換整個元素