JavaScript基礎(chǔ)知識匯總

1、DOM1. DOM： Document Object Model(文本對象模型)D：文檔 -html文檔或xml文檔O:對象-document對象的屬性和方法M :模型DOM是針對xml(html)的基于樹的AP。DOM樹:節(jié)點(node)的層次。DOM 把一個文檔表示為一棵家譜樹(父，子，兄弟)DOM定義了 Node的接口以及許多種節(jié)點類型來表示 XML節(jié)點的多個方面2. 節(jié)點及其類型節(jié)點(node):來源于網(wǎng)絡(luò)理論，代表網(wǎng)絡(luò)中的一個連接點。網(wǎng)絡(luò)是由節(jié)點構(gòu)成 的集合3. Node接口的特性和方法4. 查找元素節(jié)點 getElementById()尋找一個有著給定 id 屬性值的元素，返回值是

2、一個有著給定 id 屬性值的元素 節(jié)點。如果不存在這樣的元素，它返回 null。var element = document.getElementById(ID); 該方法只能用于 document 對象 getElementsByTagName()尋找有著給定標簽名的所有元素， 這個方法將返回一個節(jié)點集合， 這個集合可以 當作一個數(shù)組來處理。這個集合的 length 屬性等于當前文檔里有著給定標簽名 的所有元素的總個數(shù)。var elements = element.getElementsByTagName(tagName); 該方法不必非得用在整個文檔上。 它也可以用來在某個特定元素的子節(jié)點

3、當中尋 找有著給定標簽名的元素。var container =document.getElementById(“content”);var paras = container.getElementsByTagName“( p”);alert(paras.length);5. 查看是否存在子節(jié)點 hasChildNodes() 該方法用來檢查一個元素是否有子節(jié)點，返回值是 true 或 false.var booleanValue = element.hasChildNodes(); 文本節(jié)點和屬性節(jié)點不可能再包含任何子節(jié)點，所以對這兩類節(jié)點使用 hasChildNodes 方法的返回值永遠是

4、false.如果 hasChildNodes 方法的返回值是 false,貝U childNodes,firstChild,lastChild 將 是空數(shù)組和空字符串。6. DOM 屬性-nodeName 文檔里的每個節(jié)點都有以下屬性。nodeName:一個字符串，其內(nèi)容是給定節(jié)點的名字。var name = node.nodeName;如果給定節(jié)點是一個元素節(jié)點或?qū)傩怨?jié)點， nodeName 屬性將返回這個元素的名 字。如果給定節(jié)點是一個文本節(jié)點， nodeName 屬性將返回內(nèi)容為 #text 的字符串。 nodeName 是一個只讀屬性。7. DOM 屬性-nodeTypenodeTyp

5、e：返回一個整數(shù)，這個數(shù)值代表著給定節(jié)點的類型。 nodeType 屬性返回的整數(shù)值對應著 12 種節(jié)點類型： Node.ELEMENT_NODE (1)- 元素節(jié)點Node.ATTRIBUTE_NODE (2) - 屬性節(jié)點 Node.TEXT_NODE (3)- 文本節(jié)點nodeType 是個只讀屬性8. DOM 屬性 -nodeValuenodeValue：返回給定節(jié)點的當前值(字符串) 如果給定節(jié)點是一個屬性節(jié)點，返回值是這個屬性的值。 如果給定節(jié)點是一個文本節(jié)點，返回值是這個文本節(jié)點的內(nèi)容。如果給定節(jié)點是一個元素節(jié)點，返回值是 nullnodeValue 是一個 讀/ 寫 屬性，但不

6、能對元素節(jié)點的nodeValue 屬性設(shè)置值，但可以為文本節(jié)點的 nodeValue 屬性設(shè)置一個值。var message = document.getElementById“( fineprint ”);“this might work ”;9. 替換節(jié)點 replaceChild() 把一個給定父元素里的一個子節(jié)點替換為另外一個子節(jié)點 var reference = element.replaceChild(newChild,oldChild); 返回值是一個指向已被替換的那個子節(jié)點的引用指針。如果被插入的子節(jié)點還有子節(jié)點，則那些子節(jié)點也被插入到目標節(jié)點中var container =

