Lecture11Manipulating+DOM+with+JavaScript(中文版)

1、Web ProgrammingSchool of Computer Science and Engineering,South China University of TechnologyLecture 11 使用使用JavaScriptJavaScript操縱操縱DOMDOMWeb 2.0 Programming Manipulating DOM with JavaScript2 / 30February 24, 2022South China University of Technology概要概要lDOM 樹樹l操縱 DOMWeb 2.0 Programming Manipulating

2、 DOM with JavaScript3 / 30February 24, 2022South China University of Technology復雜的復雜的DOM DOM 操縱問題操縱問題l在JavaScript中，我們如何實現(xiàn)以下每項的內容? 每一項都涉及到對一組元素的每個個體進行修改. 當Go按鈕被點擊， 把所有class屬性為puzzle 的div 放置到坐標為x/y隨機位置上去.當用戶懸停在迷宮邊界，將迷宮的所有墻變成紅色紅色.在ul列表中，將id屬性為TA的項的背景色設置為灰色灰色 .Web 2.0 Programming Manipulating DOM with J

3、avaScript4 / 30February 24, 2022South China University of TechnologyDOM DOM 樹樹l網(wǎng)頁中的元素被插入到一個由對象組成的樹狀結構中 DOM樹樹 DOM 擁有遍歷該樹的屬性跟方法 Web 2.0 Programming Manipulating DOM with JavaScript5 / 30February 24, 2022South China University of TechnologyDOM DOM 節(jié)點的類型節(jié)點的類型l 元素節(jié)點元素節(jié)點 (HTML 標簽) 可以擁有子節(jié)點 或者屬性 l 文本節(jié)點文本節(jié)點

4、(在塊元素中的文本) l 屬性節(jié)點屬性節(jié)點 (屬性/值對 ) 文本/屬性 是元素節(jié)點中的子節(jié)點 不可以擁有子節(jié)點或屬性 在繪制DOM樹的時候通常不畫出來 Web 2.0 Programming Manipulating DOM with JavaScript6 / 30February 24, 2022South China University of Technology遍歷遍歷DOM DOM 樹樹l每個節(jié)點的DOM對象擁有以下屬性:l完整的DOM節(jié)點屬性列表 l瀏覽器不兼容信息(IE 最差勁)屬性名屬性名 描述描述firstChild, lastChild 該節(jié)點的子節(jié)點列表的開始/結尾節(jié)

5、點childNodes 該節(jié)點的子節(jié)點數(shù)組nextSibling, previousSibling 有相同父節(jié)點的鄰節(jié)點 parentNode 該節(jié)點的父節(jié)點 Web 2.0 Programming Manipulating DOM with JavaScript7 / 30February 24, 2022South China University of TechnologyDOM DOM 樹遍歷示例樹遍歷示例Web 2.0 Programming Manipulating DOM with JavaScript8 / 30February 24, 2022South China Univ

6、ersity of Technology元素元素vs. vs. 文本節(jié)點文本節(jié)點lQ: 上面的div有多少個子節(jié)點?lA: 3 元素節(jié)點兩個 文本節(jié)點 “nt” (在段落的前/后 )lQ: 該段落具有多少個子節(jié)點? 那個a 標簽呢? Web 2.0 Programming Manipulating DOM with JavaScript9 / 30February 24, 2022South China University of Technology概要概要lDOM樹l操縱操縱DOM Web 2.0 Programming Manipulating DOM with JavaScript10

7、 / 30February 24, 2022South China University of TechnologyPrototypePrototype的的 DOMDOM元素元素 方法方法 l類別: CSS類, DOM 樹遍歷/操縱, 事件, 樣式absolutizeaddClassNameclassNamescleanWhitespaceclonePositioncumulativeOffsetcumulativeScrollOffsetemptyextendfirstDescendantgetDimensionsgetHeightgetOffsetParentgetStylegetWidt

8、hhasClassNamehideidentifyinsertinspectmakeClippingmakePositionedmatchpositionedOffsetreadAttributerecursivelyCollectrelativizeremoveremoveClassNamereplacescrollToselectsetOpacitysetStyleshowtoggletoggleClassNameundoClippingundoPositionedupdateviewportOffsetvisiblewrapwriteAttributeWeb 2.0 Programmin

9、g Manipulating DOM with JavaScript11 / 30February 24, 2022South China University of TechnologyPrototypePrototype的的 DOM DOM 樹遍歷方法樹遍歷方法 lPrototype 去除了不需要的文本 l注意，這些都是方法, 因此你需要加上括號() 方法方法 描述描述ancestors, up 元素的父節(jié)點 childElements, descendants, down 元素的子節(jié)點 (非文本節(jié)點 ) siblings, next, nextSiblings, previous, pr

10、eviousSiblings, adjacent 有相同父節(jié)點的元素 (非文本節(jié)點) Web 2.0 Programming Manipulating DOM with JavaScript12 / 30February 24, 2022South China University of Technology選擇多組選擇多組DOMDOM對象對象 l在文檔或其它DOM對象 中訪問后代節(jié)點:名稱名稱屬性屬性getElementsByTagName 選擇指定標簽元素的后代，例如 “div”，以數(shù)組形式返回。getElementsByName 選擇帶有給定name屬性的元素的后代，以數(shù)組形式返回。 (

11、在表單控制的時候很有用) Web 2.0 Programming Manipulating DOM with JavaScript13 / 30February 24, 2022South China University of Technology選擇特定類型的所有元素選擇特定類型的所有元素 l高亮本文檔中的所有段落 :Web 2.0 Programming Manipulating DOM with JavaScript14 / 30February 24, 2022South China University of Technology與與getElementByIdgetElement

