OM是什么

• DOM（Document Object Model 文檔對象模型）是W3C的標(biāo)準(zhǔn)，是所有瀏覽器公共遵守的標(biāo)準(zhǔn)。

• DOM的設(shè)計(jì)是以對象管理組織（OMG）的規(guī)約為基礎(chǔ)的，因此可以用于任何編程語言。最初人們把它認(rèn)為是一種讓JavaScript在瀏覽器間可移植的方法，不過DOM的應(yīng)用已經(jīng)遠(yuǎn)遠(yuǎn)超出這個(gè)范圍。

• DOM定義了訪問 HTML 和 XML 文檔的標(biāo)準(zhǔn)，是HTML和XML的應(yīng)用程序接口（API），它允許程序和腳本動(dòng)態(tài)地訪問和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。Dom技術(shù)使得用戶頁面可以動(dòng)態(tài)地變化，如可以動(dòng)態(tài)地顯示或隱藏一個(gè)元素，改變它們的屬性，增加一個(gè)元素等，Dom技術(shù)使得頁面的交互性大大地增強(qiáng)。

HTML DOM

當(dāng)網(wǎng)頁被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁面的文檔對象模型（Document Object Model）。HTML DOM 模型被構(gòu)造為對象的樹，這種結(jié)構(gòu)被稱為節(jié)點(diǎn)樹：

通過 HTML DOM，樹中的所有節(jié)點(diǎn)均可通過 JavaScript 進(jìn)行訪問。所有 HTML 元素（節(jié)點(diǎn)）均可被修改，也可以創(chuàng)建或刪除節(jié)點(diǎn)。

節(jié)點(diǎn)父、子和同胞

節(jié)點(diǎn)樹中的節(jié)點(diǎn)彼此擁有層級關(guān)系。

父（parent）、子（child）和同胞（sibling）等術(shù)語用于描述這些關(guān)系。父節(jié)點(diǎn)擁有子節(jié)點(diǎn)。同級的子節(jié)點(diǎn)被稱為同胞（兄弟或姐妹）。

• 在節(jié)點(diǎn)樹中，頂端節(jié)點(diǎn)被稱為根（root）

• 每個(gè)節(jié)點(diǎn)都有父節(jié)點(diǎn)、除了根（它沒有父節(jié)點(diǎn)）

• 一個(gè)節(jié)點(diǎn)可擁有任意數(shù)量的子

• 同胞是擁有相同父節(jié)點(diǎn)的節(jié)點(diǎn)

下面的圖片展示了節(jié)點(diǎn)樹的一部分，以及節(jié)點(diǎn)之間的關(guān)系：

編程接口

可通過 JavaScript （以及其他編程語言）對 HTML DOM 進(jìn)行訪問。所有 HTML 元素被定義為對象，而編程接口則是對象方法和對象屬性。

HTML DOM Document 對象

當(dāng)瀏覽器載入 HTML 文檔, 它就會(huì)成為 document 對象。document 對象是HTML文檔的根節(jié)點(diǎn)與所有其他節(jié)點(diǎn)（元素節(jié)點(diǎn)，文本節(jié)點(diǎn)，屬性節(jié)點(diǎn), 注釋節(jié)點(diǎn)）。Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進(jìn)行訪問。提示：Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進(jìn)行訪問。

• document.activeElement 屬性返回文檔中當(dāng)前獲得焦點(diǎn)的元素

• document.addEventListener() 函數(shù)用于向文檔添加事件句柄

• document.adoptNode(node) 函數(shù)從另外一個(gè)文檔返回 adapded 節(jié)點(diǎn)到當(dāng)前文檔

• document.anchors 屬性集合返回了當(dāng)前頁面的所有超級鏈接數(shù)組

• document.applets返回對文檔中所有 Applet 對象的引用

• document.baseURI 屬性返回 HTML 文檔的基礎(chǔ)URI

• document.body 屬性返回文檔的body元素

• document.close()用于關(guān)閉瀏覽器窗口

• document.cookie 屬性返回當(dāng)前文檔所有 鍵/值 對的所有 cookies

• document.createAttribute() 函數(shù)用于創(chuàng)建一個(gè)指定名稱的屬性，并返回Attr 對象屬性

• document.createComment() 函數(shù)可創(chuàng)建注釋節(jié)點(diǎn)

• document.createDocumentFragment() 函數(shù)創(chuàng)建了一虛擬的節(jié)點(diǎn)對象，節(jié)點(diǎn)對象包含所有屬性和方法

• document.createElement() 函數(shù)通過指定名稱創(chuàng)建一個(gè)元素

• document.createTextNode() 函數(shù)可創(chuàng)建文本節(jié)點(diǎn)

• document.doctype 屬性可返回與文檔相關(guān)的文檔類型聲明（Document Type Declaration）

