自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

JavaScript DOM特性與應(yīng)用詳解

作者：ice-cream
開發(fā) 前端
由于DOM是樹形結(jié)構(gòu)，所以一個節(jié)點被抽象為對象Node，這是DOM的核心對象。Node的種類一共有12種，下面就讓我們?yōu)榇蠹乙灰唤榻B。

由于DOM是樹形結(jié)構(gòu)，所以一個節(jié)點被抽象為對象Node，這是DOM的核心對象。Node的種類一共有12種，通過Node.nodeType的取值來確定（為1-12）。

51CTO推薦閱讀：JavaScript DOM的本質(zhì)及操作方法

以下是Node的種類：

  1. Node.ELEMENT_NODE (1)     
  2. Node.ATTRIBUTE_NODE (2)     
  3. Node.TEXT_NODE (3) //<![CDATA[ ]]>中括著的純文本，它沒有子節(jié)點     
  4. Node.CDATA_SECTION_NODE (4) //子節(jié)點一定為TextNode     
  5. Node.ENTITY_REFERENCE_NODE (5)      
  6. Node.ENTITY_NODE (6) //DTD中的實體定義<!ENTITY foo “foo”>，無子節(jié)點     
  7. Node.PROCESSING_INSTRUCTION_NODE (7) //PI，無子節(jié)點     
  8. Node.COMMENT_NODE (8)     
  9. Node.DOCUMENT_NODE (9) //最外層的Root element,包括所有其它節(jié)點     
  10. Node.DOCUMENT_TYPE_NODE (10) //DTD，<!DOCTYPE………..>     
  11. Node.DOCUMENT_FRAGMENT_NODE (11)     
  12. Node.NOTATION_NODE (12) //DTD中的Nation定義     
  13.  
  14. Node.ELEMENT_NODE (1)  
  15. Node.ATTRIBUTE_NODE (2)  
  16. Node.TEXT_NODE (3) //<![CDATA[ ]]>中括著的純文本，它沒有子節(jié)點  
  17. Node.CDATA_SECTION_NODE (4) //子節(jié)點一定為TextNode  
  18. Node.ENTITY_REFERENCE_NODE (5)   
  19. Node.ENTITY_NODE (6) //DTD中的實體定義<!ENTITY foo “foo”>，無子節(jié)點  
  20. Node.PROCESSING_INSTRUCTION_NODE (7) //PI，無子節(jié)點  
  21. Node.COMMENT_NODE (8)  
  22. Node.DOCUMENT_NODE (9) //最外層的Root element,包括所有其它節(jié)點  
  23. Node.DOCUMENT_TYPE_NODE (10) //DTD，<!DOCTYPE………..> 
  24. Node.DOCUMENT_FRAGMENT_NODE (11)  
  25. Node.NOTATION_NODE (12) //DTD中的Nation定義 

Node接口包含的特性/方法

◆nodeName屬性將返回一個字符串，其內(nèi)容是給定節(jié)點的名字。如果節(jié)點是元素節(jié)點，返回這個元素的名稱；如果是屬性節(jié)點，返回這個屬性的名稱；如果是文本節(jié)點，返回一個內(nèi)容為#text 的字符串；

◆nodeType 屬性將返回一個整數(shù)，這個數(shù)值代表給定節(jié)點的類型；

◆nodeValue 屬性將返回給定節(jié)點的當前值.如果節(jié)點是元素節(jié)點，返回null；如果是屬性節(jié)點，返回這個屬性的名稱；如果是文本節(jié)點，返回文本節(jié)點的內(nèi)容；

◆ownerDocument 指向這個節(jié)點所屬的文檔；

◆attributes 包哈勒代表一個元素的特性的Attr對象；僅用于Element節(jié)點；

◆childNodes 所有子節(jié)點的列表；

◆firstChild 指向在childNodes列表中的第一個節(jié)點；

◆lastChild 指向在childNodes列表中的最后一個節(jié)點；

◆nextSibling 指向后一個兄弟節(jié)點；如果這個節(jié)點就是最后一個兄弟節(jié)點，那么該值為null；

◆previousSibling 指向前一個兄弟節(jié)點；如果這個節(jié)點就是第一個兄弟節(jié)點，那么該值為null；

◆parentNode 返回一個給定節(jié)點的父節(jié)點；

◆hasChildNodes() 當childNodes包含一個或多個節(jié)點時，返回真；

