用javascript操作xml[转]

我认为这篇文章很有用!
============================================
1.xml文件如下：

<?xml version=”1.0″ encoding=”UTF-8″?>
<zip>
<city>
mycity</city>
<state>mystate</state>
</zip>

2.读此xml的javascript例子：

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>Insert title here</title>
<script language=”javascript” type=”text/javascript”>

var url = “NewFile.xml”;
String.prototype.Trim = function() { return this.replace(/(^s*)|(s*$)/g, “”); }

var xmlDoc;

var moz = (typeof document.implementation != ‘undefined’)
&& (typeof document.implementation.createDocument != ‘undefined’);
var ie = (typeof window.ActiveXObject != ‘undefined’);

function importXML(file) {

if (moz) {
xmlDoc = document.implementation.createDocument(“”, “doc”, null);

} else if (ie) {
xmlDoc = new ActiveXObject(“MSXML2.DOMDocument.3.0”);
xmlDoc.async = false;
while(xmlDoc.readyState != 4) {};
}

xmlDoc.load(file);
}
importXML(url);

function updateCityState(){
if (moz) {
var zip = xmlDoc.getElementsByTagName(“zip”)[0];
var city;
var _city = zip.getElementsByTagName(“city”)[0].firstChild.nodeValue;
if (_city) city = _city.Trim();

var state;
var _state=zip.getElementsByTagName(“state”)[0].firstChild.nodeValue;
if(_state) state = _state.Trim();

document.getElementById(‘city’).value = city;
document.getElementById(‘state’).value = state;

} else if (ie) {
var city;
var _city = xmlDoc.selectSingleNode(“/zip/city”);
if (_city) city = _city.text;
var state;
var _state=xmlDoc.selectSingleNode(“/zip/state”);
if(_state) state = _state.text;
document.getElementById(‘city’).value = city;
document.getElementById(‘state’).value = state;
}
}
</script>
</head>
<body>
<form action=”post”>

</p>
City:
<input type=”text” name=”city” id=”city” />

State:
<input type=”text” size=”2″ name=”state” id=”state” />

</form>
</body>
</html>

=======================================================================

在网络浏览器软件中，可以Internet Explorer (IE)现在是一种标准的软件。可以看到，运行不同版本的Windows操作系统(和很多其他的操作系统)的每一台机器几乎都使用IE。微软已经通过ActiveX控件将IE的功能包含在执行成熟的XML处理技术中。

在本篇文章中，我们将讲述如何在IE中使用ActiveX功能来访问并解析XML文档，由此允许网络冲浪者操纵它们。

网上冲浪
我们以一个标准的顺序文档而开始，如表A所示。这一文档包含简单的顺序数据以提供网络冲浪者浏览之用。不仅仅为了显示这些数据，我们还提供了一个简单的用户界面，网上冲浪都可以使用这一界面来浏览XML文档。

表A: order.xml
<?xml version=”1.0″ ?>
<Order>
<Account>9900234</Account>
<Item id=”1″>
　 <SKU>1234</SKU>
　 <PricePer>5.95</PricePer>
　 <Quantity>100</Quantity>
　 <Subtotal>595.00</Subtotal>
　 <Description>Super Widget Clamp</Description>
</Item>
<Item id=”2″>
　 <SKU>6234</SKU>
　 <PricePer>22.00</PricePer>
　 <Quantity>10</Quantity>
　 <Subtotal>220.00</Subtotal>
　 <Description>Mighty Foobar Flange</Description>
</Item>
<Item id=”3″>
　 <SKU>9982</SKU>
　 <PricePer>2.50</PricePer>
　 <Quantity>1000</Quantity>
　 <Subtotal>2500.00</Subtotal>
　 <Description>Deluxe Doohickie</Description>
</Item>
<Item id=”4″>
　 <SKU>3256</SKU>
　 <PricePer>389.00</PricePer>
　 <Quantity>1</Quantity>
　 <Subtotal>389.00</Subtotal>
　 <Description>Muckalucket Bucket</Description>
</Item>
<NumberItems>1111</NumberItems>
<Total>3704.00</Total>
<OrderDate>07/07/2002</OrderDate>
<OrderNumber>8876</OrderNumber>
</Order>

我们使用一个网络表单以访问这一XML文档，这一表单将显示SKU，价格，数量，各部分的小计，以及顺序中的每一选项的描述。我们的表单还包含向前和向后浏览选项的按钮。