7、document.getElementById(“content”);var message = document.getElementById“( fineprint ”);var announcement = document.getElementById(“headline”);var oldmessage = container.replaceChild(announcement,message); container.appendChild(oldmessage);10. 查找屬性節(jié)點 getAttribute() 返回一個給定元素的一個給定屬性節(jié)點的值var attributeVa

8、lue = element.getAttribute(attributeName); 給定屬性的名字必須以字符串的形式傳遞給該方法。 給定屬性的值將以字符串的形式返回，如果給定屬性不存在， getAttribute() 將 返回一個空字符串 .11. 設(shè)置屬性節(jié)點 setAttribute() 將給定元素節(jié)點添加一個新的屬性值或改變它的現(xiàn)有屬性的值。element.setAttribute(attributeName,attributeValue); 屬性的名字和值必須以字符串的形式傳遞給此方法 如果這個屬性已經(jīng)存在，它的值將被刷新；如果不存在，setAttribute()方法將先創(chuàng)建它再為其

9、賦值。var para = document.createElement(“p”);para.setAttribute(“id”,”fineprint ”);var container = document.getElementById(“content ”); container.appendChild(para);12. 創(chuàng)建新元素節(jié)點 createElement() 按照給定的標簽名創(chuàng)建一個新的元素節(jié)點。 方法只有一個參數(shù)： 將被創(chuàng)建的元素 的名字，是一個字符串 .var reference = document.createElement(element); 方法的返回值： 是一個指向

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

11、是一個指向新建節(jié)點的引用指針。 它是一個文本節(jié)點， 所以它的 nodeType 屬性等于 3.新元素節(jié)點不會自動添加到文檔里，新節(jié)點沒有 nodeParent 屬性var oText = document.createTextNode(“Hello World” );14. 插入節(jié)點 (1)appendChild() 為給定元素增加一個子節(jié)點： var reference = element.appendChild(newChild).給定子節(jié)點 newChild 將成為給定元素節(jié)點 element 的最后一個子節(jié)點。 方法的返回值是一個指向新增子節(jié)點的引用指針。該方法通常與 createEl

12、ement() createTextNode() 配合使用var para = document.createElement(“ p”);var message = document.createTextNode“( Hello World”); para.appendChild(message);新節(jié)點可以被追加給文檔中的任何一個元素 insertBefore() 把一個給定節(jié)點插入到一個給定元素節(jié)點的給定子節(jié)點的前面var reference = element.insertBefore(newNode,targetNode);節(jié)點 newNode 將被插入到元素節(jié)點 element 中并

13、出現(xiàn)在節(jié)點 targetNode 的前面 .節(jié)點 targetNode 必須是 element 元素的一個子節(jié)點。 該方法通常與 createElement() 和 createTextNode() 配合使用var container = document.getElementById(“content ”);var message = document.getElementById“( fineprint ”);var para = document.createElement(“ p”); container.insertBefore(para,message);15. 刪除節(jié)點 remo

14、veChild() 從一個給定元素里刪除一個子節(jié)點var reference = element.removeChild(node); 返回值是一個指向已被刪除的子節(jié)點的引用指針。 某個節(jié)點被 removeChild() 方法刪除時，這個節(jié)點所 包含的所有子節(jié)點將同時被刪除。var container = document.getElementById(“ content ”);var message = document.getElementById“( fineprint ”); container.removeChild(message); 如果想刪除某個節(jié)點，但不知道它的父節(jié)點是哪一個

15、， parentNode 屬性可以幫 忙。var message = document.getElementById“( fineprint ” );var container = message.parentNode; container.removeChild(message);16. 遍歷節(jié)點樹 ChildNodes：返回一個數(shù)組，這個數(shù)組由給定元素節(jié)點的子節(jié)點構(gòu)成： var nodeList = node.childNodes;文本節(jié)點和屬性節(jié)點都不可能再包含任何子節(jié)點，所以它們的 ChildNodes 屬性 永遠會返回一個空數(shù)組。如果想知道某個元素有沒有子節(jié)點，可以用 hasChil