◆appendChild(node) 將node添加到childNodes的末尾；

◆removeChild(node) 將node從childNodes中刪除；

◆insertBefore(newnode refnode) 在childNodes中的refnode之前插入newnode。

  1. var container = document.getElementById("content");     
  2. var message = document.getElementById("fineprint");     
  3. var para = document.createElement("p");     
  4. container.insertBefore(para,message);    
  5.  
  6. var container = document.getElementById("content");  
  7. var message = document.getElementById("fineprint");  
  8. var para = document.createElement("p");  
  9. container.insertBefore(para,message);    
  10. replaceChild(newnode,oldnode)將childNodes中的oldnode替換成newnode。  
  11. var container = document.getElementById("content");     
  12. var message = document.getElementById("fineprint");     
  13. var para = document.createElement("p");     
  14. container.replaceChild(para,message);    
  15.  
  16. var container = document.getElementById("content");  
  17. var message = document.getElementById("fineprint");  
  18. var para = document.createElement("p");  
  19. container.replaceChild(para,message); ❑ 獲得Node：  
  20.  
  21. /* 通過document對象 */    
  22. var oHtml = document.documentElement;     
  23. /* 得到<head />和<body /> */    
  24. var oHead = oHtml.firstChild;     
  25. var oBody = oHtml.lastChild;     
  26. /* 可以用這種方式 */    
  27. var oHead = oHtml.childNodes[0];     
  28. var oBody = oHtml.childNodes[1];     
  29. /* 也可以使用方法獲取數(shù)組的索引值 */    
  30. var oHead = oHtml.childNodes.item(0);     
  31. var oBody = oHtml.childNodes.item(1);     
  32. /* 使用document.body來得到<body /> */    
  33. var oBody = document.body;    
  34.  
  35. /* 通過document對象 */  
  36. var oHtml = document.documentElement;  
  37. /* 得到<head />和<body /> */  
  38. var oHead = oHtml.firstChild;  
  39. var oBody = oHtml.lastChild;  
  40. /* 可以用這種方式 */  
  41. var oHead = oHtml.childNodes[0];  
  42. var oBody = oHtml.childNodes[1];  
  43. /* 也可以使用方法獲取數(shù)組的索引值 */  
  44. var oHead = oHtml.childNodes.item(0);  
  45. var oBody = oHtml.childNodes.item(1);  
  46. /* 使用document.body來得到<body /> */  
  47. var oBody = document.body;❑ createElement(element) 

創(chuàng)建一個指定標簽名創(chuàng)建一個新的元素節(jié)點，返回值為指向新建元素節(jié)點的引用指針。

  1. eg) var para = document.createElement("p");  
  2. document.body.appendChild(para); 

#p#

createTextNode()

創(chuàng)建一個包含著給定文本的新文本節(jié)點，返回一個指向新建文本節(jié)點的引用指針：

  1. reference = document.createTextNode() 

參數(shù)為新建文本節(jié)點所包含的文本字符串。

  1. var message = document.createTextNode("hello world");     
  2. var container = document.createElement("p");     
  3. container.appendChild(message);     
  4. document.body.appendChild(container);    
  5.  
  6. var message = document.createTextNode("hello world");  
  7. var container = document.createElement("p");  
  8. container.appendChild(message);  
  9. document.body.appendChild(container);   
  10.  
  11. cloneNode()  
  12.  
  13. reference = node.cloneNode(deep) 

為給定節(jié)點創(chuàng)建一個副本，參數(shù)為true或者false，true表示同時復制該節(jié)點的子節(jié)點，false則不復制任何子節(jié)點。

  1. var para = document.createElement("p");     
  2. var message = document.createTextNode("hello world");     
  3. para.appendChild(message);     
  4. document.body.appendChild(para);     
  5. var newpara = para.cloneNode(true);     
  6. document.body.appendChild(newpara);    
  7. var para = document.createElement("p");  
  8. var message = document.createTextNode("hello world");  
  9. para.appendChild(message);  
  10. document.body.appendChild(para);  
  11. var newpara = para.cloneNode(true);  
  12. document.body.appendChild(newpara); 

#p#

檢測節(jié)點類型

通過使用nodeType特性檢驗節(jié)點類型：

  1. alert(document.nodeType); //outputs "9"  
  2. alert(document.documentElement.nodeType); //outputs "1" 

