JavaScriptDOM特性与应用详解

由于DOM是树形结构，所以一个节点被抽象为对象Node，这是DOM的核心对象。Node的种类一共有12种，通过Node.nodeType的取值来确定（为1-12）。

创新互联公司专业做网站、成都网站建设，集网站策划、网站设计、网站制作于一体，网站seo、网站优化、网站营销、软文平台等专业人才根据搜索规律编程设计，让网站在运行后，在搜索中有好的表现，专业设计制作为您带来效益的网站！让网站建设为您创造效益。

推荐阅读：JavaScript DOM的本质及操作方法

以下是Node的种类：

 
 
 
  
  
  Node.ELEMENT_NODE (1)     
  
  
  Node.ATTRIBUTE_NODE (2)     
  
  
  Node.TEXT_NODE (3) //中括着的纯文本，它没有子节点     
  
  
  Node.CDATA_SECTION_NODE (4) //子节点一定为TextNode     
  
  
  Node.ENTITY_REFERENCE_NODE (5)      
  
  
  Node.ENTITY_NODE (6) //DTD中的实体定义，无子节点     
  
  
  Node.PROCESSING_INSTRUCTION_NODE (7) //PI，无子节点     
  
  
  Node.COMMENT_NODE (8)     
  
  
  Node.DOCUMENT_NODE (9) //最外层的Root element,包括所有其它节点     
  
  
  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) //中括着的纯文本，它没有子节点  
  
  
  Node.CDATA_SECTION_NODE (4) //子节点一定为TextNode  
  
  
  Node.ENTITY_REFERENCE_NODE (5)   
  
  
  Node.ENTITY_NODE (6) //DTD中的实体定义，无子节点  
  
  
  Node.PROCESSING_INSTRUCTION_NODE (7) //PI，无子节点  
  
  
  Node.COMMENT_NODE (8)  
  
  
  Node.DOCUMENT_NODE (9) //最外层的Root element,包括所有其它节点  
  
  
  Node.DOCUMENT_TYPE_NODE (10) //DTD， 
  
  
  Node.DOCUMENT_FRAGMENT_NODE (11)  
  
  
  Node.NOTATION_NODE (12) //DTD中的Nation定义

Node接口包含的特性/方法

◆nodeName属性将返回一个字符串，其内容是给定节点的名字。如果节点是元素节点，返回这个元素的名称；如果是属性节点，返回这个属性的名称；如果是文本节点，返回一个内容为#text 的字符串；

◆nodeType 属性将返回一个整数，这个数值代表给定节点的类型；

◆nodeValue 属性将返回给定节点的当前值.如果节点是元素节点，返回null；如果是属性节点，返回这个属性的名称；如果是文本节点，返回文本节点的内容；

◆ownerDocument 指向这个节点所属的文档；

◆attributes 包哈勒代表一个元素的特性的Attr对象；仅用于Element节点；

◆childNodes 所有子节点的列表；

◆firstChild 指向在childNodes列表中的第一个节点；

◆lastChild 指向在childNodes列表中的最后一个节点；

◆nextSibling 指向后一个兄弟节点；如果这个节点就是最后一个兄弟节点，那么该值为null；

◆previousSibling 指向前一个兄弟节点；如果这个节点就是第一个兄弟节点，那么该值为null；

◆parentNode 返回一个给定节点的父节点；

◆hasChildNodes() 当childNodes包含一个或多个节点时，返回真；

◆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对象 */    
  
  
  var oHtml = document.documentElement;     
  
  
  /* 得到和 */    
  
  
  var oHead = oHtml.firstChild;     
  
  
  var oBody = oHtml.lastChild;     
  
  
  /* 可以用这种方式 */    
  
  
  var oHead = oHtml.childNodes[0];     
  
  
  var oBody = oHtml.childNodes[1];     
  
  
  /* 也可以使用方法获取数组的索引值 */    
  
  
  var oHead = oHtml.childNodes.item(0);     
  
  
  var oBody = oHtml.childNodes.item(1);     
  
  
  /* 使用document.body来得到 */    
  
  
  var oBody = document.body;    
  
  
   
  
  
  /* 通过document对象 */  
  
  
  var oHtml = document.documentElement;  
  
  
  /* 得到和 */  
  
  
  var oHead = oHtml.firstChild;  
  
  
  var oBody = oHtml.lastChild;  
  
  
  /* 可以用这种方式 */  
  
  
  var oHead = oHtml.childNodes[0];  
  
  
  var oBody = oHtml.childNodes[1];  
  
  
  /* 也可以使用方法获取数组的索引值 */  
  
  
  var oHead = oHtml.childNodes.item(0);  
  
  
  var oBody = oHtml.childNodes.item(1);  
  
  
  /* 使用document.body来得到 */  
  
  
  var oBody = document.body; createElement(element)