• document.documentElement 屬性以一個(gè)元素對象返回一個(gè)文檔的文檔元素

• document.documentMode 屬性返回瀏覽器渲染文檔的模式

• document.documentURI 屬性可設(shè)置或返回文檔的位置

• document.domain 屬性可返回下載當(dāng)前文檔的服務(wù)器域

• document.domConfig 屬性 返回normalizeDocument()被調(diào)用時(shí)所使用的配置

• document.embeds 集合 返回文檔中所有嵌入的內(nèi)容（embed）集合

• document.forms 集合返回當(dāng)前頁面所有表單的數(shù)組集合

• document. getElementsByClassName() 函數(shù)返回文檔中所有指定類名的元素集合，作為 NodeList 對象

• document.getElementById() 函數(shù)可返回對擁有指定 ID 的第一個(gè)對象的引用

• document.getElementsByName() 函數(shù)可返回帶有指定名稱的對象的集合

• document.getElementsByTagName() 函數(shù)可返回帶有指定標(biāo)簽名的對象的集合

• document.images 集合返回當(dāng)前文檔中所有圖片的數(shù)組

• document.implementation 屬性可返回處理該文檔的 DOMImplementation 對象

• document.importNode() 函數(shù)把一個(gè)節(jié)點(diǎn)從另一個(gè)文檔復(fù)制到該文檔以便應(yīng)用

• document.inputEncoding 屬性可返回文檔的編碼（在解析時(shí)）

• document.lastModified 屬性可返回文檔最后被修改的日期和時(shí)間

• document.links 集合返回當(dāng)期文檔所有鏈接的數(shù)組

• document.normalize() 函數(shù)合并相鄰的文本節(jié)點(diǎn)并刪除空的文本節(jié)點(diǎn)

• document.normalizeDocument() 函數(shù)可以移除空文本節(jié)點(diǎn) , 并合并相鄰節(jié)點(diǎn)

• document.open() 函數(shù)打開一個(gè)輸出流來收集 document.write() 或 document.writeln() 方法輸出的內(nèi)容

• document.querySelector() 函數(shù)返回文檔中匹配指定 CSS 選擇器的一個(gè)元素

• document.querySelectorAll() 函數(shù) document.querySelectorAll() 是 HTML5中引入的新方法，返回文檔中匹配的CSS選擇器的所有元素節(jié)點(diǎn)列表

• document.readyState 屬性返回當(dāng)前文檔的狀態(tài)（載入中……）

• document.referrer 屬性返回載入當(dāng)前文檔的來源文檔的URL

• document.removeEventListener() 函數(shù)用于移除由 document.addEventListener() 方法添加的事件句柄

• document.scripts 集合返回頁面中所有腳本的集合

• document.strictErrorChecking 屬性可設(shè)置或返回是否強(qiáng)制進(jìn)行錯(cuò)誤檢查（error-checking）

• document.title 屬性可返回當(dāng)前文檔的標(biāo)題（ HTML title 元素中的文本）

• document.URL 屬性可返回當(dāng)前文檔的 URL

• document.write() 函數(shù)可向文檔寫入 HTML 表達(dá)式或 JavaScript 代碼

• document.writeln() 函數(shù)與 write() 方法作用相同，外加可在每個(gè)表達(dá)式后寫一個(gè)換行符

HTML DOM 元素 (Element) 對象

在 HTML DOM 中, 元素對象代表著一個(gè) HTML 元素。元素對象 的 子節(jié)點(diǎn)可以是, 可以是元素節(jié)點(diǎn)，文本節(jié)點(diǎn)，注釋節(jié)點(diǎn)。NodeList 對象 代表了節(jié)點(diǎn)列表，類似于 HTML元素的子節(jié)點(diǎn)集合。所有主流瀏覽器都支持元素對象和NodeList 對象。

• element.accessKey 屬性可設(shè)置或返回訪問單選按鈕的快捷鍵

• element.addEventListener() 函數(shù)用于向指定元素添加事件句柄

• element.appendChild() 函數(shù)http://techbrood.com/jsref?p=met-node-appendchild

• element.attributes 屬性返回指定節(jié)點(diǎn)屬性的集合

• element.childNodes 屬性返回包含被選節(jié)點(diǎn)的子節(jié)點(diǎn)的 NodeList

• element.classlist 屬性返回元素的類名，作為 DOMTokenList 對象

• element.className 屬性設(shè)置或返回元素的 class 屬性

• element.clientHeight 屬性在頁面上返回內(nèi)容的可視高度（不包括邊框，邊距或滾動(dòng)條）

• element.clientWidth 屬性在頁面上返回內(nèi)容的可視寬度（不包括邊框，邊距或滾動(dòng)條）

