第七章DOM基礎(chǔ)

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

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

3、文檔節(jié)點(diǎn)。 n每個(gè) HTML 標(biāo)簽是一個(gè)元素節(jié)點(diǎn)。 n包含在 HTML 元素中的文本是文本節(jié)點(diǎn)。 n每一個(gè) HTML 屬性是一個(gè)屬性節(jié)點(diǎn)。n注釋屬于注釋節(jié)點(diǎn)。n7.2 使用使用DOM nDOM在在HTML頁面中的應(yīng)用包括以下幾類：頁面中的應(yīng)用包括以下幾類：n（1）訪問指定節(jié)點(diǎn)；）訪問指定節(jié)點(diǎn)；n（2）訪問相關(guān)節(jié)點(diǎn)；）訪問相關(guān)節(jié)點(diǎn)；n（3）訪問節(jié)點(diǎn)屬性；）訪問節(jié)點(diǎn)屬性；n（4）檢查節(jié)點(diǎn)類型；）檢查節(jié)點(diǎn)類型；n（5）創(chuàng)建節(jié)點(diǎn)；）創(chuàng)建節(jié)點(diǎn)；n（6）操作節(jié)點(diǎn)。）操作節(jié)點(diǎn)。n7.2.1 訪問指定節(jié)點(diǎn)訪問指定節(jié)點(diǎn)n“訪問指定節(jié)點(diǎn)”的含義是已知節(jié)點(diǎn)的某個(gè)屬性（如id屬性、name屬性或者節(jié)點(diǎn)類型），在DOM

4、樹中尋找符合條件的節(jié)點(diǎn)。n相關(guān)的方法包括getElementById()，getElementsByName()和getElementsByTagName。n1getElementById方法n應(yīng)用getElementById方法可以根據(jù)傳入的id參數(shù)返回指定的元素節(jié)點(diǎn)。n在HTML文檔中，元素的id屬性是該元素對(duì)象的唯一標(biāo)識(shí)，因此getElementById方法是最快的節(jié)點(diǎn)訪問方法。n出于瀏覽器兼容考慮，表單中name名不要和其他元素的ID相同。 n2getElementsByName方法 ngetElementsByName方法將查找所有元素對(duì)象，返回name屬性為指定值的元素對(duì)象列表。n

5、常用在單選按鈕上。所有單選按鈕須有相同的name。nvar input = document.getElementsByName(radio);nalert(input0.value);nalert(input.item(0).value); n3getElementsByTagName方法ngetElementsByTagName方法將返回指定類型的元素集合，與前面介紹的getElementById和getElementsByName方法不同，getElementsByTagName不僅可以用于Document對(duì)象，而且可以用于普通的Element對(duì)象。n7.2.2 訪問元素屬性訪問元素屬性

6、nDOM又定義了3個(gè)元素方法來幫助訪問屬性：n（1）getAttribute(name)：相當(dāng)于attributes.getNamedItem(name).value；ngetAttribute()還可以取得自定義特性的特性值。n（2）removeAttribute(name)：相當(dāng)于attributes.removeNamedItem(name)。 n（3）setAttribute(name, value)：相當(dāng)于attributes.getNamedItem(name).value = value；n接受兩個(gè)參數(shù)：要設(shè)置的特性名和值。如果存在，會(huì)替換原有值；如果不存在，會(huì)創(chuàng)建該屬性并賦值。

7、nnn HTML Sample Pagen n function init() n var img = document.getElementById(img1);n var all_attr = document.getElementById(img1).attributes;n var src_attr = all_attr.getNamedItem(src);n n alert(img.className);n alert(img.getAttribute(className);n var src_attr = img.getAttribute (src);n alert(src_att

8、r);n img.setAttribute(test1,123);n alert(img.test1);n n nnn nnn7.2.3 訪問相關(guān)節(jié)點(diǎn)訪問相關(guān)節(jié)點(diǎn)n“訪問相關(guān)節(jié)點(diǎn)”的含義是根據(jù)已知的節(jié)點(diǎn)，尋找和它存在聯(lián)系的節(jié)點(diǎn)，如父節(jié)點(diǎn)、子節(jié)點(diǎn)、兄弟節(jié)點(diǎn)等。n1documentElement屬性n通過documentElement屬性可以很方便地訪問到HTML文檔的根節(jié)點(diǎn)，即元素。n2ownerDocument屬性nownerDocument屬性也是在Node接口中定義的，該屬性返回了DOM節(jié)點(diǎn)所在的文檔對(duì)象。 n文檔中所有的節(jié)點(diǎn)之間都存在這樣或那樣的關(guān)系，節(jié)點(diǎn)間的各種關(guān)系可以用傳統(tǒng)的家族關(guān)系

9、來描述。n每個(gè)節(jié)點(diǎn)都有一個(gè)childNodes屬性，也都有一個(gè)parnetNode屬性，該屬性指向文檔樹中的父節(jié)點(diǎn)。n包含在childNodes列表中的所有節(jié)點(diǎn)都有相同的父節(jié)點(diǎn)，因此他們的parentNode屬性都指向同一個(gè)節(jié)點(diǎn)。此外，包含在childNodes列表中的每個(gè)節(jié)點(diǎn)相互之間都是兄弟節(jié)點(diǎn)，具有previousSibling和nextSibling屬性。n3訪問子節(jié)點(diǎn)nNode接口定義了以下的屬性，可以用于訪問DOM節(jié)點(diǎn)的子節(jié)點(diǎn)：n（1）childNodes：子節(jié)點(diǎn)的列表；n（2）firstChild：第一個(gè)子節(jié)點(diǎn)；n（3）lastChild：最后一個(gè)子節(jié)點(diǎn)。n4訪問父節(jié)點(diǎn)nNode接

10、口定義了parentNode屬性，可以用于訪問DOM節(jié)點(diǎn)的父節(jié)點(diǎn)。n5訪問兄弟節(jié)點(diǎn)nNode接口還定義了以下的屬性，用于訪問DOM節(jié)點(diǎn)的兄弟節(jié)點(diǎn)：n（1）previousSibling：上一個(gè)兄弟節(jié)點(diǎn)；n（2）nextSibling：下一個(gè)兄弟節(jié)點(diǎn)。n7.2.4 創(chuàng)建節(jié)點(diǎn)創(chuàng)建節(jié)點(diǎn)nDOM標(biāo)準(zhǔn)中用于創(chuàng)建節(jié)點(diǎn)的方法包括：n（1）createElement方法：創(chuàng)建HTML元素；n（2）createTextNode：創(chuàng)建文本節(jié)點(diǎn)；n（3）createDocumentFragment方法：創(chuàng)建DOM文檔片段；n（4）cloneNode方法：通過復(fù)制已有節(jié)點(diǎn)創(chuàng)建新節(jié)點(diǎn)。n1createElement方法

11、ncreateElement方法用于在HTML文檔中創(chuàng)建新的元素。n2createTextNode方法ncreateTextNode方法可以用于創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)。n3createDocumentFragment方法ncreateDocumentFragment方法可以創(chuàng)建一個(gè)文檔片段（DocumentFragment），在文檔片段中可以添加各種節(jié)點(diǎn)，最后一次性添加到HTML頁面中。n使用這種方式可以減少頁面更新的次數(shù)，提高頁面展示的效率。n4cloneNode方法ncloneNode方法使得我們可以在DOM使用“模板”方式創(chuàng)建節(jié)點(diǎn)，這對(duì)于需要在頁面中創(chuàng)建大量類似節(jié)點(diǎn)的情況特別有用。n可以首

