選擇器
類似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用文本節點替換整個元素