• element.cloneNode() 函數(shù)可創(chuàng)建指定的節(jié)點(diǎn)的精確拷貝，拷貝所有屬性和值，該方法將復(fù)制并返回調(diào)用它的節(jié)點(diǎn)的副本。如果傳遞給它的參數(shù)是 true，它還將遞歸復(fù)制當(dāng)前節(jié)點(diǎn)的所有子孫節(jié)點(diǎn)。否則，它只復(fù)制當(dāng)前節(jié)點(diǎn)。

• element.compareDocumentPosition() 函數(shù)按照文檔順序，比較當(dāng)前節(jié)點(diǎn)與指定節(jié)點(diǎn)的文檔位置

• element.contentEditable 屬性用于設(shè)置或返回元素的內(nèi)容是否可編輯

• element.dir 屬性設(shè)置或返回元素的文字方向

• element.firstChild 屬性返回被選節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)，如果選定的節(jié)點(diǎn)沒有子節(jié)點(diǎn)則該屬性返回NULL

• element.focus() 函數(shù)用于為元素設(shè)置焦點(diǎn)（如果可以設(shè)置）

• element.getAttribute() 函數(shù)通過名稱獲取屬性的值

• element.getAttributeNode() 函數(shù)從當(dāng)前元素中通過名稱獲取屬性節(jié)點(diǎn)

• element.getElementsByTagName() 函數(shù)可返回帶有指定標(biāo)簽名的對象的集合

• element. getElementsByClassName() 函數(shù)返回文檔中所有指定類名的元素集合，作為 NodeList 對象

• element.getFeature() 函數(shù)返回指定特征的執(zhí)行APIs對象

• element.getUserData() 函數(shù)返回一個(gè)元素中關(guān)聯(lián)鍵值的對象

• element.hasAttribute() 函數(shù)通過名稱獲取屬性的值

• element.hasAttributes() 函數(shù)如果某節(jié)點(diǎn)有任何屬性時(shí)返回 true，否則返回 false

• element.hasChildNodes() 函數(shù)可在某節(jié)點(diǎn)用于任何子節(jié)點(diǎn)時(shí)返回 true，否則返回 fals

• element.hasfocus() 函數(shù)返回布爾值，用于檢測文檔(或文檔內(nèi)的任一元素)是否獲取焦點(diǎn)

• element.id 屬性設(shè)置或者發(fā)回元素的id

• element.innerHTML 屬性設(shè)置或返回表格行的開始和結(jié)束標(biāo)簽之間的 HTML

• element.insertBefore() 函數(shù)可在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)

• element.isContentEditable 屬性返回元素的內(nèi)容是否可編輯

• element.isDefaultNamespace() 函數(shù)如果指定的命名空間是默認(rèn)的 ，isDefaultNamespace() 方法返回 true，否則返回 false

• element.isEqualNode() 函數(shù)用于檢查兩個(gè)節(jié)點(diǎn)是否相等

• element.isSameNode() 函數(shù)可在某個(gè)節(jié)點(diǎn)與給定的節(jié)點(diǎn)是同一個(gè)節(jié)點(diǎn)時(shí)返回 true，否則返回 false

• element.isSupported() 函數(shù)用于判斷當(dāng)前節(jié)點(diǎn)是否支持某個(gè)特性

• element.lang 屬性設(shè)置或返回元素的語言

• element.lastChild 屬性可返回文檔的最后一個(gè)子節(jié)點(diǎn)

• element.namespaceURI 屬性為被選節(jié)點(diǎn)返回命名空間的 URI

• element.nextSibling 屬性可返回某個(gè)元素之后緊跟的元素（處于同一樹層級中）

• element.nodeName 屬性可依據(jù)節(jié)點(diǎn)的類型返回其名稱

• element.nodeType 屬性屬性返回節(jié)點(diǎn)類型

• element.nodeValue 屬性根據(jù)節(jié)點(diǎn)的類型設(shè)置或返回節(jié)點(diǎn)的值

• element.normalize() 函數(shù)合并相鄰的文本節(jié)點(diǎn)并刪除空的文本節(jié)點(diǎn)

• element.offsetHeight 屬性返回任何一個(gè)元素的高度包括邊框和填充，但不是邊距

• element.offsetWidth 屬性返回元素的寬度，包括邊框和填充，但不是邊距

• element.offsetLeft 屬性返回當(dāng)前元素的相對水平偏移位置的偏移容器

• element.offsetParent 屬性返回元素的偏移容器

• element.offsetTop 屬性返回當(dāng)前元素的相對垂直偏移位置的偏移容器

• element.ownerDocument 屬性可返回某元素的根元素

• element.parentNode 屬性可返回某節(jié)點(diǎn)的父節(jié)點(diǎn)