网页的构成
网页的重要部分是在于表单，我们将使用一个表以易读的方式在屏幕上显示。下面是显示HTML表的代码片段：

<form>
<table border=”0″>
　 <tr><td>SKU</td><td><input type=”text” name=”SKU”></td></tr>
　 <tr><td>Price</td><td><input type=”text” name=”Price”></td></tr>
　 <tr><td>Quantity</td><td><input type=”text” name=”Quantity”></td></tr>
　 <tr><td>Total</td><td><input type=”text” name=”Total”></td></tr>
　 <tr><td>Description</td><td><input type=”text”
name=”Description”></td></tr>
</table>
<input type=”button” value=” << ” onClick=”getDataPrev();”> <input
type=”button” value=” >> ” onClick=”getDataNext();”>
</form>

请注意到，我们在表的下面包含了两个按钮，即通过getDataNext() 和getDataPrev()函数来浏览前一个和后一个的记录，这也是我们所要讨论的问题。

脚本
其实，我们网页的实质部分不是在于表单，而是在于控制表单的脚本。在我们的脚本中包括四个部分。首先，我们通过载入XML文档而初始化网页。第二部分是导航到下一个记录。第三步是导航到前一个记录。第四部分是从XML文档中提取单一的值。表B显示了我们的网页的全部内容。

表B: jsxml.html
<html>
<head>
　 <script language=”JavaScript”>
<!–
　 vari = -1;
　 varorderDoc = new ActiveXObject(“MSXML2.DOMDocument.3.0”);
　 orderDoc.load(“order.xml”);
　 var items = orderDoc.selectNodes(“/Order/Item”);
　　　
　 function getNode(doc, xpath) {
　　 varretval = “”;
　　 var value = doc.selectSingleNode(xpath);
　　 if (value) retval = value.text;
　　 return retval;
　 }
　
　 function getDataNext() {
　　 i++;
　　 if (i > items.length – 1) i = 0;

　　 document.forms[0].SKU.value = getNode(orderDoc, “/Order/Item[” +
i + “]/SKU”);
　　 document.forms[0].Price.value = getNode(orderDoc, “/Order/Item[“
+ i + “]/PricePer”);
　　 document.forms[0].Quantity.value = getNode(orderDoc,
“/Order/Item[” + i + “]/Quantity”);
　　 document.forms[0].Total.value = getNode(orderDoc, “/Order/Item[“
+ i + “]/Subtotal”);
　　 document.forms[0].Description.value = getNode(orderDoc,
“/Order/Item[” + i + “]/Description”);
　 }
　
　 function getDataPrev() {
　　 i–;
　　 if (i < 0) i = items.length – 1;
　　
　　 document.forms[0].SKU.value = getNode(orderDoc, “/Order/Item[” +
i + “]/SKU”);
　　 document.forms[0].Price.value = getNode(orderDoc, “/Order/Item[“
+ i + “]/PricePer”);
　　 document.forms[0].Quantity.value = getNode(orderDoc,
“/Order/Item[” + i + “]/Quantity”);
　　 document.forms[0].Total.value = getNode(orderDoc, “/Order/Item[“
+ i + “]/Subtotal”);
　　 document.forms[0].Description.value = getNode(orderDoc,
“/Order/Item[” + i + “]/Description”);
　 }
　
// –>
　 </script>
</head>
<body onload=”getDataNext()”>
<h2>XML order Database</h2>
<form>
<table border=”0″>
　 <tr><td>SKU</td><td><input type=”text” name=”SKU”></td></tr>
　 <tr><td>Price</td><td><input type=”text” name=”Price”></td></tr>
　 <tr><td>Quantity</td><td><input type=”text”
name=”Quantity”></td></tr>
　 <tr><td>Total</td><td><input type=”text” name=”Total”></td></tr>
　 <tr><td>Description</td><td><input type=”text”
name=”Description”></td></tr>
</table>
<input type=”button” value=” << ” onClick=”getDataPrev();”> <input
type=”button” value=” >> ” onClick=”getDataNext();”>
</form>
</body>
</html>

运行
这一网页将传入并运行脚本的初始化。你一定确保order.xml文档与jsxml.html在相同的相同的路径上。

