這篇文章主要介紹了JavaScript的DOM實(shí)例分析的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇JavaScript的DOM實(shí)例分析文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、網(wǎng)絡(luò)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、木蘭網(wǎng)站維護(hù)、網(wǎng)站推廣。

一、DOM

文檔對(duì)象模型（簡(jiǎn)稱DOM），是W3C組織推薦的處理可擴(kuò)展標(biāo)記語(yǔ)言（HTML或者XML）的標(biāo)準(zhǔn)編程接口。W3C已經(jīng)定義了一系列的DOM接口，通過(guò)這些DOM接口可以改變網(wǎng)頁(yè)的內(nèi)容、結(jié)構(gòu)和樣式。

二、DOM樹

DOM把以上內(nèi)容都看做是對(duì)象，我們獲取過(guò)來(lái)的DOM元素是一個(gè)對(duì)象（object），所以稱為文檔對(duì)象模型。

文檔：一個(gè)頁(yè)面就是一個(gè)文檔，DOM中使用document表示。

元素：頁(yè)面中的所有標(biāo)簽都是元素，DOM中使用element表示。

節(jié)點(diǎn)：網(wǎng)頁(yè)中的所有內(nèi)容都是節(jié)點(diǎn)（標(biāo)簽、屬性、文本、注釋等），DOM中使用node表示。

三、DOM操作

1·1 獲取元素

獲取頁(yè)面中元素可以使用以下幾種方式：

根據(jù)ID獲取，getElementById('ID名')；

根據(jù)標(biāo)簽名獲取，getElementsByTagName('標(biāo)簽名')；

通過(guò)HTML5新增的方法獲取，getElementsByClassName('類名)，document.querySelector('（./#）選擇器')，document.querySelectorAll（'（./#）選擇器')；

特殊元素獲取，document.body;（獲取body元素），document.documentElement;（獲取html元素）；

注意：

通過(guò)標(biāo)簽名獲?。阂?yàn)榈玫降氖且粋€(gè)對(duì)象的集合，所以我們想要操作里面的元素就需要遍歷，得到元素對(duì)象是動(dòng)態(tài)的。

根據(jù)ID獲取元素是唯一的。

H5新增方法：根據(jù)類名返回的是元素對(duì)象集合。根據(jù)指定選擇器返回的是第一個(gè)元素對(duì)象。

1·2 事件基礎(chǔ)

事件概述：JavaScript使我們有能力創(chuàng)建動(dòng)態(tài)頁(yè)面，而事件是可以被JavaScript偵測(cè)到的行為。

簡(jiǎn)單理解：觸發(fā)——響應(yīng)機(jī)制。

網(wǎng)頁(yè)中的每個(gè)元素都可以產(chǎn)生某些可以觸發(fā)JavaScript的事件。

事件是有三部分組成 ：事件源 事件類型 事件處理程序 我們也稱為事件三要素

例如：

執(zhí)行事件的步驟：

 例如：

1·3 鼠標(biāo)事件

 補(bǔ)充鼠標(biāo)事件：

mouseenter：移入事件。

mouseleave：移出事件。

contextmenu：右鍵事件。

selectstart：禁止鼠標(biāo)選中。

1·4 鍵盤事件

 例如：

1·5 操作元素

JavaScript的DOM操作可以改變網(wǎng)頁(yè)內(nèi)容、結(jié)構(gòu)和樣式，我們可以利用DOM操作元素來(lái)改變?cè)乩锩娴膬?nèi)容、屬性等。

1·5·1 改變?cè)貎?nèi)容

element.innerText;從起始位置到終止位置的內(nèi)容，但它去除html標(biāo)簽，同時(shí)空格和換行也會(huì)去掉

element.innerHTML;起始位置到終止位置的全部?jī)?nèi)容，包括html標(biāo)簽，同時(shí)保留空格和換行

例如：

關(guān)于“JavaScript的DOM實(shí)例分析”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“JavaScript的DOM實(shí)例分析”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。