• element.previousSibling 屬性可返回某節(jié)點(diǎn)之前緊跟的節(jié)點(diǎn)（處于同一樹層級）

• element.querySelector() 函數(shù)返回匹配指定 CSS 選擇器元素的第一個(gè)子元素

• document.querySelectorAll() 函數(shù)返回匹配指定 CSS 選擇器元素的所有子元素節(jié)點(diǎn)列表

• element.removeAttribute() 函數(shù)刪除指定的屬性

• element.removeAttributeNode() 函數(shù)從元素中刪除指定的屬性節(jié)點(diǎn)

• element.removeChild() 函數(shù)可從子節(jié)點(diǎn)列表中刪除某個(gè)節(jié)點(diǎn)

• element.removeEventListener() 函數(shù)用于移除由 addEventListener() 方法添加的事件句柄

• element.replaceChild() 函數(shù)可將某個(gè)子節(jié)點(diǎn)替換為另一個(gè)，新節(jié)點(diǎn)可以是文本中已存在的，或者是你新創(chuàng)建的

• element.scrollHeight 屬性返回整個(gè)元素的高度（包括帶滾動(dòng)條的隱蔽的地方）

• element.scrollLeft 屬性返回當(dāng)前視圖中的實(shí)際元素的左邊緣和左邊緣之間的距離

• element.scrollTop 屬性返回當(dāng)前視圖中的實(shí)際元素的頂部邊緣和頂部邊緣之間的距離

• element.scrollWidth 屬性返回元素的整個(gè)寬度（包括帶滾動(dòng)條的隱蔽的地方）

• element.setAttribute() 函數(shù)創(chuàng)建或改變某個(gè)新屬性，如果指定屬性已經(jīng)存在,則只設(shè)置該值

• element.setAttributeNode() 函數(shù)用于添加新的屬性節(jié)點(diǎn)

• element.setIdAttribute() 函數(shù)

• element.setIdAttributeNode() 函數(shù)

• element.setUserData() 函數(shù)在元素中為指定鍵值關(guān)聯(lián)對象

• element.style 屬性設(shè)置或返回元素的樣式屬性

• element.tabIndex 屬性可設(shè)置或返回單選按鈕的 tab 鍵控制次序

• element.tagName 屬性返回元素的標(biāo)簽名

• element.textContent 屬性設(shè)置或者返回指定節(jié)點(diǎn)的文本內(nèi)容

• element.title 屬性設(shè)置或返回元素的標(biāo)題

• element.toString() 函數(shù) 一個(gè)元素轉(zhuǎn)換成字符串

• nodelist.item() 函數(shù)返回一個(gè)節(jié)點(diǎn)列表中指定索引的節(jié)點(diǎn)

• nodelist.length 屬性返回節(jié)點(diǎn)集合的數(shù)目

HTML DOM 屬性 (Attr) 對象

在 HTML DOM 中, Attr 對象 代表一個(gè) HTML 屬性。所有主流瀏覽器都支持 Attr 對象和 NamedNodeMap 對象 (在HTML DOM中, NamedNodeMap對象表示一個(gè)無順序的節(jié)點(diǎn)列表, 我們可通過節(jié)點(diǎn)名稱來訪問 NamedNodeMap 中的節(jié)點(diǎn))

• attr.isId 屬性如果屬性是 ID 類型（例如，包含了其所屬的元素的標(biāo)識符），則 isId 屬性返回 true，否則返回 false

• name 屬性返回屬性名稱

• value 屬性用于設(shè)置或者返回屬性的值。

• specified 屬性如果在文檔中設(shè)置了屬性值，則specified屬性返回 true，如果是 DTD/Schema 中的默認(rèn)值，則返回 false

• length 屬性可返回集合中節(jié)點(diǎn)的選項(xiàng)數(shù)目

• getNamedItem() 函數(shù)返回節(jié)點(diǎn)列表中指定屬性名的值

• item() 函數(shù)可返回節(jié)點(diǎn)列表中處于指定索引號的節(jié)點(diǎn)

• removeNamedItem() 函數(shù)可刪除指定的節(jié)點(diǎn)

• setNamedItem() 函數(shù)用于添加指定節(jié)點(diǎn)。如果節(jié)點(diǎn)已經(jīng)存在，它將被替換，并返回替換節(jié)點(diǎn)的值，否則將返回 null。

HTML DOM 事件 (Event) 對象

事件允許Javascript在HTML文檔元素中注冊不同事件處理程序。事件通常與函數(shù)結(jié)合使用，函數(shù)不會(huì)在事件發(fā)生前被執(zhí)行！

• 鼠標(biāo)事件

• onclick事件會(huì)在元素被點(diǎn)擊時(shí)發(fā)生

