1、JavaScript程序設(shè)計教程,軟件學(xué)院 胡 沛 2016年10月,第七章 DOM基礎(chǔ),DOM（Document Object Model，文檔對象模型）是由W3C制定的標(biāo)準(zhǔn)，它為應(yīng)用程序訪問和操作XML和HTML文檔提供了一套標(biāo)準(zhǔn)的API。 DOM可以分為3個部分：核心DOM接口以及針對XML和HTML的DOM標(biāo)準(zhǔn)接口。 JavaScript編程中使用的是HTML DOM，是在核心DOM的基礎(chǔ)上擴(kuò)展而來的。 DOM描繪了一個層次化的節(jié)點(diǎn)樹，允許開發(fā)人員添加、移除和修改頁面的某一部分。,7.1 DOM標(biāo)準(zhǔn) DOM是由W3C制定的標(biāo)準(zhǔn)，目前有3個不同的版本，分別稱之為DOM Level 13，

2、但瀏覽器廠商并沒有完全按照DOM標(biāo)準(zhǔn)來實(shí)現(xiàn)瀏覽器。 目前與DOM標(biāo)準(zhǔn)兼容最好的瀏覽器是Mozilla Filefox，它實(shí)現(xiàn)了絕大部分的DOM Level 2特性和少量DOM Level 3特性，而Internet Explorer在這方面落在最后，它對DOM Level 1的實(shí)現(xiàn)都還不完整，尚有很面有待完善。,7.1.1 什么是DOM DOM可以將任何HTML或XML文檔描繪成一個由多層節(jié)點(diǎn)構(gòu)成的結(jié)構(gòu)。節(jié)點(diǎn)分為幾種不同的類型，每種類型分別表示文檔中不同的信息或標(biāo)記。 DOM 是這樣規(guī)定的： 整個文檔是一個文檔節(jié)點(diǎn)。 每個 HTML 標(biāo)簽是一個元素節(jié)點(diǎn)。 包含在 HTML 元素中的文本是文本節(jié)

3、點(diǎn)。 每一個 HTML 屬性是一個屬性節(jié)點(diǎn)。 注釋屬于注釋節(jié)點(diǎn)。,7.2 使用DOM DOM在HTML頁面中的應(yīng)用包括以下幾類： （1）訪問指定節(jié)點(diǎn)； （2）訪問相關(guān)節(jié)點(diǎn)； （3）訪問節(jié)點(diǎn)屬性； （4）檢查節(jié)點(diǎn)類型； （5）創(chuàng)建節(jié)點(diǎn)； （6）操作節(jié)點(diǎn)。,7.2.1 訪問指定節(jié)點(diǎn) “訪問指定節(jié)點(diǎn)”的含義是已知節(jié)點(diǎn)的某個屬性（如id屬性、name屬性或者節(jié)點(diǎn)類型），在DOM樹中尋找符合條件的節(jié)點(diǎn)。 相關(guān)的方法包括getElementById()，getElementsByName()和getElementsByTagName。,1getElementById方法 應(yīng)用getElementById方

4、法可以根據(jù)傳入的id參數(shù)返回指定的元素節(jié)點(diǎn)。 在HTML文檔中，元素的id屬性是該元素對象的唯一標(biāo)識，因此getElementById方法是最快的節(jié)點(diǎn)訪問方法。 出于瀏覽器兼容考慮，表單中name名不要和其他元素的ID相同。,2getElementsByName方法 getElementsByName方法將查找所有元素對象，返回name屬性為指定值的元素對象列表。 常用在單選按鈕上。所有單選按鈕須有相同的name。 var input = document.getElementsByName(radio); alert(input0.value); alert(input.item(0).va

5、lue);,3getElementsByTagName方法 getElementsByTagName方法將返回指定類型的元素集合，與前面介紹的getElementById和getElementsByName方法不同，getElementsByTagName不僅可以用于Document對象，而且可以用于普通的Element對象。,7.2.2 訪問元素屬性 DOM又定義了3個元素方法來幫助訪問屬性： （1）getAttribute(name)：相當(dāng)于attributes.getNamedItem(name).value； getAttribute()還可以取得自定義特性的特性值。 （2）remov

6、eAttribute(name)：相當(dāng)于attributes.removeNamedItem(name)。,（3）setAttribute(name, value)：相當(dāng)于attributes.getNamedItem(name).value = value； 接受兩個參數(shù)：要設(shè)置的特性名和值。如果存在，會替換原有值；如果不存在，會創(chuàng)建該屬性并賦值。, HTML Sample Page function init() var img = document.getElementById(img1); var all_attr = document.getElementById(img1).att