16、dNodes 方法。 如果想知道某個元素有多少個子節(jié)點，可以用 childNodes 數(shù)組的 length 屬性。 childNodes 屬性是一個只讀屬性。17. 獲取第一個子節(jié)點firstChild:該屬性返回一個給定元素節(jié)點的第一個子節(jié)點，返回這個節(jié)點對象的 指針。var reference = node.firstChild; 文本節(jié)點和屬性節(jié)點都不可能包含任何子節(jié)點，所以它們的 firstChild 屬性永遠 會返回 null。某個元素的 firstChild 屬性等價于這個元素的 childNodes 節(jié)點集合中的第一個 節(jié)點，即：var reference = node.Chil

17、dNodes0; firstChild 屬性是一個只讀屬性。18. 獲取最后一個子節(jié)點lastChild:對應 firstChild 的一個屬性。 nextSibling: 返回一個給定節(jié)點的下一個子節(jié)點。 pare ntNode :返回一個給定節(jié)點的父節(jié)點。 parentNode 屬性返回的節(jié)點永遠是一個元素節(jié)點，因為只有元素節(jié)點才有可能 包含子節(jié)點。document 節(jié)點的沒有父節(jié)點。 previousSibli ng：返回一個給定節(jié)點的上一個子節(jié)點19. i nn erHTML 屬性 瀏覽器幾乎都支持該屬性，但不是 DOM 標準的組成部分。 innerHTML 屬性可以用來讀，寫某給定元

18、素里的 HTML 內(nèi)容。1. 節(jié)點及其類型 :1) . 元素節(jié)點2) . 屬性節(jié)點 : 元素的屬性 , 可以直接通過屬性的方式來操作 .3) .文本節(jié)點：是元素節(jié)點的子節(jié)點，其內(nèi)容為文本.2. 在html文檔的什么位置編寫js代碼？0).直接在html頁面中書寫代碼.vbutton id=button onclick=alert(hello world);Click Me!缺點： .js和html強耦合,不利用代碼的維護 .若click相應函數(shù)是比較復雜的,則需要先定義一個函數(shù),然后再在on click 屬性中完成對函數(shù)的引用，比較麻煩1) . 一般地,不能在body節(jié)點之前來直接獲取 bod

19、y內(nèi)的節(jié)點,因為此時html 文檔樹還沒有加載完成，獲取不到指定的節(jié)點：vheadxmeta http-equiv=C onten t-Type conten t=text/html; charset=UTF-8 U ntitled Docume ntvar cityNode = docume nt.getEleme ntByld(city);/打印結(jié)果為null. alert(cityNode);2) .可以在整個html文檔的最后編寫類似代碼，但這不符合習慣3) . 一般地，在body節(jié)點之前編寫js代碼，但需要利用 window.onload事件, 該事件在當前文檔完全加載之后被觸發(fā)，所

20、以其中的代碼可以獲取到當前文檔的任何節(jié)點.U ntitled Docume ntwin dow. onl oad = fun ctio n()var cityNode = docume nt.getEleme ntByld(city); alert(cityNode);3. 如何來獲取元素節(jié)點：1) . *document.getElementByld:根據(jù)id屬性獲取對應的單個節(jié)點2) . *docume nt.getEleme ntsByTagName:根據(jù)標簽名獲取指定節(jié)點名字的數(shù)組 ， 數(shù)組對象length屬性可以獲取數(shù)組的長度3) . document.getElementsByNa

21、me:根據(jù)節(jié)點的 name屬性獲取符合條件的節(jié)點 數(shù)組，但ie的實現(xiàn)方式和 W3C標準有差別：在html文檔中若某節(jié)點(li)沒有name屬性，則ie使用getElementsByName 不能獲取到節(jié)點數(shù)組，但火狐可以.4) .其它的兩個方法，ie根本就不支持,所以不建議使用4. 獲取屬性節(jié)點：1) . * 可以直接通過 cityNode.id 這樣的方式來獲取和設(shè)置屬性節(jié)點的值2) . 通過元素節(jié)點的 getAttributeNode 方法來獲取屬性節(jié)點 ,然后在通過 nodeValue 來讀寫屬性值5. 獲取元素節(jié)點的子節(jié)點 (* 只有元素節(jié)點才有子節(jié)點 !):1) . childNod

