DOM擴展
Selectors API
- querySelector(cssSelector): 參數爲css selector, 返回與模式匹配的第一個元素，若是沒有找到元素，返回null
經過Document調用querySelector, 會在文檔元素的範圍內查找匹配的元素；javascript
經過Element調用querySelector，會在該元素後代元素的範圍內查找匹配的元素css
<p>sunny day</p> <div id="myDiv"> <p>hello</p> </div>
document.querySelector('p')
// <p>sunny day</p>
document.querySelector('#myDiv')
// <div id="myDiv"><p>hello</p></div>
document.querySelector('#myDiv').querySelector('p')
//<p>hello</p>
- querySelectorAll(cssSelector): 相似querySelector, 但返回的是NodeList, 沒有找到匹配的元素就返回空的NodeList, 並且能夠一次查詢多個selector, 使用逗號分隔
<div class="thing">A thing</div> <div class="thing">A thing</div> <div class="another-thing">Another thing</div>
let allThings = document.querySelectorAll('.thing, .another-thing')
Tips: 現代瀏覽器能夠直接使用NodeList.forEach, 若是是舊版瀏覽器，須要使用Array.from(arrayLike)將nodeList轉換爲arrayhtml
// Modern browsers
let allThings = document.querySelectorAll('.thing, .another-thing')
allThings.forEach(el => {/* do something with element */})
// Older browsers
let allThings = document.querySelectorAll('.thing, .another-thing')
// You might need a polyfill for Array.from.
// Alternatively, use Array.prototype.slice.call(allThings);
let allThingsArray = Array.from(allThings, (item, index) => {
/* do something with element */
})
// 或者使用forEach
allThingsArray.forEach(el => {/* do something with element */})
元素遍歷
childElementCount: 返回子元素(不包括文本節點和註釋)的個數java
firstElementChild: 指向第一個子元素(firstChild的元素版)node
lastElementChild: 指向最後一個子元素(lastChild的元素版)瀏覽器
previousElementSibling: 指向前一個同輩元素(previousSibling的元素版)app
nextElementSibling: 指向後一個同輩元素(nextSibling的元素版)性能
HTML5 DOM擴展
getElementsByClassName()：只有位於調用元素子樹中的元素纔會返回，在document上調用，會返回文檔中與類名匹配的元素ui
classList: 新集合類型DOMTokenList的實例，經過className屬性添加、刪除和替換編碼
- add(value)
- contains(value)
- remove(value)
- toggle(value)
焦點管理(主要用途是提升Web應用的無障礙性)：
document.activeElement // 返回DOM中得到了焦點的元素， 沒有時返回null
document.hasFocus() // 判斷文檔是否得到了焦點
HTMLDocument變化
文檔狀態：
document.readyState // 兩個可能值：‘loading’, 'complete'
兼容模式:
document.compatMode // 兩個可能值： ‘CSS1Compat’ 爲標準模式，'BackCompat' 爲混雜模式
head引用：
document.head // 引用文檔的<head>元素
兼容寫法：
let head = document.head || document.getElementsByTagName('head')[0]
字符集：
document.charset = 'utf-8' // 文檔字符集，默認爲utf-16
自定義數據屬性：
<div id="myDiv" data-appId="1234" data-myName="Nicholas"></div>
插入標記：
innerHTML屬性: 返回調用元素的全部子節點(包括元素、註釋、文本節點)對應的HTML標記。在插入以前，須要檢查文本內容是否有害, htmlEncode轉換"<", ">", "\'", "\"", "&" , " "等特殊字符
具體轉碼的方法能夠參考文章：http://www.cnblogs.com/xdp-gacl/p/3722642.html
outerHTML屬性: 與innerHTML的區別，outerHTML返回調用元素自己和子元素對應的HTML標記
insertAdjacentHTML()方法：兩個參數，插入的位置和文本
beforebegin: 做爲前兄弟節點插入
afterbegin: 做爲第一個子元素插入
beforeend: 做爲最後一個子元素插入
afterend: 做爲後兄弟節點插入
內存與性能： 在刪除帶有事件處理程序或引用了其餘Javascript對象子樹時，就有可能致使內存佔用問題，所以，在使用innerHTML、outerHTML屬性和insertAjacentHTML() 方法時，最好先手動刪除要被替換的元素的全部事件處理程序和引用的Javascript對象
/* 要儘可能避免下面這種頻繁操做innerHTML的方法 */
for (let i = 0, len = values.length; i < len; i++) {
ul.innerHTML += `<li>${values[i]}</li>`;
}
/* 下面這種一次性賦值給innerHTML則高效不少 */
let itemHtml = ''
for (let i = 0, len = values.length; i < len; i++) {
itemHtml += `<li>${values[i]}</li>`;
}
ul.innerHTML = itemHtml
scrollIntoView() 方法：應用在HTML元素上，調用該方法的元素能夠出如今視口中
document.forms[0].scrollIntoView(); // 傳入true: 元素頂部和視口頂部平行； false: 元素儘量所有出如今視口中
具體參考https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
專有擴展
文檔模式
IE8引入了「文檔模式」的概念，頁面的文檔模式決定了能夠使用哪一個級別的CSS, 能夠在Javascript中使用哪些API, 以及如何對待文檔類型(doctype), 到IE9, 共有4種文檔模式
IE5：以混雜模式渲染頁面
IE7：以IE7標準模式渲染頁面
IE8：以IE8標準模式渲染頁面，能夠使用Selectors API, 更多CSS2級選擇符和某些CSS3功能，還有一些H5的功能
IE9：以IE9標準模式渲染頁面，能夠使用ECMAScript 5, 完整的CSS3及更多的H5
要強制瀏覽器以某種模式渲染頁面，能夠使用HTTP頭部信息X-UA-Compatible，或經過等價的<meta>標籤
<meta http-equiv="X-UA-Compatible" content="IE=IEVersion" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge, Chrome=1" /> // 優先使用Chrome瀏覽器渲染頁面，若是是IE瀏覽器，則忽略文檔類型，始終以最新的文檔模式渲染頁面 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> // 若是有文檔類型聲明，則以IE7標準模式渲染頁面，不然將文檔模式設置爲IE5 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> // 忽略文檔類型聲明，強制以IE7標準模式渲染頁面
children屬性：相似childNodes, 但只包含元素的元素子節點
contains() 方法：判斷某個節點是否是另外一個節點的子節點
document.documentElement.contains(document.body) // true
innerText 屬性：操做元素中包含的全部文本內容，包括子文檔樹中的文本，讀取時，會由淺入深，將子文檔樹中的全部文本拼接起來；寫入時，會對HTML編碼(<, >, 空格，‘ 「引號，&和號)，確保生成一個子文本節點, 但Firefox不支持innerText, 能夠使用textContent屬性(DOM Level3規定的一個屬性), textContent與innerText不一樣的是，textContent會返回行內樣式和腳本代碼
// 讀取元素文本子節點內容
function getInnerText (element) {
return (typeof element.textContent === 'string') ? element.textContent : element.innerText
}
// 設置元素文本子節點內容
function setInnerText (element, text) {
if (typeof element.textContent === 'string') {
element.textContent = text
} else {
element.innerText = text
}
}
outerText 屬性：讀取時，和innerText的結果同樣，寫入時，outerText會替換調用它的元素，包括元素的子節點，一樣Firefox不支持該屬性。由於寫入會致使調用它的元素不存在，所以，不建議使用該屬性
- 1. DOM Extensions(DOM擴展)
- 2. DOM的擴展
- 3. DOM擴展
- 4. ch11 DOM擴展
- 5. DOM部分擴展
- 6. HTML5之DOM擴展
- 7. [JavaScript]DOM擴展（一）
- 8. DOM 擴展 ：理解Selectors API、使用HTML5 DOM擴展、瞭解專有的DOM擴展
- 9. DOM方法總結及DOM庫擴展
- 10. JS-十一章:DOM擴展
- 更多相關文章...
- • Kotlin 擴展 - Kotlin 教程
- • Swift 擴展 - Swift 教程
- • NewSQL-TiDB相關
- • TiDB 在摩拜單車在線數據業務的應用和實踐
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. DOM Extensions(DOM擴展)
- 2. DOM的擴展
- 3. DOM擴展
- 4. ch11 DOM擴展
- 5. DOM部分擴展
- 6. HTML5之DOM擴展
- 7. [JavaScript]DOM擴展（一）
- 8. DOM 擴展 ：理解Selectors API、使用HTML5 DOM擴展、瞭解專有的DOM擴展
- 9. DOM方法總結及DOM庫擴展
- 10. JS-十一章:DOM擴展