參考成果加強

1、北京傳智播客教育 JavaScript加強講師:王昭珽北京傳智播客教育 Aptana簡介北京傳智播客教育 Aptana插件在eclipse中安裝北京傳智播客教育 Aptana插件在MyEclipse中安裝北京傳智播客教育 Aptana增加提示功能北京傳智播客教育 回顧JavaScript基礎(chǔ)知識講師:王昭珽北京傳智播客教育 瀏覽器的對象樹北京傳智播客教育 alert(信息) ： 消息框prompt(提示信息,默認值)： 標(biāo)準(zhǔn)輸入框confirm( ) ： 確認框open( ) ： 打開一個新窗口close( ) ： 關(guān)閉窗口window對象常用方法北京傳智播客教育 訪問表單的方式: * doc

2、ument.formsn * document.表單名字表單對象常用的屬性action 表單提交的目的地址 method表單提交方式 name 表單名稱Form表單對象北京傳智播客教育 javaScript定義函數(shù)的三種方式正常方法function print(msg) document.write(msg);對函數(shù)進行調(diào)用的幾種方式： 函數(shù)名（傳遞給函數(shù)的參數(shù)1，傳遞給函數(shù)的參數(shù)2，.）變量 = 函數(shù)名（傳遞給函數(shù)的參數(shù)1，傳遞給函數(shù)的參數(shù)2，.）對于有返回值的函數(shù)調(diào)用，也可以在程序中直接使用返回的結(jié)果，例如：alert(sum=“ + square(2,3);不指定任何函數(shù)值的函數(shù)，返回u

3、ndefined。北京傳智播客教育 javaScript定義函數(shù)的三種方式構(gòu)造函數(shù)方法 new Function(); /構(gòu)造函數(shù)方式定義javascript函數(shù) 注意Function中的F大寫 var add=new Function(a,b,return a+b;); /調(diào)用上面定義的add函數(shù) var sum=add(3,4); alert(sum); 注:接受任意多個字符串參數(shù)，最后一個參數(shù)是函數(shù)體。 如果只傳一個字符串，則其就是函數(shù)體。北京傳智播客教育 javaScrip定義函數(shù)的三種方式函數(shù)直接量定義函數(shù) /使用函數(shù)直接量的方式定義函數(shù) var result=function(a,

4、b)return a+b; /調(diào)用使用函數(shù)直接量定義的函數(shù) var sum=result(7,8); alert(sum); 注:函數(shù)直接量是一個表達式，它可以定義匿名函數(shù) 北京傳智播客教育 回顧javaScript基礎(chǔ)知識完北京傳智播客教育 DOMDOM ：DOM是Document Object Model文檔對象模型的縮寫。根據(jù)W3C DOM規(guī)范,DOM是一種與瀏覽器，平臺，語言無關(guān)的接口，使得你可以訪問頁面其他的標(biāo)準(zhǔn)組件 D：文檔 html 文檔 或 xml 文檔 O：對象 document 對象的屬性和方法 M：模型 DOM 是針對xml(html)的基于樹的API。 DOM樹:節(jié)點（

5、node）的層次。 DOM 把一個文檔表示為一棵家譜樹（父，子，兄弟） DOM定義了Node的接口以及許多種節(jié)點類型來表示XML節(jié)點的多個方面北京傳智播客教育 DOM的結(jié)構(gòu)北京傳智播客教育 DOM的結(jié)構(gòu)北京傳智播客教育 節(jié)點及其類型節(jié)點 * 由結(jié)構(gòu)圖中我們可以看到，整個文檔就是一個文檔節(jié)點。 * 而每一個HMTL標(biāo)簽都是一個元素節(jié)點。 * 標(biāo)簽中的文字則是文本節(jié)點。 * 標(biāo)簽的屬性是屬性節(jié)點。 * 一切都是節(jié)點節(jié)點樹 節(jié)點樹的概念從圖中一目了然，最上面的就是“樹根”了。節(jié)點之間有父子關(guān)系，祖先與子孫關(guān)系，兄妹關(guān)系。這些關(guān)系從圖中也很好看出來，直接連線的就是父子關(guān)系了。而有一個父親的就是兄妹關(guān)系

6、 北京傳智播客教育 特性/方法類型/返回類型說 明nodeNameString節(jié)點的名字；根據(jù)節(jié)點的類型而定義nodeValueString節(jié)點的值；根據(jù)節(jié)點的類型而定義nodeTypeNumber節(jié)點的類型常量值之一ownerDocumentDocument指向這個節(jié)點所屬的文檔firstChildNode指向在childNodes列表中的第一個節(jié)點lastChildNode指向在childNodes列表中的最后一個節(jié)點childNodesNodeList所有子節(jié)點的列表previousSiblingNode指向前一個兄弟節(jié)點；如果這個節(jié)點就是第一個兄弟節(jié)點，那么該值為nullnextSib

7、lingNode指向后一個兄弟節(jié)點；如果這個節(jié)點就是最后一個兄弟節(jié)點，那么該值為nullhasChildNodes()Boolean當(dāng)childNodes包含一個或多個節(jié)點時，返回真attributesNamedNodeMap包含了代表一個元素的特性的Attr對象；僅用于Element節(jié)點appendChild(node)Node將node添加到childNodes的末尾removeChild(node)Node從childNodes中刪除nodereplaceChild(newnode, oldnode)Node將childNodes中的oldnode替換成newnodeinsertBefo

8、re(newnode, refnode)Node在childNodes中的refnode之前插入newnodeNODE接口的特性和方法北京傳智播客教育 查找元素節(jié)點getElementById() 尋找一個有著給定 id 屬性值的元素，返回值是一個有著給定 id 屬性值的元素節(jié)點。如果不存在這樣的元素，它返回 null.var oElement = document.getElementById ( sID ) 該方法只能用于 document 對象 function test() var usernameElement=document.getElementById(“tid); /獲取元素

9、的值 alert(usernameElement.value: +usernameElement.value) /獲取元素的類型 alert(usernameElement.type: +usernameElement.type)北京傳智播客教育 查找元素節(jié)點getElementsByName()尋找有著給定name屬性的所有元素，這個方法將返回一個節(jié)點集合，這個集合可以當(dāng)作一個數(shù)組來處理。這個集合的 length 屬性等于當(dāng)前文檔里有著給定name屬性的所有元素的總個數(shù)。 function test() var tnameArray=document.getElementsByName(tn

10、ame); alert(tnameArray.length); for(var i=0;itnameArray.length;i+) window.alert(tnameArrayi.value); 北京傳智播客教育 查找元素節(jié)點 /該方法返回是數(shù)組類型 var usernameElements=document.getElementsByName(username); for (var i = 0; i usernameElements.length; i+) /獲取元素的類型 /alert(usernameElementsi.type) /獲取元素value的值 /alert(userna

11、meElementsi.value); /采用函數(shù)直接量的方法 usernameElementsi.onchange = function() alert(this.value); 北京傳智播客教育 查找元素節(jié)點getElementsByTagName()尋找有著給定標(biāo)簽名的所有元素，這個方法將返回一個節(jié)點集合，這個集合可以當(dāng)作一個數(shù)組來處理。這個集合的 length 屬性等于當(dāng)前文檔里有著給定標(biāo)簽名的所有元素的總個數(shù)。 var elements = document.getElementsByTagName(tagName); var elements = element.getElemen

12、tsByTagName(tagName);該方法不必非得用在整個文檔上。它也可以用來在某個特定元素的子節(jié)點當(dāng)中尋找有著給定標(biāo)簽名的元素。 var container = document.getElementById(“sid”); var elements = container.getElementsByTagName(“p”); alert(elements .length);北京傳智播客教育 查找元素節(jié)點/ /處理input/ var inputElements=document.getElementsByTagName(input);/ /輸出input標(biāo)簽的長度/ /alert(i

13、nputElements.length);/ for(var i=0;iinputElements.length;i+)/ if(inputElementsi.type!=button)/submit/ alert(inputElementsi.value);/ / /處理select/ /獲取select標(biāo)簽/ var selectElements=document.getElementsByTagName(select);/ /獲取select下的子標(biāo)簽/ for(var j=0;jselectElements.length;j+)/ var optionElements=selectEl

14、ementsj.getElementsByTagName(option);/ for(var i=0;ioptionElements.length;i+)/ alert(optionElementsi.value);/ / var textareaElements=document.getElementsByTagName(textarea); alert(textareaElements0.value);北京傳智播客教育 查找元素節(jié)點 var inputElements=document.getElementsByTagName(input); for(var i=0;iinputEleme

15、nts.length;i+) if (inputElements.type != submit) inputElementsi.onchange = function() alert(this.value) ; var selectElements=document.getElementsByTagName(select); for (var i = 0; i selectElements.length; i+) selectElementsi.onchange=function() alert(this.value); 北京傳智播客教育 查找元素節(jié)點 var textareaElements

16、=document.getElementsByTagName(textarea); for (var i = 0; i textareaElements.length; i+) textareaElementsi.onchange = function() alert(this.value); ; 北京傳智播客教育 查看是否存在子節(jié)點hasChildNodes()該方法用來檢查一個元素是否有子節(jié)點，返回值是 true 或 false. var booleanValue = element.hasChildNodes();文本節(jié)點和屬性節(jié)點不可能再包含任何子節(jié)點，所以對這兩類節(jié)點使用 hasCh

17、ildNodes 方法的返回值永遠是 false.如果 hasChildNodes 方法的返回值是 false，則 childNodes,firstChild,lastChild 將是空數(shù)組和空字符串。北京傳智播客教育 hasChildNodes() var selectElements=document.getElementsByTagName(select); alert(selectElements0.hasChildNodes()var inputElements=document.getElementsByTagName(input);for(var i=0;iinputElemen

18、ts.length;i+) alert(inputElementsi.hasChildNodes();北京傳智播客教育 DOM 屬性 - nodeName文檔里的每個節(jié)點都有以下屬性。nodeName:一個字符串，其內(nèi)容是給定節(jié)點的名字。 var name = node.nodeName; * 如果節(jié)點是元素節(jié)點，nodeName返回這個元素的名稱 * 如果是屬性節(jié)點，nodeName返回這個屬性的名稱 * 如果是文本節(jié)點，nodeName返回一個內(nèi)容為#text 的字符串 注:nodeName 是一個只讀屬性。北京傳智播客教育 DOM 屬性 - nodeTypenodeType：返回一個整數(shù)

19、，這個數(shù)值代表著給定節(jié)點的類型。nodeType 屬性返回的整數(shù)值對應(yīng)著 12 種節(jié)點類型,常用的有三種：Node.ELEMENT_NODE -1 - 元素節(jié)點Node.ATTRIBUTE_NODE -2 - 屬性節(jié)點Node.TEXT_NODE -3 - 文本節(jié)點nodeType 是個只讀屬性北京傳智播客教育 DOM 屬性 - nodeValuenodeValue：返回給定節(jié)點的當(dāng)前值（字符串） 如果給定節(jié)點是一個屬性節(jié)點，返回值是這個屬性的值。 如果給定節(jié)點是一個文本節(jié)點，返回值是這個文本節(jié)點的內(nèi)容。 如果給定節(jié)點是一個元素節(jié)點，返回值是 null nodeValue 是一個 讀/寫 屬性

20、，但不能對元素節(jié)點的 nodeValue 屬性設(shè)置值， 但可以為文本節(jié)點的 nodeValue 屬性設(shè)置一個值。 var li = document.getElementById(“l(fā)i”); if(li.firstChild.nodeType = 3) li.firstChild.nodeValue = “傳智播客”;北京傳智播客教育 練習(xí)問題: 打印 ”明天休息” (利用兩種方法) 提示:使用(firstChild lastChild childNodes)北京傳智播客教育 練習(xí)問題:打印出 id=“bj” 該節(jié)點的所有子節(jié)點的(nodeName, nodeType, nodeValue)

21、同時打印文本值 北京 海淀 奧運 北京傳智播客教育 練習(xí)問題: 輸出所有select元素下的所有option元素中對應(yīng)的文本內(nèi)容 例如:中專 輸出-中專北京傳智播客教育 元素節(jié)點/測試元素節(jié)點,輸出節(jié)點名稱,節(jié)點的類型,節(jié)點的值 var liElements=document.getElementsByTagName(li); for(var i=0;iliElements.length;i+) alert(liElementsi.nodeName); alert(liElementsi.nodeType); alert(liElementsi.nodeValue); 北京傳智播客教育 屬性節(jié)

22、點/測試屬性節(jié)點,輸出屬性節(jié)點名稱,節(jié)點的類型,節(jié)點的值 var liElements=document.getElementsByTagName(li); for(var i=0;iliElements.length;i+) var attrElement=liElementsi.getAttributeNode(value) alert(attrElement.nodeName +attrElement.nodeName); alert(attrElement.nodeType +attrElement.nodeType); alert(attrElement.nodeValue +liE

23、lementsi.getAttribute(value); 北京傳智播客教育 文本節(jié)點 /測試元素節(jié)點,輸出節(jié)點名稱,節(jié)點的類型,節(jié)點的值 var liElements=document.getElementsByTagName(li); for(var i=0;iliElements.length;i+) alert(liElementsi.childNodes0.nodeName); alert(liElementsi.childNodes0.nodeType); alert(liElementsi.childNodes0.nodeValue); liElementsi.childNode

24、s0.nodeValue=南京; alert(liElementsi.childNodes0.nodeValue); /另一種讀取方法 alert(liElementsi.firstChild.nodeName); alert(liElementsi.firstChild.nodeType); alert(liElementsi.firstChild.nodeValue); 北京傳智播客教育 替換節(jié)點replaceChild()把一個給定父元素里的一個子節(jié)點替換為另外一個子節(jié)點var reference = element.replaceChild(newChild,oldChild);返回值

25、是一個指向已被替換的那個子節(jié)點的引用指針。如果被插入的子節(jié)點還有子節(jié)點，則那些子節(jié)點也被插入到目標(biāo)節(jié)點中 北京傳智播客教育 練習(xí)問題:當(dāng)單擊”北京”這個節(jié)點時,北京這個節(jié)點被 ”反恐精英”替換北京傳智播客教育 替換節(jié)點例子 /方法一/ var cityElement=document.getElementById(city);/ var loveElement=document.getElementById(love);/ var cityChildElement=document.getElementById(beijing);/ var loveChildElement=document.

26、getElementById(fankong);/ var oldElement=cityElement.replaceChild(loveChildElement,cityChildElement);/ loveElement.appendChild(oldElement);/ alert(oldElement.getAttribute(id); var cityElement=document.getElementById(city); cityElement.onclick=function() var cityChildElement=document.getElementById(b

27、eijing); var loveChildElement=document.getElementById(fankong); var oldElement=cityElement.replaceChild(loveChildElement,cityChildElement); loveElement.appendChild(oldElement); alert(oldElement.getAttribute(id); 北京傳智播客教育 查找屬性節(jié)點getAttribute() 返回一個給定元素的一個給定屬性節(jié)點的值var attributeValue = element.getAttribu

28、te(attributeName);給定屬性的名字必須以字符串的形式傳遞給該方法。給定屬性的值將以字符串的形式返回，如果給定屬性不存在，getAttribute() 將返回一個空字符串.通過屬性獲取屬性節(jié)點 getAttributeNode(屬性的名稱)-Node北京傳智播客教育 查找屬性節(jié)點 北京 /通過屬性名獲取屬性的值 var bjElement=document.getElementById(bj); var attributeValue=eduElement.getAttribute(name); alert(attributeValue +attributeValue); /通過屬

29、性名獲取屬性的節(jié)點 var bjNode=eduElement.getAttributeNode(name); alert(eduNode.nodeValue); alert(eduNode.nodeType); alert(eduNode.nodeName);北京傳智播客教育 設(shè)置屬性節(jié)點setAttribute()將給定元素節(jié)點添加一個新的屬性值或改變它的現(xiàn)有屬性的值。 element.setAttribute(attributeName,attributeValue);屬性的名字和值必須以字符串的形式傳遞給此方法如果這個屬性已經(jīng)存在，它的值將被刷新；如果不存在，setAttribute(

30、)方法將先創(chuàng)建它再為其賦值。 北京傳智播客教育 設(shè)置屬性節(jié)點 北京 /獲取元素的引用 var bjElement=document.getElementById(bj); /設(shè)置屬性值 bjElement.setAttribute(name,beijing); /獲取設(shè)置的屬性值 var nameValue=bjElement.getAttribute(name); alert(nameValue +nameValue);北京傳智播客教育 創(chuàng)建新元素節(jié)點createElement()按照給定的標(biāo)簽名創(chuàng)建一個新的元素節(jié)點。方法只有一個參數(shù)：將被創(chuàng)建的元素的名字，是一個字符串. var refer

31、ence = document.createElement(element);方法的返回值：是一個指向新建節(jié)點的引用指針。返回值是一個元素節(jié)點，所以它的 nodeType 屬性值等于 1。新元素節(jié)點不會自動添加到文檔里，新節(jié)點沒有 nodeParent 屬性，它只是一個存在于 JavaScript 上下文的對象.var pElement = document.createElement(p);北京傳智播客教育 設(shè)置屬性節(jié)點 /創(chuàng)建一個新的元素 var pElement=document.createElement(li); /設(shè)置屬性值 pElement.setAttribute(id,pid

32、); /獲取父元素 var loveElement=document.getElementById(love); /在父元素中增加子元素loveElement.appendChild(pElement); /通過id獲取剛創(chuàng)建的元素 var pidElement=document.getElementById(pid); alert(pidElement.getAttribute(id);北京傳智播客教育 創(chuàng)建新文本節(jié)點 createTextNode()創(chuàng)建一個包含著給定文本的新文本節(jié)點。這個方法的返回值是一個指向新建文本節(jié)點引用指針。 var textNode = document.crea

33、teTextNode(text);方法只有一個參數(shù)：新建文本節(jié)點所包含的文本字符串方法的返回值：是一個指向新建節(jié)點的引用指針。它是一個文本節(jié)點，所以它的 nodeType 屬性等于 3.新元素節(jié)點不會自動添加到文檔里，新節(jié)點沒有 nodeParent 屬性 var pElementText=document.createElement(li); var textElement=document.createTextNode(南京); pElementText.appendChild(textElement);北京傳智播客教育 插入節(jié)點(1)appendChild()為給定元素增加一個子節(jié)點：

34、var newreference = element.appendChild(newChild). 給定子節(jié)點 newChild 將成為給定元素節(jié)點 element 的最后一個子節(jié)點。方法的返回值是一個指向新增子節(jié)點的引用指針。該方法通常與 createElement() createTextNode() 配合使用新節(jié)點可以被追加給文檔中的任何一個元素 var newliElement=document.createElement(li); var textNode=document.createTextNode(北京); newliElement.appendChild(textNode);

35、 document.body.appendChild(newliElement); var liElement=document.getElementsByTagName(li); var textValue=liElement0.firstChild.nodeValue; alert(textValue);北京傳智播客教育 練習(xí)問題: 在id=edu下增加大專北京傳智播客教育 插入節(jié)點(2)insertBefore()把一個給定節(jié)點插入到一個給定元素節(jié)點的給定子節(jié)點的前面 var reference = element.insertBefore(newNode,targetNode); 節(jié)點

36、 newNode 將被插入到元素節(jié)點 element 中并出現(xiàn)在節(jié)點 targetNode 的前面.節(jié)點 targetNode 必須是 element 元素的一個子節(jié)點。該方法通常與 createElement() 和 createTextNode() 配合使用 北京 上海 /獲取父節(jié)點 var parentCityNode=document.getElementById(city); /獲取子節(jié)點 var beijingNode=document.getElementById(beijing); var shanghaiNode=document.getElementById(shangha

37、i); /插入 parentCityNode.insertBefore(shanghaiNode,beijingNode);北京傳智播客教育 插入節(jié)點(2) 北京 /獲取父節(jié)點 var parentCityNode=document.getElementById(city); /獲取子節(jié)點 var beijingNode=document.getElementById(beijing); /創(chuàng)建節(jié)點newShanghaiNode var newShanghaiNode=document.createElement(li); /創(chuàng)建newShanghaiNode節(jié)點的文本節(jié)點 var newTe

38、xtNode=document.createTextNode(上海);/在創(chuàng)建的節(jié)點上增加文本 newShanghaiNode.appendChild(newTextNode); /插入節(jié)點 parentCityNode.insertBefore(newShanghaiNode,beijingNode);北京傳智播客教育 插入節(jié)點(3)DOM 沒有提供 insertAfter() 方法function insertAfter(newElement,targetElement) /獲取目標(biāo)元素的父節(jié)點var parentElement=targetElement.parentNode; /如果目

39、標(biāo)元素是最后一個元素,則新元素插入到目標(biāo)元素的后面if(parentElement.lastChild=targetElement) parentElement.appendChild(newElement);else/如果目標(biāo)元素不是最后一個元素,則新元素插入到目標(biāo)元素的的 /下一個兄弟節(jié)點的前面,即目標(biāo)元素的后面 parentElement.insertBefore(newElement,targetElement.nextSibling); 北京傳智播客教育 刪除節(jié)點removeChild()從一個給定元素里刪除一個子節(jié)點 var reference = element.removeCh

40、ild(node);返回值是一個指向已被刪除的子節(jié)點的引用指針。某個節(jié)點被removeChild()方法刪除時,這個節(jié)點所包含的所有子節(jié)點將同時被刪除。如果想刪除某個節(jié)點，但不知道它的父節(jié)點是哪一個，parentNode 屬性可以幫忙。 北京 var ulElement=document.getElementById(city); var liElement=document.getElementById(beijing); ulElement.removeChild(liElement); 北京 var liElement=document.getElementById(beijing);

41、var parentElement=liElement.parentNode; parentElement.removeChild(liElement);北京傳智播客教育 遍歷節(jié)點樹ChildNodes：返回一個數(shù)組，這個數(shù)組由給定元素節(jié)點的子節(jié)點構(gòu)成：var nodeList = node.childNodes;文本節(jié)點和屬性節(jié)點都不可能再包含任何子節(jié)點，所以它們的 ChildNodes 屬性永遠會返回一個空數(shù)組。如果想知道某個元素有沒有子節(jié)點，可以用 hasChildNodes 方法。如果想知道某個元素有多少個子節(jié)點，可以用 childNodes 數(shù)組的 length 屬性。childNo

42、des 屬性是一個只讀屬性。北京傳智播客教育 獲取第一個子節(jié)點firstChild：該屬性返回一個給定元素節(jié)點的第一個子節(jié)點，返回這個節(jié)點對象的指針。 var reference = node.firstChild;文本節(jié)點和屬性節(jié)點都不可能包含任何子節(jié)點，所以它們的 firstChild 屬性永遠會返回 null。某個元素的 firstChild 屬性等價于這個元素的 childNodes 節(jié)點集合中的第一個節(jié)點，即： var reference = node.ChildNodes0;firstChild 屬性是一個只讀屬性。北京傳智播客教育 獲取最后一個子節(jié)點lastChild：對應(yīng) fi

43、rstChild 的一個屬性。nextSibling: 返回一個給定節(jié)點的下一個兄弟節(jié)點。parentNode：返回一個給定節(jié)點的父節(jié)點。parentNode 屬性返回的節(jié)點永遠是一個元素節(jié)點，因為只有元素節(jié)點才有可能包含子節(jié)點。document 節(jié)點的沒有父節(jié)點。previousSibling：返回一個給定節(jié)點的上一個兄弟節(jié)點北京傳智播客教育 innerHTML屬性瀏覽器幾乎都支持該屬性，但不是 DOM 標(biāo)準(zhǔn)的組成部分。innerHTML 屬性可以用來讀，寫某給定元素里的 HTML 內(nèi)容。 var divElement=document.getElementById(city); divElement.innerHTML=北