這個例子中，document.nodeType返回9，等于Node.DOCUMENT_NODE；同時document. documentElement.nodeType返回1，等于Node.ELEMENT_NODE。也可以用Node常量來匹配這些值：

  1. alert(document.nodeType == Node.DOCUMENT_NODE); //true  
  2. alert(document.documentElement.nodeType == Node.ELEMENT_NODE); //true 

這段代碼可以在Mozilla 1.0+、Opera 7.0+和Safari 1.0+上正常運行。但是IE不支持這些常量，所以這些代碼在IE上會產(chǎn)生錯誤。

處理特性

即便Node接口已具有attributes方法，且已被所有類型的節(jié)點繼承，然而，只有Element節(jié)點才能有特性。Element節(jié)點的attributes屬性其實是NamedNodeMap，它提供一些用于訪問和處理其內(nèi)容的方法：

◆getNamedItem(name) 返回nodeName屬性值等于name的節(jié)點；

◆removeNamedItem(name) 刪除nodeName屬性值等于name的節(jié)點；

◆setNamedItem(node) 將node添加到列表中，按其nodeName屬性進行索引；

◆item(pos)  像NodeList一樣，返回在位置pos的節(jié)點；

請記住這些方法都是返回一個Attr節(jié)點，而非特性值。NamedNodeMap對象也有一個length屬性來指示它所包含的節(jié)點的數(shù)量。當NamedNodeMap用于表示特性時，其中每個節(jié)點都是Attr節(jié)點，它的nodeName屬性被設(shè)置為特性名稱，而nodeValue屬性被設(shè)置為特性的值。
例如，假設(shè)有這樣一個元素：

  1. <p id="p1" style="color:red">hello world!</p> 

假設(shè)變量oP包含指向這個元素的一個引用。于是可以這樣訪問id特性的值：

  1. var sId = oP.attributes.getNamedItem("id").nodeValue; //p1 

或者：

  1. var sId = oP.attributes.item(0).nodeValue; 

還可以通過給nodeValue屬性賦新值來改變id特性：

  1. oP.attributes.getNamedItem("id").nodeValue = "newId"; 

Attr節(jié)點也有一個完全等同于（同時也完全同步于）nodeValue屬性的value屬性，并且有name屬性和nodeName屬性保持同步。我們可以隨意使用這些屬性來修改或變更特性。因為這個方法有些累贅，DOM又定義了三個元素方法來幫助訪問特性：

  1. getAttribute(name)   
  2. 等于  
  3. attributes.getNamedItem(name).value；  
  4.  
  5. setAttribute(name, newvalue)  
  6. 等于  
  7. attribute.getNamedItem(name).value = newvalue；  
  8.  
  9. removeAttribute(name)  
  10. 等于  
  11. attributes.removeNamedItem(name)  

要獲取前面用的<p/>的id特性，只需這樣做：

  1. var sId = oP.getAttribute("id"); 

更改ID：

  1. oP.setAttribute("id", "newId");  
  2. setAttribute()  
  3. element.setAttribute(attributeName,attributeValue); 

為給定元素節(jié)點添加一個新的屬性值或是改變它的現(xiàn)有屬性

getAttribute()

  1. attributeValue = element.getAttribute(attributeName)  
  2. 返回一個給定元素的一個給定屬性節(jié)點的值。 

getElementById()

  1. element = document.getElementById(ID)  
  2. 尋找一個有著給定 id 屬性值的元素  
  3. 返回一個元素節(jié)點。 

getElementsByName()

  1. 用來獲取所有name特性等于指定值的元素：  
  2. elements = document.getElementsByName(tagName)  
  3. 返回一個節(jié)點集合。 

getElementsByTagName()

  1. 用于尋找有著給定標簽名的所有元素：  
  2. elements = document.getElementsByTagName(tagName)  
  3. 返回一個節(jié)點集合。 

#p#

生成與操作Node

◆createAttribute(name) ：創(chuàng)建一個名為name的屬性節(jié)點。

◆createCDATASection(text) ：創(chuàng)建一個子節(jié)點為text的CDATA區(qū)。

◆createComment(text) ：創(chuàng)建一個注釋內(nèi)容為text的注釋節(jié)點。

◆createDocumentFragment() ：創(chuàng)建一個文檔片斷（fragment）節(jié)點。

◆createElement(tagName) ：創(chuàng)建一個名為tagName的元素節(jié)點。