• oncontextmenu事件在元素中用戶右擊鼠標(biāo)時(shí)觸發(fā)并打開上下文菜單

• ondblclick事件會(huì)在對象被雙擊時(shí)發(fā)生

• onmousedown事件會(huì)在鼠標(biāo)按鍵被按下時(shí)發(fā)生。

• onmouseenter事件在鼠標(biāo)指針移動(dòng)到元素上時(shí)觸發(fā)

• onmouseleave事件在鼠標(biāo)移除元素時(shí)觸發(fā)

• onmousemove事件會(huì)在鼠標(biāo)指針移出指定的對象時(shí)發(fā)生

• onmouseover事件會(huì)在鼠標(biāo)指針移動(dòng)到指定的元素上時(shí)發(fā)生

• onmouseout事件會(huì)在鼠標(biāo)指針移出指定的對象時(shí)發(fā)生

• onmouseup事件會(huì)在鼠標(biāo)按鍵被松開時(shí)發(fā)生

• 鍵盤事件

• onkeydown事件會(huì)在用戶按下一個(gè)鍵盤按鍵時(shí)發(fā)生

• onkeypress事件會(huì)在鍵盤按鍵被按下并釋放一個(gè)鍵時(shí)發(fā)生

• onkeyup事件會(huì)在鍵盤按鍵被松開時(shí)發(fā)生

• 框架/對象（Frame/Object）事件

• onabort事件在用戶中止加載 或提交元素時(shí)觸發(fā)

• onbeforeunload事件在即將離開當(dāng)前頁面（刷新或關(guān)閉）時(shí)觸發(fā)

• onerror事件在加載外部文件（文檔或圖像）發(fā)生錯(cuò)誤時(shí)觸發(fā)

• onhashchange事件在當(dāng)前 URL 的錨部分(以 '#' 號為開始) 發(fā)生改變時(shí)觸發(fā)

• onload事件會(huì)在頁面或圖像加載完成后立即發(fā)生

• onpageshow事件在用戶瀏覽網(wǎng)頁時(shí)觸發(fā)

• onpagehide事件在用戶離開網(wǎng)頁時(shí)觸發(fā)

• onresize事件會(huì)在窗口或框架被調(diào)整大小時(shí)發(fā)生

• onscroll事件在元素滾動(dòng)條在滾動(dòng)時(shí)觸發(fā)

• onunload事件在用戶退出頁面時(shí)發(fā)生

• 表單事件

• onblur事件會(huì)在對象失去焦點(diǎn)時(shí)發(fā)生

• onchange事件會(huì)在域的內(nèi)容改變時(shí)發(fā)生

• onfocus事件在對象獲得焦點(diǎn)時(shí)發(fā)生

• onfocusin事件在一個(gè)元素即將獲得焦點(diǎn)時(shí)觸發(fā)

• onfocusout事件在元素即將失去焦點(diǎn)時(shí)觸發(fā)

• oninput事件在用戶輸入時(shí)觸發(fā)

• onreset事件在表單被重置后觸發(fā)

• onsearch事件在用戶按下"ENTER（回車）" 按鍵或點(diǎn)擊 type="search" 的 元素的 "x(搜索)" 按鈕時(shí)觸發(fā)

• onselect事件會(huì)在文本框中的文本被選中時(shí)發(fā)生

• onsubmit事件在表單提交時(shí)觸發(fā)

• 剪貼板事件

• oncopy事件在用戶拷貝元素上的內(nèi)容時(shí)觸發(fā)

• oncut事件在用戶剪切元素的內(nèi)容時(shí)觸發(fā)

• onpaste事件在用戶向元素中粘貼文本時(shí)觸發(fā)

• 打印事件

• onafterprint事件在頁面打印后觸發(fā)，或者打印對話框已經(jīng)關(guān)閉