12、先創(chuàng)建一個(gè)“模板”節(jié)點(diǎn)，創(chuàng)建新節(jié)點(diǎn)時(shí)首先調(diào)用cloneNode方法獲得“模板”節(jié)點(diǎn)的副本，然后根據(jù)實(shí)際應(yīng)用的需要對(duì)該副本節(jié)點(diǎn)進(jìn)行局部內(nèi)容的修改。n接收兩個(gè)參數(shù)，如果參數(shù)為true為深復(fù)制，也就是復(fù)制節(jié)點(diǎn)及其整個(gè)子節(jié)點(diǎn)樹；如果參數(shù)為false。為淺復(fù)制，只復(fù)制節(jié)點(diǎn)本身。 n7.2.5 操作節(jié)點(diǎn)操作節(jié)點(diǎn)n操作DOM節(jié)點(diǎn)可以使用標(biāo)準(zhǔn)的DOM方法，如appendChild()，removeChild()n1使用DOM標(biāo)準(zhǔn)方法n（1）appendChild：為當(dāng)前節(jié)點(diǎn)新增一個(gè)子節(jié)點(diǎn)，并且將其作為最后一個(gè)子節(jié)點(diǎn)。nappendChild()向childNodes列表的末尾添加一個(gè)節(jié)點(diǎn)。添加完成后更新相關(guān)信

13、息。n如果傳入到如果傳入到appenChild()中的節(jié)點(diǎn)已經(jīng)是文檔的中的節(jié)點(diǎn)已經(jīng)是文檔的一部分，那結(jié)果就是將該節(jié)點(diǎn)從原來的位置轉(zhuǎn)移一部分，那結(jié)果就是將該節(jié)點(diǎn)從原來的位置轉(zhuǎn)移到新位置。到新位置。 n（2）insertBefore：為當(dāng)前節(jié)點(diǎn)新增一個(gè)子節(jié)點(diǎn)，將其插入到指定的子節(jié)點(diǎn)之前。n如果需要把節(jié)點(diǎn)放在childNodes列表中某個(gè)特定位置上，而不是末尾，可以使用insertBefore()方法，第一個(gè)參數(shù)為要插入的節(jié)點(diǎn)，第二個(gè)參數(shù)作第一個(gè)參數(shù)為要插入的節(jié)點(diǎn)，第二個(gè)參數(shù)作為參照的節(jié)點(diǎn)為參照的節(jié)點(diǎn)。n（3）replaceChild：將當(dāng)前節(jié)點(diǎn)的某個(gè)子節(jié)點(diǎn)替換為其他節(jié)點(diǎn)。n接收兩個(gè)參數(shù)：要插入的節(jié)

14、點(diǎn)和要替換的節(jié)點(diǎn)。n n（4）removeChild：刪除當(dāng)前節(jié)點(diǎn)的某個(gè)子節(jié)點(diǎn)。n補(bǔ)充補(bǔ)充ninnerText屬性 可以操作元素中包含的所有文本內(nèi)容。ninnerHTML屬性 其處理的是HTML字符串，而innerText處理的是普通文本字符串。 ninnerHTML是符合W3C標(biāo)準(zhǔn)的屬性，而innerText只適用于IE瀏覽器。小 結(jié) n本章首先對(duì)DOM標(biāo)準(zhǔn)進(jìn)行了介紹，講解了如何使用JavaScript進(jìn)行DOM編程，然后結(jié)合常見的應(yīng)用場景，通過多個(gè)示例說明如何通過DOM編程解決Web應(yīng)用開發(fā)中的一些實(shí)際問題，如表格排序、表單驗(yàn)證、添加關(guān)鍵詞鏈接等。n實(shí)驗(yàn)實(shí)驗(yàn)n1. 實(shí)驗(yàn)名稱：實(shí)驗(yàn)名稱：雙向選擇列表框