JavaScript DOM特性与应用详解

开发 前端
由于DOM是树形结构,所以一个节点被抽象为对象Node,这是DOM的核心对象。Node的种类一共有12种,下面就让我们为大家一一介绍。

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

51CTO推荐阅读:JavaScript DOM的本质及操作方法

以下是Node的种类:

  1. Node.ELEMENT_NODE (1)     
  2. Node.ATTRIBUTE_NODE (2)     
  3. Node.TEXT_NODE (3) //<![CDATA[ ]]>中括着的纯文本,它没有子节点     
  4. Node.CDATA_SECTION_NODE (4) //子节点一定为TextNode     
  5. Node.ENTITY_REFERENCE_NODE (5)      
  6. Node.ENTITY_NODE (6) //DTD中的实体定义<!ENTITY foo “foo”>,无子节点     
  7. Node.PROCESSING_INSTRUCTION_NODE (7) //PI,无子节点     
  8. Node.COMMENT_NODE (8)     
  9. Node.DOCUMENT_NODE (9) //最外层的Root element,包括所有其它节点     
  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[ ]]>中括着的纯文本,它没有子节点  
  17. Node.CDATA_SECTION_NODE (4) //子节点一定为TextNode  
  18. Node.ENTITY_REFERENCE_NODE (5)   
  19. Node.ENTITY_NODE (6) //DTD中的实体定义<!ENTITY foo “foo”>,无子节点  
  20. Node.PROCESSING_INSTRUCTION_NODE (7) //PI,无子节点  
  21. Node.COMMENT_NODE (8)  
  22. Node.DOCUMENT_NODE (9) //最外层的Root element,包括所有其它节点  
  23. Node.DOCUMENT_TYPE_NODE (10) //DTD,<!DOCTYPE………..> 
  24. Node.DOCUMENT_FRAGMENT_NODE (11)  
  25. 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。

  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. /* 也可以使用方法获取数组的索引值 */    
  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. /* 也可以使用方法获取数组的索引值 */  
  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) 

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

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

#p#

createTextNode()

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

  1. reference = document.createTextNode() 

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

  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) 

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

  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#

检测节点类型

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

  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上会产生错误。

处理特性

即便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属性被设置为特性的值。
例如,假设有这样一个元素:

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

假设变量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节点也有一个完全等同于(同时也完全同步于)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); 

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

getAttribute()

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

getElementById()

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

getElementsByName()

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

getElementsByTagName()

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

#p#

生成与操作Node

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

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

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

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

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

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

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

  1. /*使用createElement(),createTextNode(),appendChild()动态添加节点*/    
  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()动态添加节点*/  
  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);  

使用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实战:创建和克隆元素
  3. 大话HTML DOM与XML DOM的区别与联系
责任编辑:王晓东 来源: JavaEye
相关推荐

2010-06-23 15:29:52

Eclipse 3.6Java

2010-09-13 16:46:29

JavaScriptHTML DOM节点

2010-09-08 15:13:09

Node节点Node属性

2010-08-17 15:04:37

JavaScriptDOM ready

2023-02-23 19:32:03

DOMJavascript开发

2014-12-12 10:13:12

JavaScript

2010-09-08 17:26:46

JavaScript

2010-09-28 14:12:50

Javascript

2010-05-28 17:39:47

TortoiseSVN

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

2017-09-14 13:48:20

Vue.js机制应用

2010-09-01 08:57:27

jQueryDOM对象

2015-03-13 13:46:15

光纤

2010-09-28 10:40:32

HTML DOM

2010-09-09 17:19:07

HTML DOMXML DOM

2009-10-26 09:41:26

PHP5.3闭包特性

2010-09-28 10:24:50

HTML DOMXML DOM
点赞
收藏

51CTO技术栈公众号