• onbeforeprint事件在頁面即將打印時(shí)觸發(fā) (在打印窗口出現(xiàn)前

• 拖動(dòng)事件

• ondrag事件在元素或者選取的文本被拖動(dòng)時(shí)觸發(fā)

• ondragend事件在用戶完成元素或首選文本的拖動(dòng)時(shí)觸發(fā)

• ondragenter事件在拖動(dòng)的元素或選擇的文本進(jìn)入到有效的放置目標(biāo)時(shí)觸發(fā)

• ondragleave事件在可拖動(dòng)的元素或選取的文本移出放置目標(biāo)時(shí)執(zhí)觸發(fā)

• ondragover事件在可拖動(dòng)元素或選取的文本正在拖動(dòng)到放置目標(biāo)時(shí)觸發(fā)

• ondragstart事件在用戶開始拖動(dòng)元素或選擇的文本時(shí)觸發(fā)

• ondrop事件在可拖動(dòng)元素或選取的文本放置在目標(biāo)區(qū)域時(shí)觸發(fā)

• 多媒體（Media）事件

• onabort事件在視頻/音頻（audio/video）終止加載時(shí)觸

• oncanplay事件在用戶可以開始播放視頻/音頻（audio/video）時(shí)觸發(fā)。

• oncanplaythrough事件在視頻/音頻（audio/video）可以正常播放且無需停頓和緩沖時(shí)觸發(fā)

• ondurationchange事件在視頻/音頻（audio/video）的時(shí)長發(fā)生變化時(shí)觸發(fā)

• onemptied當(dāng)期播放列表為空時(shí)觸發(fā)

• onended事件在視頻/音頻（audio/video）播放結(jié)束時(shí)觸發(fā)

• onerror事件在視頻/音頻（audio/video）數(shù)據(jù)加載期間發(fā)生錯(cuò)誤時(shí)觸發(fā)

• onloadeddata事件在當(dāng)前幀的數(shù)據(jù)加載完成且還沒有足夠的數(shù)據(jù)播放視頻/音頻（audio/video）的下一幀時(shí)觸發(fā)

• onloadedmetadata事件在指定視頻/音頻（audio/video）的元數(shù)據(jù)加載后觸發(fā)

• onloadstart事件在瀏覽器開始尋找指定視頻/音頻（audio/video）觸發(fā)

• onpause事件在視頻/音頻（audio/video）暫停時(shí)觸發(fā)

• onplay事件在視頻/音頻（audio/video）開始播放時(shí)觸發(fā)

• onplaying事件在視頻/音頻（audio/video）暫停或者在緩沖后準(zhǔn)備重新開始播放時(shí)觸發(fā)

• onprogress事件在瀏覽器下載指定的視頻/音頻（audio/video）時(shí)觸發(fā)

• onratechange事件在視頻/音頻（audio/video）的播放速度發(fā)生改變時(shí)觸發(fā)

• onseeked事件在用戶重新定位視頻/音頻（audio/video）的播放位置后觸發(fā)

• onseeking事件在用戶開始重新定位視頻/音頻（audio/video）時(shí)觸發(fā)

• onstalled事件在瀏覽器獲取媒體數(shù)據(jù)，但媒體數(shù)據(jù)不可用時(shí)觸發(fā)

• onsuspend事件在瀏覽器讀取媒體數(shù)據(jù)中止時(shí)觸發(fā)

• ontimeupdate事件在視頻/音頻（audio/video）當(dāng)前的播放位置發(fā)送改變時(shí)觸發(fā)

• onvolumechangehttp://techbrood.com/jsref?p=event-onvolumechange

• onwaiting事件在視頻由于要播放下一幀而需要緩沖時(shí)觸發(fā)

• 動(dòng)畫事件

• animationend事件在 CSS 動(dòng)畫完成后觸發(fā)

• animationiteration事件在 CSS 動(dòng)畫重新播放時(shí)觸發(fā)

• animationstart事件在 CSS 動(dòng)畫開始播放時(shí)觸發(fā)

• 過渡事件

• transitionend事件在 CSS 完成過渡后觸發(fā)

• 其他事件

• onmessage該事件通過或者從對象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息時(shí)觸發(fā)

• ononline事件在瀏覽器開始在線工作時(shí)觸發(fā)

• onoffline事件在瀏覽器離線工作時(shí)觸發(fā)

• onpopstate該事件在窗口的瀏覽歷史（history 對象）發(fā)生改變時(shí)觸發(fā)

• onshow事件當(dāng) <menu> 元素在上下文菜單顯示時(shí)觸發(fā)

• onstorage該事件在 Web Storage(HTML 5 Web 存儲)更新時(shí)觸發(fā)

• ontoggle事件在用戶打開或關(guān)閉 &lgt;details> 元素時(shí)觸發(fā)

• onwheel事件在鼠標(biāo)滾輪在元素上下滾動(dòng)時(shí)觸發(fā)

s一個(gè)非常重要的作用就是對dom進(jìn)行操作，所謂的dom，可以理解為html代碼里的一個(gè)個(gè)節(jié)點(diǎn)。比如，body標(biāo)簽元素就是一個(gè)dom。本文對js的dom操作進(jìn)行一些總結(jié)。

按照慣例，先上一個(gè)剛寫好的小例子，代碼在最后給出：

現(xiàn)在，來看看js對dom的一些操作吧。

首先，給出一個(gè)html模板，接下來開始用js來做一些有趣的事情吧，css樣式的繪制就不細(xì)說了，先上代碼：

css

*{margin: 0;padding: 0;}
.parent {
 width: 305px;
 height: 302px;
 background: #d7e6ea;
 margin: 100px auto;
 
}
.parent .child {
 width: 80px;
 height: 80px;
 background: deepskyblue;
 float: left;
 margin-top: 10px;
 margin-left: 9px;
 margin-right: 12px;
 margin-bottom: 12px;
 box-shadow: 3px -3px 2px #9898c7;
 text-align: center;
 line-height: 80px;
 font-family: "微軟雅黑";
 font-size: 28px;
 text-shadow: 2px 2px 2px yellowgreen;
}

html

<body>
 <div class='parent'>
 <div class='child'>1</div>
 <div class='child'>2</div>
 <div class='child'>3</div>
 <div class='child'>4</div>
 <div class='child'>5</div>
 <div class='child'>6</div>
 <div class='child'>7</div>
 <div class='child'>8</div>
 <div class='child'>9</div>
 </div>
</body>

效果圖

從代碼中，我們可以看到，body是一個(gè)大節(jié)點(diǎn)，里面套了一個(gè)class屬性為parent的div盒子，然后我們又在這個(gè)盒子里面放了9個(gè)小盒子。

1.最簡單的dom方法封裝

在本系列中，假設(shè)我們不考慮用jQuery。

現(xiàn)在給第三個(gè)盒子添加一個(gè)id。

<div id='targetBox' class='child'>3</div>

如何拿到這個(gè)盒子呢？

很顯然，最先想到的肯定是document.getElementById() 方法，于是就有了這樣的代碼。

var box = document.getElementById('targetBox');
box.style.background = '#FEAF51';

效果：

當(dāng)然，我們很多時(shí)候都不希望每次都把document.getElementById（id）給寫一遍，那么，是不是可以將這一個(gè)過程封裝起來呢？

于是，自然而然的，我們會(huì)這么寫：

//獲取JavaScript的dom對象
function dom(id){
 return document.getElementById(id);
};
var box = dom('targetBox');
box.style.background = '#FEAF51';

完美運(yùn)行，我們知道，在jQuery中，是這樣的：

var box = $('#targetBox');

那么，為了讓代碼更加山寨，不妨將dom方法稍微改進(jìn)一下嘞！

//獲取JavaScript的dom對象
function dom(id){
 if(id.toString().indexOf('#') != -1) {
 id = id.replace('#','');
 }
 return document.getElementById(id);
};
var box = dom('#targetBox');
box.style.background = '#FEAF51';

2.如何獲取dom元素在父盒子中的位置？

剛才，我們已經(jīng)獲得了編號為3的div盒子，要得到它在父盒子的角標(biāo)位置，首先肯定要拿到它的父盒子對象吧。

像這樣：

var box = dom('#targetBox');
var parent = box.parentElement;

parent打印出來是這樣的：

看來很順利呢，接下來因?yàn)橐滥繕?biāo)元素在父盒子的位置，則需要拿到父盒子所有的孩子節(jié)點(diǎn)。

