JavaScript DOM节点操作与XML处理详解

JavaScript DOM节点属性与方法详解

在JavaScript中操作节点时，必须严格注意大小写，否则会导致错误。节点对象提供了丰富的属性用于获取节点信息：Attributes属性只读，存储节点的属性列表；childNodes只读，存储子节点列表；dataType返回节点数据类型；Definition只读，以DTD或XML模式给出节点定义；Doctype只读，指定文档类型节点；documentElement可读写，返回文档根元素；firstChild和lastChild分别只读返回当前节点的第一个和最后一个子节点；Implementation返回XMLDOMImplementation对象；nextSibling和previousSibling分别只读返回当前节点的下一个和前一个兄弟节点；nodeName和nodeType分别只读返回节点名字和类型；nodeTypedValue可读写，存储节点值；nodeValue可读写，返回节点文本；ownerDocument只读，返回包含此节点的根文档；parentNode只读，返回父节点；Parsed只读，返回节点及其子节点是否已解析；Prefix只读，返回名称空间前缀；preserveWhiteSpace可读写，指定是否保留空白；Text可读写，返回节点及其后代的文本内容；url只读，返回最近载入的XML文档URL；Xml只读，返回节点及其后代的XML表示。 节点对象还包含多种方法：appendChild为当前节点添加新子节点并置于最后；cloneNode返回当前节点的拷贝；createAttribute创建新属性；createCDATASection创建包含给定数据的CDATA段；createComment创建注释节点；createDocumentFragment创建DocumentFragment对象；createElement创建元素节点；createEntityReference创建EntityReference对象；createNode创建指定类型、名字和命名空间的节点；createPorcessingInstruction创建处理指令节点；createTextNode创建包含给定数据的文本节点；getElementsByTagName返回指定名字的元素集合；hasChildNodes判断当前节点是否有子节点；insertBefore在指定节点前插入子节点；Load导入指定位置的XML文档；loadXML导入指定字符串的XML文档；removeChild从子节点列表中删除指定子节点；replaceChild替换指定子节点；Save将XML文件存到指定节点；selectNodes对节点进行匹配并返回列表；selectSingleNode返回第一个匹配节点；transformNode使用指定样式表转换节点及其后代；transformNodeToObject使用指定样式表将节点转换为对象。 DOM（文档对象模型）概念的引入极大地增强了HTML的功能，但对于学习DHTML的开发者而言，由于手册按字母顺序排列，查阅起来并不方便。实际上，掌握DOM的关键在于理解节点与节点之间的关系。DOM本质上是一个层次结构，类似于树形目录结构，包含根目录、子目录等层级。在DOM中，层次中的每个对象都称为节点（NODE）。以HTML为例，整个文档的根是<html>，可以通过document.documentElement访问，它是整个节点树的根节点（ROOT）。 根节点以下的最大子节点通常是主文档区<body>，在脚本中可以通过document.body访问。body区域内的所有文本及HTML标签都是文档的节点，分别称为文本节点和元素节点（或标签节点）。HTML网页由这两种节点组成。 节点之间的关系是DOM中最重要的部分，正确引用节点对象需要清楚节点树中各节点的相互描述方式。在DHTML中，JavaScript脚本利用节点对象的一套方法和属性来描述其他节点对象。节点的绝对引用包括：document.documentElement返回文档根节点；document.activeElement返回当前文档中被激活的标签节点；event.fromElement返回鼠标移出的源节点；event.toElement返回鼠标移入的源节点；event.srcElement返回激活事件的源节点。 节点的相对引用（设当前节点为node）包括：node.parentNode或node.parentElement返回父节点；node.childNodes返回子节点集合（包含文本及标签节点）；node.children返回子标签节点集合；node.textNodes返回子文本节点集合；node.firstChild返回第一个子节点；node.lastChild返回最后一个子节点；node.nextSibling返回同属下一个节点；node.previousSibling返回同属上一个节点。 节点的各种操作（设当前节点为node）包括：新增标签节点句柄使用document.createElement(sNode)，参数为要新添的节点标签名，例如newnode=document.createElement("div");。添加节点方面，追加子节点使用node.appendChild(oNode)，oNode为新增的节点句柄；应用标签节点使用node.applyElment(oNode,sWhere)，sWhere有两个值：outside或inside，表示加在当前节点外面还是里面；插入节点可使用inode.insertBefore()、node.insertAdjacentElement()或node.replaceAdjacentText()。修改节点方面，删除节点可使用node.remove()、node.removeChild()或node.removeNode()；替换节点可使用node.replaceChild()、node.replaceNode()或node.swapNode()。复制节点方面，node.cloneNode(bAll)返回复制节点引用，bAll为布尔值，true或false表示是否克隆该节点所有子节点。节点信息方面，node.contains()判断是否包含某节点，node.hasChildNodes()判断是否有子节点。 以下是JavaScript操作XML的示例代码： <script language="JavaScript"> <!-- var doc = new ActiveXObject("Msxml2.DOMDocument"); //ie5.5+,CreateObject("Microsoft.XMLDOM") //加载文档 //doc.load("b.xml"); //创建文件头 var p = doc.createProcessingInstruction("xml","version='1.0' encoding='gb2312'"); //添加文件头 doc.appendChild(p); //用于直接加载时获得根接点 //var root = doc.documentElement; //两种方式创建根接点 // var root = doc.createElement("students"); var root = doc.createNode(1,"students",""); //创建子接点 var n = doc.createNode(1,"ttyp",""); //指定子接点文本 //n.text = " this is a test"; //创建孙接点 var o = doc.createElement("sex"); o.text = "男"; //指定其文本 //创建属性 var r = doc.createAttribute("id"); r.value="test"; //添加属性 n.setAttributeNode(r); //创建第二个属性 var r1 = doc.createAttribute("class"); r1.value="tt"; //添加属性 n.setAttributeNode(r1); //删除第二个属性 n.removeAttribute("class"); //添加孙接点 n.appendChild(o); //添加文本接点 n.appendChild(doc.createTextNode("this is a text node.")); //添加注释 n.appendChild(doc.createComment("this is a comment\n")); //添加子接点 root.appendChild(n); //复制接点 var m = n.cloneNode(true); root.appendChild(m); //删除接点 root.removeChild(root.childNodes(0)); //创建数据段 var c = doc.createCDATASection("this is a cdata"); c.text = "hi,cdata"; //添加数据段 root.appendChild(c); //添加根接点 doc.appendChild(root); //查找接点 var a = doc.getElementsByTagName("ttyp"); //var a = doc.selectNodes("//ttyp"); //显示改接点的属性 for(var i= 0;i<a.length;i++) { alert(a[i].xml); for(var j=0;j<a[i].attributes.length;j++) { alert(a[i].attributes[j].name); } } //修改节点,利用XPATH定位节点 var b = doc.selectSingleNode("//ttyp/sex"); b.text = "女"; //alert(doc.xml); //XML保存（需要在服务端，客户端用FSO） //doc.save(); //查看根接点XML if(n) { alert(n.ownerDocument.xml); } //--> </script>