這個(gè)部分主要總結(jié)一下對DOM的兩個(gè)主要的擴(kuò)展SelectorAPI和HTML5
選擇符API
querySelector()方法
該方法接收一個(gè)CSS選擇符,返回與該模式匹配的第一個(gè)元素,如果沒有找到匹配的元素,則返回null
querySelectorAll()方法
querySelectorAll()方法接收的參數(shù)querySelector()方法一樣,都是一個(gè)CSS選擇符,但返回的是所有匹配的元素的類似NodeList的集合,但是其底層實(shí)現(xiàn)類似于一組元素的快照,而非不斷對完檔進(jìn)行搜索的動態(tài)查詢,因此可以避免引起大多數(shù)性能問題. 如果沒有找到匹配的元素,NodeList就是空的.
matchesSelector()方法
接收CSS選擇符作為參數(shù),如果調(diào)用元素與該選擇符匹配,則返回true,反之,返回false
元素遍歷
由于使用childNodes和firstChild等屬性時(shí),會考慮到文本節(jié)點(diǎn),導(dǎo)致和預(yù)想結(jié)果不一致,為了彌補(bǔ)這一差異,Element Traversal規(guī)范新定義了一組屬性
childElementCount:
返回子元素(不包括文本節(jié)點(diǎn)和注釋)的個(gè)數(shù)
firstElementChild:
firstChild的元素版
lastElementChild:
lastChild的元素版
previousElementSibling:
previousSibling的元素版
nextElementSibling:
nextSibling的元素版
HTML5
getElementsByClassName()
其實(shí)HTML5添加的getElementsByClassName()實(shí)現(xiàn)的功能用querySelectorAll()也能實(shí)現(xiàn),不過其返回的對象時(shí)NodeList對象,而不是快照,因此存在著性能問題,若不沒有實(shí)時(shí)性的需要,那么建議使用querySelectorAll()來代替getElementsByClassName()
classList屬性
HTML5新增一種操作類名的方式,為所有元素添加classList屬性,是新集合類型DOMTokenList的實(shí)例,與其他DOM集合類似,也有l(wèi)ength屬性,另外還有以下方法
- add(value) : 將給定的字符串值添加到列表中
- contains(value) : 表示列表中是否存在給定的值,存在則返回true,反之返回false
- remove(value) :從列表中刪除給定的字符串
- toggle(value) : 如果列表中已經(jīng)存在給定的值,則刪除,反之則添加
注意:classList屬性雖然好用,但是兼容性不是很好,所以使用前根據(jù)需要是否要準(zhǔn)備跨瀏覽器方案
焦點(diǎn)管理
document.activeElement
這個(gè)屬性始終會引用DOM中當(dāng)前獲得了焦點(diǎn)的元素,默認(rèn)情況下,文檔剛剛加載完成后,document.activeElement中爆粗你的事document.body元素的引用
document.hasFocus()
這個(gè)方法可用于確定文檔是否獲得了焦點(diǎn),知道用戶是不是正在與頁面交互
HTMLDocument的變化
document.readyState
有兩個(gè)可能值:
①loading ,正在加載文檔;
②complete ,已經(jīng)加載完文檔
document.head
引用文檔的<head>元素
字符集屬性
主要指document.charset,獲取當(dāng)前文檔中實(shí)際使用的字符集,以及defalutCharset表示當(dāng)前文檔默認(rèn)的字符集應(yīng)該是什么
自定義數(shù)據(jù)屬性
HTML5規(guī)定可以為元素添加非標(biāo)準(zhǔn)的屬性,但要添加前綴data-,目的是為元素提供與渲染無關(guān)的信息或者提供語義信息.
添加了自定義屬性之后,可以通過元素的dataset屬性來訪問自定義屬性的值,每個(gè)data-name形式的屬性都會有一個(gè)對應(yīng)的屬性,只不過屬性名沒有data-前綴
插入標(biāo)記
innerHTML屬性
在讀模式下,innerHTML返回與調(diào)用元素的所有子節(jié)點(diǎn)對應(yīng)的HTML標(biāo)記
在寫模式下,innerHTML會根據(jù)制定的值創(chuàng)建新的DOM樹,然后用這個(gè)DOM樹完全替換元素原先的所有子節(jié)點(diǎn)
outerHTML屬性
在讀模式下,outerHTML返回調(diào)用它的元素及其所有子節(jié)點(diǎn)的HTML標(biāo)簽
在寫模式下,會根據(jù)特定的HTML字符串創(chuàng)建新的DOM字?jǐn)?shù),然后替換調(diào)用元素
insertAdjacentHTML()方法
接收兩個(gè)參數(shù):①插入位置②要插入的HTML文本
第一個(gè)參數(shù)從下面選取
- "beforebegin" 當(dāng)前元素之前插入
- "afterbegin" 插入到當(dāng)前元素作為第一個(gè)子元素
- "beforeend" 插入到當(dāng)前元素作為最后一個(gè)子元素
- "afterend" 當(dāng)前元素之后插入
scrpllIntoView()方法
scrollIntoView()可以在所有HTML元素上調(diào)用,通過滾動瀏覽器窗口或某個(gè)容器元素,調(diào)用元素就可以出現(xiàn)在視口中,如果傳入true作為參數(shù)或不傳入?yún)?shù),則窗口滾動之后會讓調(diào)用元素的頂部與視口頂部盡可能平齊,若傳入false為參數(shù),則調(diào)用元素會盡可能全部出現(xiàn)在視口中,頂部不一定平齊
children屬性
由于IE9之前版本與其他瀏覽器在處理文本節(jié)點(diǎn)中的空白符有差異,所以添加children屬性,只包含元素中同樣還是元素的子節(jié)點(diǎn),除此之外與childNodes沒有區(qū)別.
contains()方法
可以通過contains知道某個(gè)節(jié)點(diǎn)是不是另一個(gè)節(jié)點(diǎn)的后代,調(diào)用contains()方法的應(yīng)該是祖先節(jié)點(diǎn),接收要檢測的后代節(jié)點(diǎn)作為參數(shù),如果被檢測的節(jié)點(diǎn)是后代節(jié)點(diǎn),則該方法返回true,否則返回false
插入文本
innerText屬性
通過innerText屬性可以操作元素中包含的所有文本,通過innerText讀取值時(shí),它會按照由淺入深的順序,將子文檔樹種的所有文本拼接起來,在通過innerText寫入值時(shí),結(jié)果會刪除元素的所有子節(jié)點(diǎn),,插入包含相應(yīng)文本值的文本節(jié)點(diǎn)
outerText屬性
在作用范圍上擴(kuò)大到了包含調(diào)用他的節(jié)點(diǎn)之外,與innerText無區(qū)別
以上是參考高程3的總結(jié)內(nèi)容.