像這樣：

var children = parent.children;

打印結(jié)果：

接下來就要遍歷這些孩子節(jié)點(diǎn)啦，children 的數(shù)據(jù)類型是object。

然而，在js中我們可以遍歷數(shù)組，卻無法直接遍歷object，咋辦呢？

原來，這是一個(gè)特殊的object，因?yàn)樗幸粋€(gè)length屬性。有l(wèi)ength屬性的object，可以通過以下方式轉(zhuǎn)換成數(shù)組（注：當(dāng)然，這邊也可以直接獲取獲取object中的length，然后來遍歷。）：

Array.prototype.slice.call(object);

舉個(gè)例子：

var obj ={length:2,0:'first',1:'second'};
objArr = Array.prototype.slice.call(obj);
alert(objArr);

結(jié)果：

注1： length是幾個(gè)，就轉(zhuǎn)換幾個(gè)，如果你length寫1，那么只彈出first。

注2： key必須為數(shù)字，而且與數(shù)組的角標(biāo)是對應(yīng)的。

這里不深究call的的意思，我會(huì)在以后重新寫這方面的內(nèi)容。

回到正題，現(xiàn)在可以拿到數(shù)組形式的children了！

var children = Array.prototype.slice.call(parent.children);

開始遍歷：

for(var i = 0,len = children.length;i < len;i++){
 if(children[i] == box){
 alert(i);
 }
}

結(jié)果：

彈出來下標(biāo)是2，因?yàn)閿?shù)組下標(biāo)的起始值是從0開始的。

上面的循環(huán)結(jié)構(gòu)還欠缺了一個(gè)東西，就是一旦找到box之后，因?yàn)榧皶r(shí)退出循環(huán)才是。像這樣：

for(var i = 0,len = children.length;i < len;i++){
 if(children[i] == box){
 alert(i);
 break;
 }
}

這樣便可以一定程度地提高性能。順便附上forEach的寫法：