22、es 屬性獲取全部的子節(jié)點 , 但該方法不實用 . 因為如果要獲取指定 的節(jié)點的指定子節(jié)點的集合 , 可以直接調(diào)用元素節(jié)點的 getElementsByTagName() 方法來獲取 .2) . firstChild 屬性獲取第一個子節(jié)點3) . lastChild 屬性獲取最后一個子節(jié)點6. 獲取文本節(jié)點 :1). 步驟 : 元素節(jié)點 - 獲取元素節(jié)點的子節(jié)點2). 若元素節(jié)點只有文本節(jié)點一個子節(jié)點 ,例如 dl京 , 你喜歡哪個城市?, 可以先獲取到指定的元素節(jié)點 eleNode,7. 節(jié)點的屬性 :1) . nodeName: 代表當前節(jié)點的名字 . 只讀屬性 .* 如果給定節(jié)點是一個文

23、本節(jié)點 , nodeName 屬性將返回內(nèi)容為 #text 的字符串2) . nodeType：返回一個整數(shù),這個數(shù)值代表著給定節(jié)點的類型. 只讀屬性 . 1 - 元素節(jié)點 , 2 - 屬性節(jié)點 , 3 - 文本節(jié)點*3). nodeValue :返回給定節(jié)點的當前值(字符串).可讀寫的屬性 . 元素節(jié)點 , 返回值是 null. . 屬性節(jié)點 : 返回值是這個屬性的值 . 文本節(jié)點 : 返回值是這個文本節(jié)點的內(nèi)容8. 創(chuàng)建一個元素節(jié)點 :1). createElement(): 按照給定的標簽名創(chuàng)建一個新的元素節(jié)點 . 方法只有一個 參：被創(chuàng)建的元素節(jié)點的名字 , 是一個字符串 .方法的返回

24、值：是一個指向新建節(jié)點的引用指針 . 返回值是一個元素節(jié)點 , 所以 它的 nodeType 屬性值等于 1.* 新元素節(jié)點不會自動添加到文檔里 , 它只是一個存在于 JavaScript 上下文的 對象.9. 創(chuàng)建一個文本節(jié)點 :1). createTextNode(): 創(chuàng)建一個包含著給定文本的新文本節(jié)點 . 這個方法的返回 值是一個指向新建文本節(jié)點引用指針 . 它是一個文本節(jié)點 , 所以它的 nodeType 屬性等于 3.方法只有一個參數(shù)： 新建文本節(jié)點所包含的文本字符串 . 新元素節(jié)點不會自動添 加到文檔里10. 為元素節(jié)點添加子節(jié)點 :1). appe ndChild(): var

25、 refere nee = eleme nt.appe ndChild( newChild):給定子節(jié)點 newChild 將成為給定元素節(jié)點 element 的最后一個子節(jié)點 .方法的返回值是一個指向新增子節(jié)點的引用指針 .11. 節(jié)點的替換 :1). replaeeChild(): 把一個給定父元素里的一個子節(jié)點替換為另外一個子節(jié)點 var referenee = element.replaeeChild(newChild,oldChild);返回值是一個指向已被替換的那個子節(jié)點的引用指針2) .該節(jié)點除了替換功能以外還有移動的功能.若需3) .該方法只能完成單向替換，若需要使用雙向替換，

26、需要自定義函數(shù)： /* 互換 aNode 和 bNode* param Object aNode* param Object bNode*/fun ctio n replaceEach(aNode, bNode)if(aNode = bNode)return;var aPare ntNode = aNode.pare ntNode;/若aNode有父節(jié)點if(aPare ntNode)var bPare ntNode = bNode.pare ntNode;/若bNode有父節(jié)點 if(bPare ntNode)var tempNode = aNode.cl on eNode(true); bPare ntNode.replaceChild(tempNode, bNode); aParentNode.replaceChild(bNode, aNode); 12. 插入節(jié)點：1) . i nsertBefore():把一個給定節(jié)點插入