今天AJAX必須用JS，做前端必須用JS，由于課程緊，只安排了一天時(shí)間，只講了Dom。
DOM 可在J2SEAPI搜Document，便可以查看方法
DOM樹(shù):節(jié)點(diǎn)（node）的層次。
節(jié)點(diǎn)分為三種類型：
節(jié)點(diǎn)（node）：來(lái)源于網(wǎng)絡(luò)理論，代表網(wǎng)絡(luò)中的一個(gè)連接點(diǎn)。網(wǎng)絡(luò)是由節(jié)點(diǎn)構(gòu)成的集合
1.節(jié)點(diǎn)分為三種類型：
element node attribute
node text node
2.使用 Aptana 編輯器 :
3.查找節(jié)點(diǎn)：
1）在哪兒寫代碼：
不能直接寫在<body> 元素的前面 ：因?yàn)榇藭r(shí) DOM沒(méi)有被完全解析
可以把 js 寫在
</html> 的后面
按慣例應(yīng)該把 js 代碼寫在 <head>中，<title>節(jié)點(diǎn)后，此時(shí)需要使用 js 函數(shù)window.onload = function(){
//alert("window.onload...");
var
cityElement =
document.getElementById("city");
alert(cityElement.nodeName);
};
2）Dom屬性：nodeName nodeType
nodeValue
① nodeName:一個(gè)字符串，其內(nèi)容是給定節(jié)點(diǎn)的名字。
var name = node.nodeName;
如果給定節(jié)點(diǎn)是一個(gè)元素節(jié)點(diǎn)或?qū)傩怨?jié)點(diǎn)，nodeName 屬性將返回這個(gè)元素的名字。
如果給定節(jié)點(diǎn)是一個(gè)文本節(jié)點(diǎn)，nodeName
屬性將返回內(nèi)容為 #text
的字符串。
nodeName 是一個(gè)只讀屬性。
② nodeType：返回一個(gè)整數(shù)，這個(gè)數(shù)值代表著給定節(jié)點(diǎn)的類型。
nodeType 屬性返回的整數(shù)值對(duì)應(yīng)著 12 種節(jié)點(diǎn)類型：
Node.ELEMENT_NODE (1) -- 元素節(jié)點(diǎn)
Node.ATTRIBUTE_NODE (2) -- 屬性節(jié)點(diǎn)
Node.TEXT_NODE (3) -- 文本節(jié)點(diǎn)
…
nodeType 是個(gè)只讀屬性
③nodeValue：返回給定節(jié)點(diǎn)的當(dāng)前值（字符串）
•
如果給定節(jié)點(diǎn)是一個(gè)屬性節(jié)點(diǎn)，返回值是這個(gè)屬性的值。
•
如果給定節(jié)點(diǎn)是一個(gè)文本節(jié)點(diǎn)，返回值是這個(gè)文本節(jié)點(diǎn)的
內(nèi)容。
•
如果給定節(jié)點(diǎn)是一個(gè)元素節(jié)點(diǎn)，返回值是
null
•
nodeValue 是一個(gè)
讀/寫 屬性，但不能對(duì)元素節(jié)點(diǎn)的
nodeValue 屬性設(shè)置值，但可以為文本節(jié)點(diǎn)的 nodeValue
屬性設(shè)置一個(gè)值。
4. 關(guān)于子節(jié)點(diǎn):
1). 獲取方法:
元素節(jié)點(diǎn)的 childNodes 屬性可以獲取指定元素節(jié)點(diǎn)的所有子節(jié)點(diǎn).
2). 火狐
和 ie 的實(shí)現(xiàn)方式不一樣: 火狐包含空格的文本節(jié)點(diǎn)
3). 提前判斷當(dāng)前節(jié)點(diǎn)是否有子節(jié)點(diǎn):
通過(guò)元素節(jié)點(diǎn)的 hasChildNodes() 方法. 文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)都沒(méi)有子節(jié)點(diǎn), 所以他們的
hasChildNodes() 方法總返回 false
4). 可以通過(guò)元素節(jié)點(diǎn)的 firstChild(lastChild) 來(lái)獲取元素節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)(最后一個(gè)子節(jié)點(diǎn))
可以通過(guò)元素節(jié)點(diǎn)的 firstChild/lastChild 來(lái)獲取元素節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)（最后一個(gè)節(jié)點(diǎn)）
5. 正則表達(dá)式
用途：
1.
數(shù)據(jù)有效性驗(yàn)證
2.
查找和替換
文本格式： /pattern/flags
參數(shù)說(shuō)明：
pattern ：一個(gè)正則表達(dá)式文本
flags ： 如果存在，將是以下值：
g ： global
match(全局匹配)
i ：ignore case(忽略大小寫)
gi ： both global
match and ignore case(匹配所有可能的值，也忽略大小寫)
在java中相當(dāng)重要，可謂必備知識(shí)，可惜我這方面沒(méi)看過(guò)，就列
一些常用的正則表達(dá)式示例：
1、匹配所有的正數(shù)：^[0-9]+$
2、匹配所有的小數(shù)：^\-?[0-9]*\.?[0-9]*$
3、匹配所有的整數(shù)：^\-?[0-9]+$
4、提取信息中的中文字符串： [\u4e00-\u9fa5]* ;
5、提取信息中的郵件地址：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
6、提取信息中的中國(guó)手機(jī)號(hào)碼：(86)*0*13\d{9}
7、提取信息中的中國(guó)固定電話號(hào)碼：(\(\d{3,4}\)|\d{3,4}-|\s)?\d{8}
8、提取信息中的中國(guó)郵政編碼：[1-9]{1}(\d+){5}
9、提取信息中的中國(guó)身份證號(hào)碼：\d{18}|\d{15}
10、提取信息中的任何數(shù)字：(-?\d*)(\.\d+)?
11、匹配HTML標(biāo)記的正則表達(dá)式：/<(.*)>.*<\/\1>|<(.*)
\/>/
6. 創(chuàng)建節(jié)點(diǎn):
1).
創(chuàng)建元素節(jié)點(diǎn):
document.createElement
2).
創(chuàng)建文本節(jié)點(diǎn):
document.createTextNode
3).創(chuàng)建屬性節(jié)點(diǎn): 可以直接為其添加屬性節(jié)點(diǎn):
liNode.onclick
= function(){
alert(this.firstChild.nodeValue);
};
4).
插入節(jié)點(diǎn):
appendChild
insertBefore
可以自定義 insertAfter
7. 其它:
1).
替換節(jié)點(diǎn):
replaceChild. **注意: 該方法除了可以替換還可以移動(dòng), 一般的, 直接單獨(dú)使用該方法時(shí)并不多.
2).
刪除節(jié)點(diǎn):
removeChild
3).
innerHTML屬性:
8. 關(guān)于 value 和 nodeValue:
1).
value: html 表單元素的某個(gè)節(jié)點(diǎn)的
value 屬性值. <input
type="text" value=""> -- value 值可通過(guò) .value 獲取; 但 <p value=""></p> 中的 value 屬性值無(wú)法通過(guò) .value 干獲取
2).
nodeValue: 文檔(html 或 xml) 中節(jié)點(diǎn)的一個(gè)屬性, 該屬性和 nodeType, nodeName 并列. 該屬性通常用來(lái)獲取文本節(jié)點(diǎn)的文本值
9. 關(guān)于 if() 中可以放置的表達(dá)式: 當(dāng) if 中的表達(dá)式為 false, undefined, null,
"", 0 時(shí)表示不滿足條件, 此外都滿足條件.
10. 作業(yè): dom-8.html 中的: "為所有的 li 添加 click 事件, 實(shí)現(xiàn) game 和 city 對(duì)應(yīng)位置的 li 子節(jié)點(diǎn)的互換"
posted on 2010-01-18 22:20
d66380022 閱讀(180)
評(píng)論(0) 編輯 收藏