children.forEach(function(child,index){
 if(child == box){
 alert(index);
 return false;
 }
});

這樣也可以，最后，將這些內(nèi)容封裝成方法，就采用forEach的方式吧！

//查找當(dāng)前dom元素在父盒子中的位置
function getIndex(dom){
 var index = -1;
 var domArr = Array.prototype.slice.call(dom.parentElement.children);
 domArr.forEach(function(obj,i){
 if(obj==dom){
 index = i;
 return false;
 }
 });
 return index;
};

我學(xué)習(xí)js的路線就是如此，先想盡辦法把功能實(shí)現(xiàn)了，然后才開始封裝成方法。封裝的好處不言而喻，沒有人喜歡每次用到這個(gè)功能的時(shí)候，就去把實(shí)現(xiàn)代碼拷貝一份吧。

3.如何獲取parent下面指定class的元素列表？

parent盒子下面有9個(gè)孩子節(jié)點(diǎn)，我們能否通過一個(gè)什么辦法獲取到這9個(gè)孩子節(jié)點(diǎn)呢？顯然，這些孩子節(jié)點(diǎn)都有一個(gè)共同的className，那么我們可以通過這個(gè)className來獲取。

IE9 + 已經(jīng)可以通過下面的方式來實(shí)現(xiàn)了：

var children = parent.getElementsByClassName('child');

效果：

IE678還是不支持的，那么，如果讓我們自己來封裝一個(gè)方法，又該如何呢？

這里提供一種思路：

1.用getElementsByTagName獲取parent元素下所有的節(jié)點(diǎn)。

2.遍歷這些節(jié)點(diǎn)，比較className，如果相同，就用一個(gè)數(shù)組裝起來。

3.返回這個(gè)數(shù)組。

上代碼：

/*通過className獲取dom元素進(jìn)行過濾*/
function getClass(pid,sClass){
 var aEle = dom(pid).getElementsByTagName('*');
 var arrs = [];
 for(var i=0;i<aEle.length;i++){
 if(aEle[i].className.indexOf(sClass)!=-1){
 arrs.push(aEle[i]);
 }
 }
 return arrs;
}

最后，附上最開始小例子的源碼：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{margin: 0;padding: 0;}

body {

background: url(https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/skin/12.jpg?2) no-repeat;

background-size: 100% 128%;

overflow: hidden;

}

.content {

height: 600px;

width: 305px;

margin: 100px auto;

position: relative;

border-top:8px solid #ccc;

border-right:10px solid #ccc;

}

.content .screen {

height: 298px;

width: 305px;

background: #333;

position: absolute;

}

.content .screen .icon {

width: 78px;

height: 78px;

display: inline-block;

background: url(android.png) no-repeat;

background-size: 100% 100%;

position: absolute;

top: 50%;

left: 50%;

margin-top: -39px;

margin-left: -39px;

}

.parent {

width: 305px;

height: 302px;

background: #d7e6ea;

position: absolute;

bottom: 0px;

}

.parent .child {

width: 80px;

height: 80px;

background: #eee;

float: left;

margin-top: 10px;

margin-left: 9px;

margin-right: 12px;

margin-bottom: 12px;

box-shadow: 3px -3px 2px #9898c7;

text-align: center;

line-height: 80px;

font-family: "微軟雅黑";

font-size: 28px;

text-shadow: 2px 2px 2px yellowgreen;

}

.parent .child:hover {

cursor: pointer;

background: linear-gradient(#ccc,#666);

}

.putIn {

position: absolute;

width:100%;

height:60px;

line-height: 60px;

color: #fff;

bottom:0;

right: 0;/*為了讓padding起作用*/

text-align:right;

font-size: 40px;

overflow: hidden;

padding-right: 8px;

padding-bottom: 8px;

}

</style>

</head>

<body>

<div class="content">

<div class="screen">

<i class="icon"></i>

<span id="putIn" class="putIn"></span>

</div>

<div class='parent'>

<div class='child'>1</div>

<div class='child'>2</div>

<div id='targetBox' class='child'>3</div>

<div class='child'>4</div>

<div class='child'>5</div>

<div class='child'>6</div>

<div class='child'>7</div>

<div class='child'>8</div>

<div class='child'>9</div>

</div>

</div>

</body>

<script>

//獲取JavaScript的dom對象

function dom(id){

if(id.toString().indexOf('#') != -1) {

id = id.replace('#','');

}

return document.getElementById(id);

};

var buttons = document.getElementsByClassName('child');

var putIn = dom('#putIn');

for(var i = 0,len = buttons.length;i < len;i++){

buttons[i].onclick = function(){

var num = this.innerHTML;

if(putIn.innerText.length < 13 )

putIn.innerText = putIn.innerText + num;

}

}

</script>

</html>