好看的小说,盗墓笔记,大主宰之灵路天蚕土豆

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

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

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

創(chuàng)新互聯(lián)公司專業(yè)做網(wǎng)站、成都網(wǎng)站建設(shè)，集網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、網(wǎng)站制作于一體，網(wǎng)站seo、網(wǎng)站優(yōu)化、網(wǎng)站營(yíng)銷、軟文平臺(tái)等專業(yè)人才根據(jù)搜索規(guī)律編程設(shè)計(jì)，讓網(wǎng)站在運(yùn)行后，在搜索中有好的表現(xiàn)，專業(yè)設(shè)計(jì)制作為您帶來效益的網(wǎng)站！讓網(wǎng)站建設(shè)為您創(chuàng)造效益。

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

以下是Node的種類：

 
 
 
  
  
  Node.ELEMENT_NODE (1)     
  
  
  Node.ATTRIBUTE_NODE (2)     
  
  
  Node.TEXT_NODE (3) //中括著的純文本，它沒有子節(jié)點(diǎn)     
  
  
  Node.CDATA_SECTION_NODE (4) //子節(jié)點(diǎn)一定為TextNode     
  
  
  Node.ENTITY_REFERENCE_NODE (5)      
  
  
  Node.ENTITY_NODE (6) //DTD中的實(shí)體定義，無子節(jié)點(diǎn)     
  
  
  Node.PROCESSING_INSTRUCTION_NODE (7) //PI，無子節(jié)點(diǎn)     
  
  
  Node.COMMENT_NODE (8)     
  
  
  Node.DOCUMENT_NODE (9) //最外層的Root element,包括所有其它節(jié)點(diǎn)     
  
  
  Node.DOCUMENT_TYPE_NODE (10) //DTD，     
  
  
  Node.DOCUMENT_FRAGMENT_NODE (11)     
  
  
  Node.NOTATION_NODE (12) //DTD中的Nation定義     
  
  
   
  
  
  Node.ELEMENT_NODE (1)  
  
  
  Node.ATTRIBUTE_NODE (2)  
  
  
  Node.TEXT_NODE (3) //中括著的純文本，它沒有子節(jié)點(diǎn)  
  
  
  Node.CDATA_SECTION_NODE (4) //子節(jié)點(diǎn)一定為TextNode  
  
  
  Node.ENTITY_REFERENCE_NODE (5)   
  
  
  Node.ENTITY_NODE (6) //DTD中的實(shí)體定義，無子節(jié)點(diǎn)  
  
  
  Node.PROCESSING_INSTRUCTION_NODE (7) //PI，無子節(jié)點(diǎn)  
  
  
  Node.COMMENT_NODE (8)  
  
  
  Node.DOCUMENT_NODE (9) //最外層的Root element,包括所有其它節(jié)點(diǎn)  
  
  
  Node.DOCUMENT_TYPE_NODE (10) //DTD， 
  
  
  Node.DOCUMENT_FRAGMENT_NODE (11)  
  
  
  Node.NOTATION_NODE (12) //DTD中的Nation定義

Node接口包含的特性/方法

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

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

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

◆ownerDocument 指向這個(gè)節(jié)點(diǎn)所屬的文檔；

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

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

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

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

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

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

◆parentNode 返回一個(gè)給定節(jié)點(diǎn)的父節(jié)點(diǎn)；

◆hasChildNodes() 當(dāng)childNodes包含一個(gè)或多個(gè)節(jié)點(diǎn)時(shí)，返回真；

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

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

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

 
 
 
  
  
  var container = document.getElementById("content");     
  
  
  var message = document.getElementById("fineprint");     
  
  
  var para = document.createElement("p");     
  
  
  container.insertBefore(para,message);    
  
  
   
  
  
  var container = document.getElementById("content");  
  
  
  var message = document.getElementById("fineprint");  
  
  
  var para = document.createElement("p");  
  
  
  container.insertBefore(para,message);    
  
  
  replaceChild(newnode,oldnode)將childNodes中的oldnode替換成newnode。  
  
  
  var container = document.getElementById("content");     
  
  
  var message = document.getElementById("fineprint");     
  
  
  var para = document.createElement("p");     
  
  
  container.replaceChild(para,message);    
  
  
   
  
  
  var container = document.getElementById("content");  
  
  
  var message = document.getElementById("fineprint");  
  
  
  var para = document.createElement("p");  
  
  
  container.replaceChild(para,message);  獲得Node：  
  
  
   
  
  
  /* 通過document對(duì)象 */    
  
  
  var oHtml = document.documentElement;     
  
  
  /* 得到和 */    
  
  
  var oHead = oHtml.firstChild;     
  
  
  var oBody = oHtml.lastChild;     
  
  
  /* 可以用這種方式 */    
  
  
  var oHead = oHtml.childNodes[0];     
  
  
  var oBody = oHtml.childNodes[1];     
  
  
  /* 也可以使用方法獲取數(shù)組的索引值 */    
  
  
  var oHead = oHtml.childNodes.item(0);     
  
  
  var oBody = oHtml.childNodes.item(1);     
  
  
  /* 使用document.body來得到 */    
  
  
  var oBody = document.body;    
  
  
   
  
  
  /* 通過document對(duì)象 */  
  
  
  var oHtml = document.documentElement;  
  
  
  /* 得到和 */  
  
  
  var oHead = oHtml.firstChild;  
  
  
  var oBody = oHtml.lastChild;  
  
  
  /* 可以用這種方式 */  
  
  
  var oHead = oHtml.childNodes[0];  
  
  
  var oBody = oHtml.childNodes[1];  
  
  
  /* 也可以使用方法獲取數(shù)組的索引值 */  
  
  
  var oHead = oHtml.childNodes.item(0);  
  
  
  var oBody = oHtml.childNodes.item(1);  
  
  
  /* 使用document.body來得到 */  
  
  
  var oBody = document.body; createElement(element)

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

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

