JavaScript DOM 編程

DOM
- D:文檔 - html 文檔或 xml 文檔
- O:對(duì)象 - document 對(duì)象的屬性和方法
- M:模型
- DOM 是針對(duì) xml 的基于樹的API
- DOM 樹:節(jié)點(diǎn)的層次
- DOM 把一個(gè)文檔表示為一顆家譜樹(父,子,兄弟)
- DOM 定義了 Node 接口以及許多種節(jié)點(diǎn)類型來表示 XML 節(jié)點(diǎn)的多個(gè)方面
1、節(jié)點(diǎn)及其類型
節(jié)點(diǎn):來源于網(wǎng)絡(luò)理論,代表網(wǎng)絡(luò)中一個(gè)連接點(diǎn),網(wǎng)絡(luò)是由節(jié)點(diǎn)構(gòu)成的集合
①,元素節(jié)點(diǎn)
②,屬性節(jié)點(diǎn):元素的屬性,可以直接通過屬性的方式來操作
③,文本節(jié)點(diǎn):是元素節(jié)點(diǎn)的子節(jié)點(diǎn),其內(nèi)容為文本
2、在?html?文檔的什么位置編寫?js?代碼
① 直接在 HTML 頁(yè)面中書寫?js代碼
缺點(diǎn):
?a,js 和 HTML 強(qiáng)耦合,不利于代碼的維護(hù)
?b,若 click 相應(yīng)函數(shù)是比較復(fù)雜的,則需先定義一個(gè)函數(shù),然后在 onclick 屬性中完成對(duì)函數(shù)的引用,比較麻煩
② 一般的,不能在 body 節(jié)點(diǎn)之前來直接獲取 body 內(nèi)的節(jié)點(diǎn),因?yàn)榇藭r(shí) html 文檔樹還沒有加載完成,獲取不到指定的節(jié)點(diǎn)
??Untitled Document ????? var cityNode = document.getElementById("city");??? alert(cityNode);??
③ 可以在整個(gè) HTML 文檔的最后編寫類似代碼,但這不符合習(xí)慣
④ 一般的,在 body 節(jié)點(diǎn)之前編寫 js代碼,但需要利用 windom.onload 事件,該事件在當(dāng)前文檔完全加載之后被觸發(fā),如:
??Untitled Document ???? window.onload = function(){???? // js代碼?? }?
Node接口的特性和方法
nodeName:String,說明:nodeVale:StringnodeType:NumberownerDocument:DocumentfirstChild:NodelastChild:NodechildNodes:NodeListpreviousSibling:NodenextSibling:NodehasChildNodes():Booleanattributes:NameNodeMapappendChild(node):NoderemoveChild(node):NodereplaceChild(newnode,oldnode):NodeinsertBefore(newnode,refnode):Node
以下實(shí)例中使用到的 HTML
<body><p>你喜歡那個(gè)城市?p><ul id="city">?? <li id="bj" name="BeiJing">北京li>?? <li>上海li>?? <li>東京li>?? <li>首爾li>ul><br><br><p>你喜歡哪款單機(jī)游戲?p>?<ul id="game">?? <li id="rl">紅警li>?? <li>實(shí)況li>?? <li>極品飛車li>?? <li>魔獸li>ul><br><br>gender:<input type="radio" name="gender" value="male">Male??? <input type="radio" name="gender" value="female">Femalename:<input type="text" name="username" id="name" value="chuxiaojiang">?body>
3、如何來獲取元素節(jié)點(diǎn)
① **document.getElementById:
?根據(jù) id 屬性獲取對(duì)應(yīng)的單個(gè)節(jié)點(diǎn),該方法為 document對(duì)象的方法
② **document.getElementsByTagName:
?根據(jù)標(biāo)簽名獲取指定節(jié)點(diǎn)名字的數(shù)組,數(shù)組對(duì)象length屬性可以獲取數(shù)組的長(zhǎng)度,
?該方法為 Node接口的方法,即任何一個(gè)節(jié)點(diǎn)都有這個(gè)方法
③ document.getElementsByName:
?根據(jù)節(jié)點(diǎn)的 name屬性獲取符合條件的節(jié)點(diǎn)數(shù)組,但I(xiàn)E的實(shí)現(xiàn)方式和 w3c標(biāo)準(zhǔn)有差別:
?在html 文檔中若某節(jié)點(diǎn)(li) 沒有 name 屬性,
?則 IE 使用 document.getElementsByName 不能獲取到節(jié)點(diǎn)數(shù)組,在火狐可以
④ 其它的兩個(gè)方法 ,IE根本不支持,所以不建議使用。
4、獲取屬性節(jié)點(diǎn)
?var?nameNode = documentElementById("name");?// 獲取元素
?alert(nameNode.value);?// 獲取元素的值
?nameNode.value = "chuxiaojiang";?// 設(shè)置元素的值
② 通過元素節(jié)點(diǎn)的 getAttributeNode 方法來獲取屬性節(jié)點(diǎn),然后在通過 nodeValue 來讀寫屬性值。
5、獲取元素節(jié)點(diǎn)的子節(jié)點(diǎn)(**只有元素節(jié)點(diǎn)才有子節(jié)點(diǎn))
① childNodes屬性獲取全部的子節(jié)點(diǎn):火狐和IE的實(shí)現(xiàn)方式有區(qū)別
② firstChild屬性獲取第一個(gè)節(jié)點(diǎn)
③ lastChild屬性獲取最后一個(gè)子節(jié)點(diǎn)
6、獲取文本節(jié)點(diǎn)
② 若元素節(jié)點(diǎn)只有文本節(jié)點(diǎn)一個(gè)子節(jié)點(diǎn),
?例如
?然后利用 eleNode.firstChild.nodeValue 的方法來讀寫其文本節(jié)點(diǎn)的值
7、節(jié)點(diǎn)的屬性
?如果給定節(jié)點(diǎn)是一個(gè)文本節(jié)點(diǎn),nodeName 屬性將返回內(nèi)容為 #text 的字符串
② nodeType:返回一個(gè)整數(shù),這個(gè)數(shù)值代表著給定節(jié)點(diǎn)的類型,只讀屬性
?1 -- 元素節(jié)點(diǎn),2 -- 屬性節(jié)點(diǎn),3 -- 文本節(jié)點(diǎn)
③ nodeValue:返回給定節(jié)點(diǎn)的當(dāng)前值(字符串),可讀寫屬性
?a,元素節(jié)點(diǎn),返回值是 null
?b,屬性節(jié)點(diǎn):返回值是這個(gè)屬性的值
?c,文本節(jié)點(diǎn):返回值是這個(gè)文本節(jié)點(diǎn)的內(nèi)容
如:
<script type="text/javascript">?// 關(guān)于節(jié)點(diǎn)屬性:nodeType,nodeName,nodeValue?// 在文檔中,任何一個(gè)節(jié)點(diǎn)都有這3個(gè)屬性?// 而 id,name,value 是具體節(jié)點(diǎn)的屬性?window.onload = function(){??// 1,元素節(jié)點(diǎn)的這 3 個(gè)屬性??var bjNode = document.getElementById("bj");??alert(bjNode.nodeType);?// 元素節(jié)點(diǎn):1??alert(bjNode.nodeName);?// 節(jié)點(diǎn)名:li??alert(bjNode.nodeValue);?// 元素節(jié)點(diǎn)沒有 nodeValue 屬性值:null??// 2,屬性節(jié)點(diǎn)??var nameAttr = document.getElementById("name").getAttrbuteNode("name");??alert(nameAttr.nodeType);?// 屬性節(jié)點(diǎn):2??alert(nameAttr.nodeName);?// 屬性節(jié)點(diǎn)的節(jié)點(diǎn)名:屬性名??alert(nameAttr.nodeValue);?// 屬性節(jié)點(diǎn)的 nodeValue 屬性值:屬性值??// 3,文本節(jié)點(diǎn)??var textNode = bjNode.firstChild;??alert(textNode.nodeType);?// 文本節(jié)點(diǎn):3??alert(textNode.nodeName);?// 節(jié)點(diǎn)名:#text??alert(textNode.nodeValue);?// 文本節(jié)點(diǎn)的 nodeValue 屬性值:文本值本身??// nodeType,nodeName 是只讀的,nodeValue 是可以改變的??// 以上三個(gè)屬性只有在文本節(jié)點(diǎn)中使用 nodeValue 讀寫文本值時(shí)使用最多?}script>
8、創(chuàng)建一個(gè)元素節(jié)點(diǎn)
① createElement():按照給定的標(biāo)簽名創(chuàng)建一個(gè)新的元素節(jié)點(diǎn),該方法只有一個(gè)參數(shù):
?被創(chuàng)建的元素節(jié)點(diǎn)的名字,是一個(gè)字符串。
?方法的返回值:是一個(gè)指向新建節(jié)點(diǎn)的引用指針,返回值是一個(gè)元素節(jié)點(diǎn),所以它的 nodeType 屬性等于 1.
?新元素節(jié)點(diǎn)不會(huì)自動(dòng)添加到文檔里,它只是一個(gè)存在于 JavaScript 上下文的對(duì)象。
如:
<script type="text/javascript">??window.onload = function(){????// 新創(chuàng)建一個(gè)元素節(jié)點(diǎn),并把該節(jié)點(diǎn)添加為文檔中指定節(jié)點(diǎn)的子節(jié)點(diǎn)????var liNode = document.createElement("li");????var xmText = document.createTextNode("廈門");?// 創(chuàng)建 "廈門" 文本節(jié)點(diǎn)????liNode.appendChild(xmText);????var cityNode = document.getElementById("city");????cityNode.appendChild(liNode);??}script>
9、創(chuàng)建一個(gè)文本節(jié)點(diǎn)
① createTextNode():創(chuàng)建一個(gè)包含著給定文本的新文本節(jié)點(diǎn),
?這個(gè)方法的返回值是一個(gè)指向新建文本節(jié)點(diǎn)引用指針,
?它是一個(gè)文本節(jié)點(diǎn),所以它的 nodeType 屬性等于 3,
?方法只有一個(gè)參數(shù):新建文本節(jié)點(diǎn)所包含的文本字符串,新元素節(jié)點(diǎn)不會(huì)自動(dòng)添加到文檔中。
10、為元素節(jié)點(diǎn)添加子節(jié)點(diǎn)
① appendChild():var reference = element.appendChild(newChild):
?給定子節(jié)點(diǎn) NewChild 將成為給定元素節(jié)點(diǎn) element 的最后一個(gè)子節(jié)點(diǎn),
?方法的返回值是一個(gè)指向新增子節(jié)點(diǎn)的引用指針。
11、節(jié)點(diǎn)的替換
① replaceChild():把一個(gè)給定父元素里的一個(gè)子節(jié)點(diǎn)替換為另一個(gè)子節(jié)點(diǎn),
?var reference = element.replaceChild(newChild,oldChild),返回值是一個(gè)指向已被替換的哪個(gè)子節(jié)點(diǎn)(舊節(jié)點(diǎn))的引用指針
② 該節(jié)點(diǎn)除了替換功能以外還有移動(dòng)的功能
③ 該方法只能完成單向替換,若需要使用雙向替換,需要自定義函數(shù):
12、插入節(jié)點(diǎn)
① insertBefore():把一個(gè)給定節(jié)點(diǎn)插入到一個(gè)給定元素節(jié)點(diǎn)的給定子節(jié)點(diǎn)的前面,
var reference = element.insertBefore(newNode,targetNode);
節(jié)點(diǎn) newNode 將被插入到元素節(jié)點(diǎn) element 中并出現(xiàn)在節(jié)點(diǎn) targetNode 的前面,
節(jié)點(diǎn) targetNode 必須是 element 元素的一個(gè)子節(jié)點(diǎn)。
如:
window.onload = function(){??var cityNode = document.getElementById("city");??var bjNode = document.getElementById("bj");??var rlNode = docuement.getElementById("rl");??cityNode.insertBefore(rlNode,bjNode);}
② 自定義 insertAfter() 方法
13、刪除節(jié)點(diǎn)
① removeChild():從一個(gè)給定元素里刪除一個(gè)子節(jié)點(diǎn):var reference = element.removeChild(node);
返回值是一個(gè)指向已被刪除的子節(jié)點(diǎn)的引用指針,
某個(gè)節(jié)點(diǎn)被 removeChild() 方法刪除時(shí),這個(gè)節(jié)點(diǎn)所包含的所有子節(jié)點(diǎn)將同時(shí)被刪除,
如果想刪除某個(gè)節(jié)點(diǎn),但不知道它的的父節(jié)點(diǎn)是哪一個(gè),parentNode 屬性可以幫忙
如:
var bjNode = document.getElementById("bj");?// 找到要?jiǎng)h除的節(jié)點(diǎn)
bjNode.parentNode.removeChild(bjNode);?// 利用要?jiǎng)h除的節(jié)點(diǎn)的父節(jié)點(diǎn)執(zhí)行刪除操作。
14、innerHTML 屬性
①?瀏覽器幾乎都支持該屬性,但不是 DOM 標(biāo)準(zhǔn)的組成部分,
?innerHTML 屬性可以用來讀寫某個(gè)給定元素里的 HTML 內(nèi)容