初始化部分将一个新的ActiveX对象例示为MSXML2.DOMDocument.3.0对象类型，然后脚本传入order.xml文档到内存中，并选择所有的/Order/Item节点。我们使用/Order/Item节点以识别文档已经包含的选项。

文档中的<body>标准有一个onLoad属性，这一属性能够使得网页调用getDataNext()而初始化。这一功能可用于从XML文档中获得下一个值并显示在表单中。我们使用一个简单的索引来访问特定的选项。

向前(>>)和向后(<<)按钮都使用相同的机制。首先响应onClick事件而调用getDataNext() 或者getDataPrev()，这两个函数使用了逻辑方法以避免文档以外的范围访问我们的记录。
==========================================================================

//加载文档
//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 commentn”));

//添加子接点
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>

==============================================================================

一般从服务端的返回可以得到一个XML对象。
例如服务器返回的：XMLHttpRequest.ResponseXML
这里的XMLHttpRequest就是ajax的核心对象。
在IE下可以这样创建：xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”).
javascript操作XML先创建一个XML DOM对象：var dom = new ActiveXObject(“Microsoft.XMLDOM”);
然后dom.loadXML（ResponseXML）就ok了。
接下来就可以操作xml，获取内容了。
一些常用的函数如下（一些在网上收集的，一些时平时老大教的）：
Microsoft.XMLDOM 对象常用的属性：
1、attributes 属性，返回当前节点的属性列表
2、childNodes 属性，返回当前节点的所有子节点列表
3、documentElement 属性，返回xml文件的根节点，通过Microsoft.XMLDOM对象名来调用
4、firstChild 属性、lastChild 属性，返回当前节点的第一个子（最后一个）元素（如果没有子节点是不是返回
第一个属性？）
5、nextSibling （previousSibling ）属性，下一个兄弟节点。
6、nodeName 属性，返回节点的标签名字
7、nodeValue 属性，传回指定节点相关的文字（不是属性，就是*号的这个内容 **）
8、ownerDocument 属性，根节点
9、parentNode 属性，传回目前节点的父节点。只能应用在有父节点的节点中。
搞一个例子：
function Add()
{
var dom = new ActiveXObject(“Microsoft.XMLDOM”);
dom.loadXML(ret);
if (dom.documentElement != null)
{
var nodes = dom.documentElement.selectNodes(“//SelectItem”); //得到根节点下所有SelectItem节点
if (nodes != null)
{
for(var i=0;i
一些常用的函数：
1、AppendChild 方法，加上一个节点当作指定节点最后的子节点。
2、cloneNode（deep）方法，deep 是一个布尔值。如果为true，此节点会复制以指定节点发展出去的所有节
点。如果是false，只有指定的节点和它的属性被复制。
3、createAttribute(name)方法，建立一个指定名称的属性。
4、createElement 方法，建立一个指定名称的元素。
5、xmlDocument.createNode(type, name, nameSpaceURI);type 用来确认要被建立的节点型态，name 是一个字符
串来确认新节点的名称，命名空间的前缀则是选择性的。nameSpaceURI 是一个定义命名空间URI 的字
符串。如果前缀被包含在名称参数中，此节点会在nameSpaceURI 的内文中以指定的前缀建立。如果不
包含前缀，指定的命名空间会被视为预设的命名空间。
6、getElementsByTagName 方法，传回指定名称的元素集合。
7、haschildnodes 方法，要解释吗？
8、insertBefore 方法，在指定的节点前插入一个子节点。xmlDocumentNode.insertBefore
(newChild,refChild);refChild 是参照节点的地址。新子节点被插到参照节点之前。如果refChild 参数没有包含
在内，新的子节点会被插到子节点列表的末端。
9、load 方法和loadXML 方法，前这从url，后者从字符串片断。
10、nodeFromID 方法，传回节点ID 符合指定值的节点。
11、removeChild 方法和replaceChild(newChild,oldChild)，顾名思义
12、selectNodes和selectSingleNode 方法，传回所有符合提供样式的节点。参数为一包含XSL 样式的字符串。
以下收集了一些MSDN的例子
(1)
var xmlDoc = new ActiveXObject(“Msxml2.DOMDocument.3.0”);
var rootElement=xmlDoc.createElement(“memo”);
xmlDoc.appendChild(rootElement);(2) var xmlDoc = new ActiveXObject(“Msxml2.DOMDocument.3.0”);
var rootElement=xmlDoc.createElement(“memo”);
rootElement.setAttribute(“author”, “Pat Coleman”); //属性author的值为Pat Coleman
xmlDoc.appendChild(rootElement);
(3) var xmlDoc = new ActiveXObject(“Msxml2.DOMDocument.3.0”);
var rootElement=xmlDoc.createElement(“memo”);
var memoAttribute=xmlDoc.createAttribute(“author”);
var memoAttributeText=xmlDoc.createTextNode(“Pat Coleman”);
memoAttribute.appendChild(memoAttributeText);
rootElement.setAttributeNode(memoAttribute);
xmlDoc.appendChild(rootElement);
//这个例子和(2)同样效果，但是用不同的方法，这里把attribute也当做一个节点，attribute node的
子节点只可以是textnode，所以这里要先创建一个textnode在赋给他。
（4）
var xmlDoc = new ActiveXObject(“Msxml2.DOMDocument.3.0”);
var rootElement=xmlDoc.createElement(“memo”); //创建一个元素
var memoAttribute=xmlDoc.createAttribute(“author”); //创建一个属性
var memoAttributeText=xmlDoc.createTextNode(“Pat Coleman”); //创建一个文本节点
var toElement=xmlDoc.createElement(“to”); //再创建一个元素
var toElementText=xmlDoc.createTextNode(“Carole Poland”); //再创建一个文本节点
memoAttribute.appendChild(memoAttributeText);
xmlDoc.appendChild(rootElement);
rootElement.setAttributeNode(memoAttribute);
rootElement.appendChild(toElement);
toElement.appendChild(toElementText);

属性：
attributes
Contains the list of attributes for this node. Read-only.
baseName
*Returns the base name for the name qualified with the namespace. Read-only.
childNodes
Contains a node list containing the children nodes. Read-only.
dataType
*Specifies the data type for this node. Read/write.
definition
*Returns the definition of the node in the document type definition (DTD) or schema. Read-only.
firstChild
Contains the first child of the node. Read-only.
lastChild
Returns the last child node. Read-only.
name
Contains the attribute name. Read-only.
namespaceURI
*Returns the Uniform Resource Identifier (URI) for the namespace. Read-only.
nextSibling
Contains the next sibling of this node in the parent’s child list. Read-only.
nodeName
Contains the qualified name of the element, attribute, or entity reference, or a fixed string for other node types. Read-only.
nodeType
Specifies the XML Document Object Model (DOM) node type, which determines valid values and whether the node can have child nodes. Read-only.
nodeTypedValue
*Contains the node value expressed in its defined data type. Read/write.
nodeTypeString
*Returns the node type in string form. Read-only.
nodeValue
Contains the text associated with the node. Read/write.
ownerDocument
Returns the root of the document that contains the node. Read-only.
parentNode
Contains the parent node. Read-only.
parsed
*Indicates the parsed status of the node and child nodes. Read-only.
prefix
*Returns the namespace prefix. Read-only.
previousSibling
Contains the previous sibling of this node in the parent’s child list. Read-only.
specified
Indicates whether the node (usually an attribute) is explicitly specified or derived from a default value in the document type definition (DTD) or schema. Read-only.
text
Represents the text content of the node or the concatenated text representing the node and its descendants. Read/write.
value
Contains the attribute value. Read/write.
xml
Contains the XML representation of the node and all its descendants. Read-only.
方法：
appendChild
Appends new child node as the last child of this node.
cloneNode
Clones a new node.
hasChildNodes
Provides a fast way to determine whether a node has children.
insertBefore
Inserts a child node to the left of the specified node or at the end of the list.
removeChild
Removes the specified child node from the list of children and returns it.
replaceChild
Replaces the specified old child node with the supplied new child node.
selectNodes
Applies the specified pattern-matching operation to this node’s context and returns the list of matching nodes as IXMLDOMNodeList.
selectSingleNode
Applies the specified pattern-matching operation to this node’s context and returns the first matching node.
transformNode
Processes this node and its children using the supplied XSL Transformations (XSLT) style sheet and returns the resulting transformation.
transformNodeToObject
Processes this node and its children using the supplied XSL Transformations (XSLT) style sheet and returns the resulting transformation in the supplied object.

PHP/Hyperf/MySQL/ES6/React 学习、分享、成长

用javascript操作xml[转]

Leave a Comment Cancel reply