7、ributes; var src_attr = all_attr.getNamedItem(src); alert(img.className); alert(img.getAttribute(className); var src_attr = img.getAttribute (src); alert(src_attr); img.setAttribute(test1,123); alert(img.test1); ,7.2.3 訪問相關(guān)節(jié)點(diǎn) “訪問相關(guān)節(jié)點(diǎn)”的含義是根據(jù)已知的節(jié)點(diǎn)，尋找和它存在聯(lián)系的節(jié)點(diǎn)，如父節(jié)點(diǎn)、子節(jié)點(diǎn)、兄弟節(jié)點(diǎn)等。 1documentElement屬性 通過docum

8、entElement屬性可以很方便地訪問到HTML文檔的根節(jié)點(diǎn)，即元素。 2ownerDocument屬性 ownerDocument屬性也是在Node接口中定義的，該屬性返回了DOM節(jié)點(diǎn)所在的文檔對象。,文檔中所有的節(jié)點(diǎn)之間都存在這樣或那樣的關(guān)系，節(jié)點(diǎn)間的各種關(guān)系可以用傳統(tǒng)的家族關(guān)系來描述。 每個節(jié)點(diǎn)都有一個childNodes屬性，也都有一個parnetNode屬性，該屬性指向文檔樹中的父節(jié)點(diǎn)。 包含在childNodes列表中的所有節(jié)點(diǎn)都有相同的父節(jié)點(diǎn)，因此他們的parentNode屬性都指向同一個節(jié)點(diǎn)。此外，包含在childNodes列表中的每個節(jié)點(diǎn)相互之間都是兄弟節(jié)點(diǎn)，具有previ

9、ousSibling和nextSibling屬性。,3訪問子節(jié)點(diǎn) Node接口定義了以下的屬性，可以用于訪問DOM節(jié)點(diǎn)的子節(jié)點(diǎn)： （1）childNodes：子節(jié)點(diǎn)的列表； （2）firstChild：第一個子節(jié)點(diǎn)； （3）lastChild：最后一個子節(jié)點(diǎn)。,4訪問父節(jié)點(diǎn) Node接口定義了parentNode屬性，可以用于訪問DOM節(jié)點(diǎn)的父節(jié)點(diǎn)。 5訪問兄弟節(jié)點(diǎn) Node接口還定義了以下的屬性，用于訪問DOM節(jié)點(diǎn)的兄弟節(jié)點(diǎn)： （1）previousSibling：上一個兄弟節(jié)點(diǎn)； （2）nextSibling：下一個兄弟節(jié)點(diǎn)。,7.2.4 創(chuàng)建節(jié)點(diǎn) DOM標(biāo)準(zhǔn)中用于創(chuàng)建節(jié)點(diǎn)的方法包括： （

10、1）createElement方法：創(chuàng)建HTML元素； （2）createTextNode：創(chuàng)建文本節(jié)點(diǎn)； （3）createDocumentFragment方法：創(chuàng)建DOM文檔片段； （4）cloneNode方法：通過復(fù)制已有節(jié)點(diǎn)創(chuàng)建新節(jié)點(diǎn)。,1createElement方法 createElement方法用于在HTML文檔中創(chuàng)建新的元素。 2createTextNode方法 createTextNode方法可以用于創(chuàng)建一個新的文本節(jié)點(diǎn)。 3createDocumentFragment方法 createDocumentFragment方法可以創(chuàng)建一個文檔片段（DocumentFragment

11、），在文檔片段中可以添加各種節(jié)點(diǎn)，最后一次性添加到HTML頁面中。 使用這種方式可以減少頁面更新的次數(shù)，提高頁面展示的效率。,4cloneNode方法 cloneNode方法使得我們可以在DOM使用“模板”方式創(chuàng)建節(jié)點(diǎn)，這對于需要在頁面中創(chuàng)建大量類似節(jié)點(diǎn)的情況特別有用。 可以首先創(chuàng)建一個“模板”節(jié)點(diǎn)，創(chuàng)建新節(jié)點(diǎn)時首先調(diào)用cloneNode方法獲得“模板”節(jié)點(diǎn)的副本，然后根據(jù)實(shí)際應(yīng)用的需要對該副本節(jié)點(diǎn)進(jìn)行局部內(nèi)容的修改。 接收兩個參數(shù)，如果參數(shù)為true為深復(fù)制，也就是復(fù)制節(jié)點(diǎn)及其整個子節(jié)點(diǎn)樹；如果參數(shù)為false。為淺復(fù)制，只復(fù)制節(jié)點(diǎn)本身。,7.2.5 操作節(jié)點(diǎn) 操作DOM節(jié)點(diǎn)可以使用標(biāo)準(zhǔn)的D

12、OM方法，如appendChild()，removeChild() 1使用DOM標(biāo)準(zhǔn)方法 （1）appendChild：為當(dāng)前節(jié)點(diǎn)新增一個子節(jié)點(diǎn)，并且將其作為最后一個子節(jié)點(diǎn)。 appendChild()向childNodes列表的末尾添加一個節(jié)點(diǎn)。添加完成后更新相關(guān)信息。 如果傳入到appenChild()中的節(jié)點(diǎn)已經(jīng)是文檔的一部分，那結(jié)果就是將該節(jié)點(diǎn)從原來的位置轉(zhuǎn)移到新位置。,（2）insertBefore：為當(dāng)前節(jié)點(diǎn)新增一個子節(jié)點(diǎn)，將其插入到指定的子節(jié)點(diǎn)之前。 如果需要把節(jié)點(diǎn)放在childNodes列表中某個特定位置上，而不是末尾，可以使用insertBefore()方法，第一個參數(shù)為要插

13、入的節(jié)點(diǎn)，第二個參數(shù)作為參照的節(jié)點(diǎn)。 （3）replaceChild：將當(dāng)前節(jié)點(diǎn)的某個子節(jié)點(diǎn)替換為其他節(jié)點(diǎn)。 接收兩個參數(shù)：要插入的節(jié)點(diǎn)和要替換的節(jié)點(diǎn)。 （4）removeChild：刪除當(dāng)前節(jié)點(diǎn)的某個子節(jié)點(diǎn)。,補(bǔ)充 innerText屬性 可以操作元素中包含的所有文本內(nèi)容。 innerHTML屬性 其處理的是HTML字符串，而innerText處理的是普通文本字符串。 innerHTML是符合W3C標(biāo)準(zhǔn)的屬性，而innerText只適用于IE瀏覽器。,小 結(jié),本章首先對DOM標(biāo)準(zhǔn)進(jìn)行了介紹，講解了如何使用JavaScript進(jìn)行DOM編程，然后結(jié)合常見的應(yīng)用場景，通過多個示例說明如何通過DOM編程解決Web應(yīng)用