◆createTextNode(text) ：創(chuàng)建一個包含text的文本節(jié)點。

其中最重要的方法是createElement(),createDocumentFragment(), create TextNode()。

  1. /*使用createElement(),createTextNode(),appendChild()動態(tài)添加節(jié)點*/    
  2. function createMessage(){     
  3.  var op = document.createElement("p");     
  4.  var oText = document.createTextNode("hello world!");     
  5.  op.appendChild(oText);     
  6.  document.body.appendChild(op);     
  7. }    
  8. /*使用createElement(),createTextNode(),appendChild()動態(tài)添加節(jié)點*/  
  9. function createMessage(){  
  10.  var op = document.createElement("p");  
  11.  var oText = document.createTextNode("hello world!");  
  12.  op.appendChild(oText);  
  13.  document.body.appendChild(op);  
  14. } 

使用createDocumentFragment()：

  1. //通常做法     
  2. var arrText = ['first', 'second', 'third'];     
  3. for(var i=0; i<arrText.length; i++){     
  4.     var op = document.createElement('p');     
  5.     var oText = document.createTextNode(arrText[i]);     
  6.     op.appendChild(oText);     
  7.     document.body.appendChild(op);     
  8. }     
  9. //使用documentFragment     
  10. var arrText = ['first', 'second', 'third'];     
  11. var oFragment = document.createDocumentFragment();     
  12. for(var i=0; i<arrText.length; i++){     
  13.     var op = document.createElement('p');     
  14.     var oText = document.createTextNode(arrText[i]);     
  15.     op.appendChild(oText);     
  16.     oFragment.appendChild(op);     
  17. }     
  18. document.body.appendChild(oFragment);    
  19. //通常做法  
  20. var arrText = ['first', 'second', 'third'];  
  21. for(var i=0; i<arrText.length; i++){  
  22.  var op = document.createElement('p');  
  23.  var oText = document.createTextNode(arrText[i]);  
  24.  op.appendChild(oText);  
  25.  document.body.appendChild(op);  
  26. }  
  27. //使用documentFragment  
  28. var arrText = ['first', 'second', 'third'];  
  29. var oFragment = document.createDocumentFragment();  
  30. for(var i=0; i<arrText.length; i++){  
  31.  var op = document.createElement('p');  
  32.  var oText = document.createTextNode(arrText[i]);  
  33.  op.appendChild(oText);  
  34.  oFragment.appendChild(op);  
  35. }  
  36. document.body.appendChild(oFragment);   

通過DocumentFragment的方式效率更高。

HTML DOM

使用DOM的核心方法是針對所有XML的，針對HTML DOM有特殊的方法，如：

◆使用DOM core：oImg.setAttribute("src", "picture.gif");

◆使用HTML DOM：oImg.src = "picture.jpg";

【編輯推薦】

  1. JavaScript DOM修改文檔樹方法實例
  2. JavaScript DOM實戰(zhàn)：創(chuàng)建和克隆元素
  3. 大話HTML DOM與XML DOM的區(qū)別與聯(lián)系
責任編輯：王曉東 來源： JavaEye
JavaScript DOM
相關(guān)推薦

2010-06-23 15:29:52

Eclipse 3.6Java

2010-09-08 15:13:09

Node節(jié)點Node屬性

2010-09-13 16:46:29

JavaScriptHTML DOM節(jié)點

2023-02-23 19:32:03

DOMJavascript開發(fā)

2010-08-17 15:04:37

JavaScriptDOM ready

2014-12-12 10:13:12

JavaScript

2010-09-28 14:12:50

Javascript

2010-09-08 17:26:46

JavaScript

2010-05-28 17:39:47

TortoiseSVN

2024-11-07 09:08:58

2010-04-30 09:19:05

Servlet 3.0

2015-08-11 09:46:26

JavaScriptDOM編程重排

2010-09-13 17:12:55

JavaScript

2010-09-13 14:24:17

JavaScript

2010-09-01 08:57:27

jQueryDOM對象

2010-09-28 10:40:32

HTML DOM

2017-09-14 13:48:20

Vue.js機制應(yīng)用

2015-03-13 13:46:15

光纖

2010-09-28 10:24:50

HTML DOMXML DOM

2010-09-09 17:19:07

HTML DOMXML DOM
點贊
收藏

51CTO技術(shù)棧公眾號