1.**querySelector()**方法接收一個(gè)CSS選擇符,返回與該模式匹配的第一個(gè)元素,如果沒有找到匹配的元素,返回null。與getElementsById()類似,這個(gè)方法可以通過Document類型或Element類型調(diào)用。
2.**querySelectorAll()**方法返回的是一個(gè)NodeList實(shí)例,而**其底層實(shí)現(xiàn)則類似一組元素的快照,而非不斷對文檔進(jìn)行搜索的動(dòng)態(tài)查詢**。
3.matches()接收一個(gè)CSS選擇符,如果調(diào)用元素與該選擇符匹配,返回true。IE/edge需加前綴ms,安卓需加前綴webkit。如果想使用這個(gè)方法需要編寫一個(gè)包裝函數(shù):
function matches(element,selector){
if (element.matches) {
return element.matches(selector);
} else if (element.msMatches){
return element.msMatches(selector);
} else if (element.webkitMatches) {
return element.webkitMatches(selector);
} else {
throw new Error('Not supported.');
}
}
4.Element Traversal API為DOM元素添加了以下5個(gè)屬性:
* childElementCount:返回子元素(不包括文本節(jié)點(diǎn)和注釋)的個(gè)數(shù)。
* firstElementChild
* lastElementChild
* previousElementChild
* nextElementChild
5.**getElementsByClassName()**接收一個(gè)參數(shù),即一個(gè)包含一個(gè)或多個(gè)類名的字符串,返回帶有指定類的所有元素的NodeList。當(dāng)傳入多個(gè)類名的時(shí)候(先后順序不重要q),只返回同時(shí)包含這幾個(gè)類名的元素。其余特性(集合動(dòng)態(tài)性和性能問題)與getElementsByTagName()類似。
6.HTML5新增了一種操作類名的方式,可以讓操作更簡單也更安全,那就是為所有元素添加classList屬性(有l(wèi)ength屬性,可使用方括號(hào)語法訪問)。這個(gè)新類型還定義了如下方法:
* add():講給定字符串值添加到類名列表中,如果已經(jīng)存在就不添加了。
* contains():表示列表中是否存在給定的值,如果存在則返回true,否則返回false。
* remove():從列表中刪除給定的字符串。
* toggle():如果列表中已經(jīng)存在給定的值,刪除它;如果列表中沒有給定的值,添加它。
避免一次性傳入多個(gè)類名,這樣可能會(huì)導(dǎo)致IE11拋出錯(cuò)誤。
7.**document.activeElement**屬性始終會(huì)引用DOOM中當(dāng)前獲得了焦點(diǎn)的元素。元素獲得焦點(diǎn)的方式又頁面加載、用戶輸入(通常通過按TAB鍵)和在代碼中調(diào)用**focus()**方法。默認(rèn)情況下,文檔剛加載完成時(shí),document.activeElement中保存的是document.body元素的引用。文檔加載期間,document.activeElement的值為null。
另外,HTML5新增了document.hasFocus()方法,這個(gè)方法用于確定**文檔**是否獲得了焦點(diǎn)。通過檢測文檔是否獲得了焦點(diǎn),可以知道用戶是不是正在與頁面交互。
8.使用document.readyState屬性的最強(qiáng)當(dāng)方式,就是通過它來實(shí)現(xiàn)一個(gè)指示文檔已經(jīng)加載完成的指示器。
if (document.readyState == 'complete') {
//執(zhí)行操作
}
9. 在大多數(shù)瀏覽器中,通過innerHTML插入<scriipt>元素并不會(huì)執(zhí)行其中的腳本。并不是所有元素都支持innerHTML屬性(不支持的元素中包括了表格相關(guān)元素)。
10.**outerHTML**屬性在讀模式下返回調(diào)用它的元素及所有子節(jié)點(diǎn)的HTML標(biāo)簽。在寫模式下,會(huì)根據(jù)指定的HTML字符串創(chuàng)建新的DOM子樹,然后用這個(gè)DOM子樹完全替換調(diào)用元素。
11.insertAdjacentHTML()方法用于在元素內(nèi)或元素外前后插入HTML。
12.在使用innerHTML、outerHTML、insertAdjacentHTML()方法時(shí),最好先手工刪除要被替換的元素的所有事件處理程序和JavaScript對象屬性。
13.**children**屬性返回子節(jié)點(diǎn)中的元素節(jié)點(diǎn),除此之外他和childNodes沒有什么區(qū)別。IE9+及所有現(xiàn)代瀏覽器都支持這個(gè)屬性。
14.元素節(jié)點(diǎn)的contains()方法可以檢測傳入元素是否調(diào)用元素的后代節(jié)點(diǎn)。
15.srollIntoView()方法可以在所有HTML元素上調(diào)用,通過滾動(dòng)瀏覽器窗口或某個(gè)容器元素,掉喲個(gè)元素就可以出現(xiàn)在視口當(dāng)中。如果給這個(gè)方法傳入true作為參數(shù),或者不傳入任何參數(shù),那么窗口滾動(dòng)之后會(huì)讓調(diào)用的元素的頂部與視口頂部盡可能平齊。如果傳入false作為參數(shù),調(diào)用元素會(huì)盡可能全部出現(xiàn)在視口當(dāng)中,(可能的話,調(diào)用元素的底部會(huì)與是視口底部平齊)不過頂部不一定平齊。
`document.forms[0].scrollIntoView();`
當(dāng)頁面發(fā)生變化時(shí),一般會(huì)用這個(gè)方法來吸引用戶的注意力。實(shí)際上,為某個(gè)元素設(shè)置焦點(diǎn)也會(huì)導(dǎo)致瀏覽器滾動(dòng)并顯示出獲得焦點(diǎn)的元素。
- 第一章 JavaScript簡介
- 第二章 在HTML中使用JavaScript
- 第三章 基本概念
- 第四章 變量、作用域和內(nèi)存問題
- 第五章 引用類型
- 第六章 面向?qū)ο蟮某绦蛟O(shè)計(jì)
- 第七章 函數(shù)表達(dá)式
- 第八章 BOM
- 第九章 客戶端檢測
- 第十章 DOM
- 第十一章 DOM擴(kuò)展
- 第十二章 DOM2和DOM3
- 第十三章 事件
- 第十四章 表單腳本
- 第十六章 HTML5腳本程序
- 第十七章 錯(cuò)誤處理與調(diào)試
- 第二十章 JSON
- 第二十一章 AJAX和Comet
- 第二十二章 高級(jí)技巧
- 第二十三章 離線應(yīng)用與客戶端存儲(chǔ)
- 第二十四章 最佳實(shí)踐
- 第二十五章 新興的API
