JAVASCRIPT中使用DOM操作XML文档

最新推荐文章于 2021-05-13 01:40:09 发布

justinok

最新推荐文章于 2021-05-13 01:40:09 发布

阅读量212

点赞数

文章标签： XML JavaScript HTML 数据结构 C ViewUI

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

在 DOM 眼中， HTML 跟 XML 一样是一种树形结构的文档， <html> 是根（ root ）节点， <head> 、 <title > 、 <body> 是 <html> 的子（ children ）节点，互相之间是兄弟（ sibling ）节点； <body> 下面才是子节点 <table> 、 <span> 、 <p> 等等。如下图：
HTML文档结构.jpg

这个是不是跟 XML 的结构有点相似呢。不同的是， HTML 文档的树形主要包含表示元素、标记的节点和表示文本串的节点。 <o:p> </o:p>

HTML 文档的节点

DOM 下， HTML 文档各个节点被视为各种类型的 Node 对象。每个 Node 对象都有自己的属性和方法，利用这些属性和方法可以遍历整个文档树。由于 HTML 文档的复杂性， DOM 定义了 nodeType 来表示节点的类型。这里列出 Node 常用的几种节点类型：

接口	nodeType 常量	nodeType 值	备注
Element	Node.ELEMENT_NODE	1	元素节点
Text	Node.TEXT_NODE	3	文本节点
Document	Node.DOCUMENT_NODE	9	document
Comment	Node.COMMENT_NODE	8	注释的文本
DocumentFragment	Node.DOCUMENT_FRAGMENT_NODE	11	document 片断
Attr	Node.ATTRIBUTE_NODE	2	节点属性

DOM 树的根节点是个 Document 对象，该对象的 documentElement 属性引用表示文档根元素的 Element 对象（对于 HTML 文档，这个就是 <html> 标记）。 Javascript 操作 HTML 文档的时候， document 即指向整个文档， <body> 、 <table> 等节点类型即为 Element 。 Comment 类型的节点则是指文档的注释。具体节点类型的含义，请参考《 Javascript 权威指南》，在此不赘述。

Document 定义的方法大多数是生产型方法，主要用于创建可以插入文档中的各种类型的节点。常用的 Document 方法有：

方法	描述
createAttribute()	用指定的名字创建新的 Attr 节点。
createComment()	用指定的字符串创建新的 Comment 节点。
createElement()	用指定的标记名创建新的 Element 节点。
createTextNode()	用指定的文本创建新的 TextNode 节点。
getElementById()	返回文档中具有指定 id 属性的 Element 节点。
getElementsByTagName()	返回文档中具有指定标记名的所有 Element 节点。