创建一个指定标签名创建一个新的元素节点，返回值为指向新建元素节点的引用指针。

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

#p#

createTextNode()

创建一个包含着给定文本的新文本节点，返回一个指向新建文本节点的引用指针：

 
 
 
  
  
  reference = document.createTextNode()

参数为新建文本节点所包含的文本字符串。

 
 
 
  
  
  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)

为给定节点创建一个副本，参数为true或者false，true表示同时复制该节点的子节点，false则不复制任何子节点。

 
 
 
  
  
  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#

检测节点类型

通过使用nodeType特性检验节点类型：

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

这个例子中，document.nodeType返回9，等于Node.DOCUMENT_NODE；同时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+上正常运行。但是IE不支持这些常量，所以这些代码在IE上会产生错误。

处理特性

即便Node接口已具有attributes方法，且已被所有类型的节点继承，然而，只有Element节点才能有特性。Element节点的attributes属性其实是NamedNodeMap，它提供一些用于访问和处理其内容的方法：

◆getNamedItem(name) 返回nodeName属性值等于name的节点；

◆removeNamedItem(name) 删除nodeName属性值等于name的节点；

◆setNamedItem(node) 将node添加到列表中，按其nodeName属性进行索引；

◆item(pos) 像NodeList一样，返回在位置pos的节点；

请记住这些方法都是返回一个Attr节点，而非特性值。NamedNodeMap对象也有一个length属性来指示它所包含的节点的数量。当NamedNodeMap用于表示特性时，其中每个节点都是Attr节点，它的nodeName属性被设置为特性名称，而nodeValue属性被设置为特性的值。
例如，假设有这样一个元素：

 
 
 
  
  
  hello world!

假设变量oP包含指向这个元素的一个引用。于是可以这样访问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节点也有一个完全等同于（同时也完全同步于）nodeValue属性的value属性，并且有name属性和nodeName属性保持同步。我们可以随意使用这些属性来修改或变更特性。因为这个方法有些累赘，DOM又定义了三个元素方法来帮助访问特性：

 
 
 
  
  
  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);

为给定元素节点添加一个新的属性值或是改变它的现有属性

getAttribute()

 
 
 
  
  
  attributeValue = element.getAttribute(attributeName)  
  
  
  返回一个给定元素的一个给定属性节点的值。

getElementById()

 
 
 
  
  
  element = document.getElementById(ID)  
  
  
  寻找一个有着给定 id 属性值的元素  
  
  
  返回一个元素节点。

getElementsByName()

 
 
 
  
  
  用来获取所有name特性等于指定值的元素：  
  
  
  elements = document.getElementsByName(tagName)  
  
  
  返回一个节点集合。

getElementsByTagName()

 
 
 
  
  
  用于寻找有着给定标签名的所有元素：  
  
  
  elements = document.getElementsByTagName(tagName)  
  
  
  返回一个节点集合。

#p#

生成与操作Node

◆createAttribute(name) ：创建一个名为name的属性节点。

◆createCDATASection(text) ：创建一个子节点为text的CDATA区。

◆createComment(text) ：创建一个注释内容为text的注释节点。

◆createDocumentFragment() ：创建一个文档片断（fragment）节点。

◆createElement(tagName) ：创建一个名为tagName的元素节点。

◆createTextNode(text) ：创建一个包含text的文本节点。

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

 
 
 
  
  
  /*使用createElement(),createTextNode(),appendChild()动态添加节点*/    
  
  
  function createMessage(){     
  
  
   var op = document.createElement("p");     
  
  
   var oText = document.createTextNode("hello world!");     
  
  
   op.appendChild(oText);     
  
  
   document.body.appendChild(op);     
  
  
  }    
  
  
  /*使用createElement(),createTextNode(),appendChild()动态添加节点*/  
  
  
  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的核心方法是针对所有XML的，针对HTML DOM有特殊的方法，如：

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

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

网页名称：JavaScriptDOM特性与应用详解
分享URL：http://www.shufengxianlan.com/qtweb/news41/493991.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容