后期項目javascript加強

1、北京傳智播客教育 JavaScript加強講師：趙君北京傳智播客教育 回顧JavaScript基礎知識北京傳智播客教育 1. frame 2. windowdocument（文檔對象）location （位置對象）history （歷史對象）links 鏈接對象forms 表單對象數(shù)組0images 圖片對象瀏覽器的對象樹北京傳智播客教育 alert(信息) ： 消息框prompt(提示信息,默認值)： 標準輸入框confirm( ) ： 確認框open( ) ： 打開一個新窗口close( ) ： 關閉窗口 window對象常用方法北京傳智播客教育 訪問表單的方式: document.for

2、msn document.表單名字 Form表單對象北京傳智播客教育 屬 性對應的HTML標記說 明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)用，也可以在程序中直接使用返回的結果，例如：alert(sum=“ + square(2,3);不指定任何函

3、數(shù)值的函數(shù)，返回undefined。北京傳智播客教育 JavaScript定義函數(shù)的三種方式構造函數(shù)方法 new Function(); /構造函數(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=fu

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

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

6、關系。這些關系從圖中也很好看出來，直接連線的就是父子關系了。而有一個父親的就是兄妹關系 北京傳智播客教育 特性/方法類型/返回類型說 明nodeNameString節(jié)點的名字；根據(jù)節(jié)點的類型而定義nodeValueString節(jié)點的值；根據(jù)節(jié)點的類型而定義nodeTypeNumber節(jié)點的類型常量值之一ownerDocumentDocument指向這個節(jié)點所屬的文檔firstChildNode指向在childNodes列表中的第一個節(jié)點lastChildNode指向在childNodes列表中的最后一個節(jié)點childNodesNodeList所有子節(jié)點的列表previousSiblingNod

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

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

9、me()尋找有著給定name屬性的所有元素，這個方法將返回一個節(jié)點集合，這個集合可以當作一個數(shù)組來處理。這個集合的 length 屬性等于當前文檔里有著給定name屬性的所有元素的總個數(shù)。北京傳智播客教育 查找元素節(jié)點getElementsByTagName()尋找有著給定標簽名的所有元素，這個方法將返回一個節(jié)點集合，這個集合可以當作一個數(shù)組來處理。這個集合的 length 屬性等于當前文檔里有著給定標簽名的所有元素的總個數(shù)。 var elements = document.getElementsByTagName(tagName); var elements = element.getEle

10、mentsByTagName(tagName);該方法不必非得用在整個文檔上。它也可以用來在某個特定元素的子節(jié)點當中尋找有著給定標簽名的元素。 var container = document.getElementById(“sid”); var elements = container.getElementsByTagName(“p”); alert(elements .length);北京傳智播客教育 查看是否存在子節(jié)點hasChildNodes()該方法用來檢查一個元素是否有子節(jié)點，返回值是 true 或 false. var booleanValue = element.hasChil

11、dNodes();文本節(jié)點和屬性節(jié)點不可能再包含任何子節(jié)點，所以對這兩類節(jié)點使用 hasChildNodes 方法的返回值永遠是 false.如果 hasChildNodes 方法的返回值是 false，則 childNodes,firstChild,lastChild 將是空數(shù)組和空字符串。北京傳智播客教育 DOM 屬性 - nodeName文檔里的每個節(jié)點都有以下屬性。nodeName:一個字符串，其內(nèi)容是給定節(jié)點的名字。 var name = node.nodeName; * 如果節(jié)點是元素節(jié)點，nodeName返回這個元素的名稱 * 如果是屬性節(jié)點，nodeName返回這個屬性的名稱

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

13、定節(jié)點是一個屬性節(jié)點，返回值是這個屬性的值。 如果給定節(jié)點是一個文本節(jié)點，返回值是這個文本節(jié)點的內(nèi)容。 如果給定節(jié)點是一個元素節(jié)點，返回值是 null nodeValue 是一個 讀/寫 屬性，但不能對元素節(jié)點的 nodeValue 屬性設置值， 但可以為文本節(jié)點的 nodeValue 屬性設置一個值。 var li = document.getElementById(“l(fā)i”); if(li.firstChild.nodeType = 3) li.firstChild.nodeValue = “國慶”;北京傳智播客教育 替換節(jié)點replaceChild()把一個給定父元素里的一個子節(jié)點替換為

14、另外一個子節(jié)點var reference = element.replaceChild(newChild,oldChild);返回值是一個指向已被替換的那個子節(jié)點的引用指針。如果被插入的子節(jié)點還有子節(jié)點，則那些子節(jié)點也被插入到目標節(jié)點中 北京傳智播客教育 查找屬性節(jié)點和值getAttribute() 返回一個給定元素的一個給定屬性節(jié)點的值var attributeValue = element.getAttribute(attributeName);給定屬性的名字必須以字符串的形式傳遞給該方法。給定屬性的值將以字符串的形式返回，如果給定屬性不存在，getAttribute() 將返回一個空字符

15、串.getAttributeNode() 通過屬性獲取屬性節(jié)點 北京傳智播客教育 設置/刪除屬性節(jié)點setAttribute()將給定元素節(jié)點添加一個新的屬性值或改變它的現(xiàn)有屬性的值。 element.setAttribute(attributeName,attributeValue);屬性的名字和值必須以字符串的形式傳遞給此方法如果這個屬性已經(jīng)存在，它的值將被刷新；如果不存在，setAttribute()方法將先創(chuàng)建它再為其賦值。removeAttribute()刪除指定名字的屬性 北京傳智播客教育 創(chuàng)建新元素節(jié)點createElement()按照給定的標簽名創(chuàng)建一個新的元素節(jié)點。方法只有一

16、個參數(shù)：將被創(chuàng)建的元素的名字，是一個字符串. var reference = document.createElement(element);方法的返回值：是一個指向新建節(jié)點的引用指針。返回值是一個元素節(jié)點，所以它的 nodeType 屬性值等于 1。新元素節(jié)點不會自動添加到文檔里，新節(jié)點沒有 nodeParent 屬性，它只是一個存在于 JavaScript 上下文的對象.var pElement = document.createElement(p);北京傳智播客教育 創(chuàng)建新文本節(jié)點 createTextNode()創(chuàng)建一個包含著給定文本的新文本節(jié)點。這個方法的返回值是一個指向新建文本節(jié)點

17、引用指針。 var textNode = document.createTextNode(text);方法只有一個參數(shù)：新建文本節(jié)點所包含的文本字符串方法的返回值：是一個指向新建節(jié)點的引用指針。它是一個文本節(jié)點，所以它的 nodeType 屬性等于 3.新元素節(jié)點不會自動添加到文檔里，新節(jié)點沒有 nodeParent 屬性 北京傳智播客教育 innerHTML屬性瀏覽器幾乎都支持該屬性，但不是 DOM 標準的組成部分。innerHTML 屬性可以用來讀，寫某給定元素里的 HTML 內(nèi)容。北京傳智播客教育 插入節(jié)點(1)appendChild()為給定元素增加一個子節(jié)點： var newrefe

18、rence = element.appendChild(newChild). 給定子節(jié)點 newChild 將成為給定元素節(jié)點 element 的最后一個子節(jié)點。方法的返回值是一個指向新增子節(jié)點的引用指針。該方法通常與 createElement() createTextNode() 配合使用新節(jié)點可以被追加給文檔中的任何一個元素北京傳智播客教育 插入節(jié)點(2)insertBefore()把一個給定節(jié)點插入到一個給定元素節(jié)點的給定子節(jié)點的前面 var reference = element.insertBefore(newNode,targetNode); 節(jié)點 newNode 將被插入到元素

19、節(jié)點 element 中并出現(xiàn)在節(jié)點 targetNode 的前面.節(jié)點 targetNode 必須是 element 元素的一個子節(jié)點。該方法通常與 createElement() 和 createTextNode() 配合使用北京傳智播客教育 插入節(jié)點(3)DOM 沒有提供 insertAfter() 方法selectElement.insertBefore(newOptionElement,optionElement.nextSibling);北京傳智播客教育 刪除節(jié)點removeChild()從一個給定元素里刪除一個子節(jié)點 var reference = element.removeC

20、hild(node);返回值是一個指向已被刪除的子節(jié)點的引用指針。某個節(jié)點被removeChild()方法刪除時,這個節(jié)點所包含的所有子節(jié)點將同時被刪除。如果想刪除某個節(jié)點，但不知道它的父節(jié)點是哪一個，parentNode 屬性可以幫忙。北京傳智播客教育 遍歷節(jié)點樹childNodes：返回一個數(shù)組，這個數(shù)組由給定元素節(jié)點的子節(jié)點構成：var nodeList = node.childNodes;文本節(jié)點和屬性節(jié)點都不可能再包含任何子節(jié)點，所以它們的 childNodes 屬性永遠會返回一個空數(shù)組。如果想知道某個元素有沒有子節(jié)點，可以用 hasChildNodes 方法。如果想知道某個元素有多少個子節(jié)點，可以用 childNodes 數(shù)組的 length 屬性。childNodes 屬性是一個只讀屬性。北京傳智播客教育 獲取第一個子節(jié)點firstChild：該屬性返回一個給定元素節(jié)點的第一個子節(jié)點，返回這個節(jié)點對象的指針。 var reference = node.firstChild;文本節(jié)點和屬性節(jié)點都不可能包含任何子節(jié)點，所以它們的 firstChild 屬性永遠會返回