12、ById聯(lián)合使用聯(lián)合使用l高亮這部分中所有ID為address的段落 :Web 2.0 Programming Manipulating DOM with JavaScript15 / 30February 24, 2022South China University of TechnologyPrototypePrototype選擇元素的方法選擇元素的方法lPrototype 添加了對文檔對象 (以及所有的DOM元素對象) 進行多組選擇的方法 :getElementsByClassName 選擇帶有指定class屬性的元素，并以數(shù)組形式返回。 select 匹配給定CSS 選擇器的元素的數(shù)組

13、，例如div#sidebar ul.news liWeb 2.0 Programming Manipulating DOM with JavaScript16 / 30February 24, 2022South China University of Technology創(chuàng)造新節(jié)點創(chuàng)造新節(jié)點 l只是創(chuàng)建一個節(jié)點，并沒把它加入到該網(wǎng)頁中 l你必須把這個新節(jié)點加入到網(wǎng)頁中現(xiàn)存的一個元素中，作為其子節(jié)點 .名稱名稱描述描述document.createElement( tag) 創(chuàng)造并返回一個具有該類型的元素的空的DOM 節(jié)點 document.createTextNode(text) 創(chuàng)造并返回

14、包含給定文本的文本節(jié)點 Web 2.0 Programming Manipulating DOM with JavaScript17 / 30February 24, 2022South China University of Technology修改修改DOMDOM樹樹l每一個DOM元素對象擁有以下方法:名稱名稱描述描述appendChild(node) 在該節(jié)點的子節(jié)點列表末尾追加一個新節(jié)點 insertBefore(new, old) 在該節(jié)點的子節(jié)點列表中，在指定的舊節(jié)點前面插入新節(jié)點removeChild(node) 在該節(jié)點的子節(jié)點列表中，刪除指定的節(jié)點replaceChild(n

15、ew, old) 用新的子節(jié)點將舊的子節(jié)點替換掉 Web 2.0 Programming Manipulating DOM with JavaScript18 / 30February 24, 2022South China University of Technology從網(wǎng)頁中刪除一個節(jié)點從網(wǎng)頁中刪除一個節(jié)點l每一個 DOM 對象有一個removeChild方法，用于從網(wǎng)頁中刪除它的子節(jié)點lPrototype 為節(jié)點添加了 remove 方法來刪除它本身Web 2.0 Programming Manipulating DOM with JavaScript19 / 30February 2

16、4, 2022South China University of TechnologyDOMDOM vs. vs. innerHTMLinnerHTML 編輯編輯l為什么不對先前的例子采用以下方法?l假設新節(jié)點是更加復雜的: 丑陋的丑陋的 : 在許多層面上是不好的編程風格 (e.g. JS嵌入在HTML代碼中)易出錯易出錯 : 必須仔細辨別和 只能只能在子節(jié)點列表的開始開始跟結尾結尾處 ，不能在中間添加 Web 2.0 Programming Manipulating DOM with JavaScript20 / 30February 24, 2022South China Universi

17、ty of Technology讀取讀取/ /更改樣式的問題更改樣式的問題 lstyle 屬性允許你對一個元素的所有CSS樣式進行設置 l問題: 你(通常)不能用它來讀取存在的樣式Web 2.0 Programming Manipulating DOM with JavaScript21 / 30February 24, 2022South China University of Technology在在PrototypePrototype中訪問樣式屬性中訪問樣式屬性l將getStyle 函數(shù)添加到DOM對象里，能訪問存在的樣式 laddClassName, removeClassName,

18、hasClassName 操縱CSS的class屬性Web 2.0 Programming Manipulating DOM with JavaScript22 / 30February 24, 2022South China University of Technology常見錯誤常見錯誤: : 對存在的樣式的錯誤使用對存在的樣式的錯誤使用 l例如用上面的例子計算. “200px” + 100 + “px” , 會得到200px100px l正確的方法: Web 2.0 Programming Manipulating DOM with JavaScript23 / 30February 2

19、4, 2022South China University of Technology在在PrototypePrototype中設置中設置CSS CSS 的的classclass屬性屬性laddClassName, removeClassName, hasClassName操縱CSS的class屬性l與DOM 現(xiàn)有的className屬性類似, 但不用手動地用空格進行分隔 Web 2.0 Programming Manipulating DOM with JavaScript24 / 30February 24, 2022South China University of Technology總結總結lDOM樹 DOM 樹, 節(jié)點類型 遍歷DOM, 文本節(jié)點 l操縱 DOMprototype的DOM方法 通過tagName, name, className, CSS 選擇器選擇DOM vs. innerHTML編程式地訪問樣式屬性 Web 2.0 Programming Manipulating DOM with JavaScript25 / 30February 24, 2022South China Uni