#p#

createTextNode()

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

 
 
 
  
  
  reference = document.createTextNode()

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

 
 
 
  
  
  var message = document.createTextNode("hello world");     
  
  
  var container = document.createElement("p");     
  
  
  container.appendChild(message);     
  
  
  document.body.appendChild(container);    
  
  
   
  
  
  var message = document.createTextNode("hello world");  
  
  
  var container = document.createElement("p");  
  
  
  container.appendChild(message);  
  
  
  document.body.appendChild(container);   
  
  
   
  
  
  cloneNode()  
  
  
   
  
  
  reference = node.cloneNode(deep)

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

 
 
 
  
  
  var para = document.createElement("p");     
  
  
  var message = document.createTextNode("hello world");     
  
  
  para.appendChild(message);     
  
  
  document.body.appendChild(para);     
  
  
  var newpara = para.cloneNode(true);     
  
  
  document.body.appendChild(newpara);    
  
  
  var para = document.createElement("p");  
  
  
  var message = document.createTextNode("hello world");  
  
  
  para.appendChild(message);  
  
  
  document.body.appendChild(para);  
  
  
  var newpara = para.cloneNode(true);  
  
  
  document.body.appendChild(newpara);

#p#

檢測(cè)節(jié)點(diǎn)類型

通過使用nodeType特性檢驗(yàn)節(jié)點(diǎn)類型：

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

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

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

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

處理特性

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

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

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

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

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

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

 
 
 
  
  
  hello world!

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

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

或者：

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

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

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

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

 
 
 
  
  
  getAttribute(name)   
  
  
  等于  
  
  
  attributes.getNamedItem(name).value；  
  
  
   
  
  
  setAttribute(name, newvalue)  
  
  
  等于  
  
  
  attribute.getNamedItem(name).value = newvalue；  
  
  
   
  
  
  removeAttribute(name)  
  
  
  等于  
  
  
  attributes.removeNamedItem(name)

要獲取前面用的

的id特性，只需這樣做：

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

更改ID：

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

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

getAttribute()

 
 
 
  
  
  attributeValue = element.getAttribute(attributeName)  
  
  
  返回一個(gè)給定元素的一個(gè)給定屬性節(jié)點(diǎn)的值。

getElementById()

 
 
 
  
  
  element = document.getElementById(ID)  
  
  
  尋找一個(gè)有著給定 id 屬性值的元素  
  
  
  返回一個(gè)元素節(jié)點(diǎn)。

getElementsByName()

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

getElementsByTagName()

 
 
 
  
  
  用于尋找有著給定標(biāo)簽名的所有元素：  
  
  
  elements = document.getElementsByTagName(tagName)  
  
  
  返回一個(gè)節(jié)點(diǎn)集合。

#p#

生成與操作Node

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

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

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

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

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

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

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

 
 
 
  
  
  /*使用createElement(),createTextNode(),appendChild()動(dòng)態(tài)添加節(jié)點(diǎn)*/    
  
  
  function createMessage(){     
  
  
   var op = document.createElement("p");     
  
  
   var oText = document.createTextNode("hello world!");     
  
  
   op.appendChild(oText);     
  
  
   document.body.appendChild(op);     
  
  
  }    
  
  
  /*使用createElement(),createTextNode(),appendChild()動(dòng)態(tài)添加節(jié)點(diǎn)*/  
  
  
  function createMessage(){  
  
  
   var op = document.createElement("p");  
  
  
   var oText = document.createTextNode("hello world!");  
  
  
   op.appendChild(oText);  
  
  
   document.body.appendChild(op);  
  
  
  }

使用createDocumentFragment()：

 
 
 
  
  
  //通常做法     
  
  
  var arrText = ['first', 'second', 'third'];     
  
  
  for(var i=0; i
  
  
  
    var op = document.createElement('p');     
  
  
      var oText = document.createTextNode(arrText[i]);     
  
  
      op.appendChild(oText);     
  
  
      document.body.appendChild(op);     
  
  
  }     
  
  
  //使用documentFragment     
  
  
  var arrText = ['first', 'second', 'third'];     
  
  
  var oFragment = document.createDocumentFragment();     
  
  
  for(var i=0; i
  
  
  
    var op = document.createElement('p');     
  
  
      var oText = document.createTextNode(arrText[i]);     
  
  
      op.appendChild(oText);     
  
  
      oFragment.appendChild(op);     
  
  
  }     
  
  
  document.body.appendChild(oFragment);    
  
  
  //通常做法  
  
  
  var arrText = ['first', 'second', 'third'];  
  
  
  for(var i=0; i
  
  
  
 var op = document.createElement('p');  
  
  
   var oText = document.createTextNode(arrText[i]);  
  
  
   op.appendChild(oText);  
  
  
   document.body.appendChild(op);  
  
  
  }  
  
  
  //使用documentFragment  
  
  
  var arrText = ['first', 'second', 'third'];  
  
  
  var oFragment = document.createDocumentFragment();  
  
  
  for(var i=0; i
  
  
  
 var op = document.createElement('p');  
  
  
   var oText = document.createTextNode(arrText[i]);  
  
  
   op.appendChild(oText);  
  
  
   oFragment.appendChild(op);  
  
  
  }  
  
  
  document.body.appendChild(oFragment);

通過DocumentFragment的方式效率更高。

HTML DOM

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

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

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

當(dāng)前文章：JavaScriptDOM特性與應(yīng)用詳解
文章起源：http://fisionsoft.com.cn/article/dppopjc.html

新聞中心

其他資訊