JS操作XML

于 2009-06-14 16:05:00 发布
阅读量2.8k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： schema attributes javascript encoding input xml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/JAVAZHICHIZHE/article/details/6467610
本文提供了一个JavaScript操作XML的示例代码，包括添加、删除元素及显示XML内容等实用功能。探讨了不同浏览器环境下XML文档对象模型(XML DOM)的创建方法，并解决了在IE下创建带有命名空间的元素的问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

     一下是我的练习代码：

   <html>

<head>

<title>XML Demo</title>

</head>

<body>
   <script type="text/javascript">
  
      <!--
      /*调用程序并进行读取*/
      if(window.ActiveXObject)
      var xmldoc = new ActiveXObject("Microsoft.XMLDOM");
      else if(document.implementation && document.implementation.createDocument)//火狐浏览器
      xmldoc = document.implementation.createDocument("","doc",null);
      xmldoc.async=false;
      xmldoc.load("test.xml");
     
      function deleteLastElement(){
      /*查找根元素，并删除最后一个根节点*/
      var rootElement = xmldoc.documentElement;  //获得xml根结点
      if(rootElement.hasChildNodes())
      rootElement.removeChild(rootElement.lastChild);
      }
      /*添加元素*/
      function addElement(){ //经测试通过
         var rootElement = xmldoc.documentElement;
         /*创建雇员元素*/
         var newEmployee = xmldoc.createElement('employee');
         /*创建子元素及文本并一个个进行拼接*/
         var newName = xmldoc.createElement('name');
         var newNameText = xmldoc.createTextNode(document.myform.namefield.value);
         /*添加文本、 名称*/
         newName.appendChild(newNameText);
         newEmployee.appendChild(newName);
        
         var newTitle = xmldoc.createElement('title');
         var newTitleText = xmldoc.createTextNode(document.myform.titlefield.value);
         /*添加标题文本、 名称*/
         newTitle.appendChild(newTitleText);
         newEmployee.appendChild(newTitle);
        
         var newPhone = xmldoc.createElement('phone');
         var newPhoneText = xmldoc.createTextNode(document.myform.phonefield.value);
         /*添加电话名称*/
         newPhone.appendChild(newPhoneText);
         newEmployee.appendChild(newPhone);
        
         var newEmail = xmldoc.createElement('email');
         var newEmailText = xmldoc.createTextNode(document.myform.emailfield.value);
         /*添加e-mail*/
         newEmail.appendChild(newEmailText);
         newEmployee.appendChild(newEmail);
        
         /*向文档中追加全部记录*/
         rootElement.appendChild(newEmployee);
         //alert("xmldoc.xml");
        // xmldoc.save("test.xml");
         }
        
         /*字符串处理与拼接*/
         function dump(string){
            var currentvalue = document.myform.showxml.value;
                currentvalue+=string;
                document.myform.showxml.value = currentvalue;
         }
        
         function display(node){
            var type = node.nodeType;
            if(type==1){
               //打开标签
               dump("/<" + node.tagName);
               attributes = node.attributes;
               if(attributes){
                  var countAttrs = attributes.length;
                  var index = 0;
                  while(index<countAttrs){
                     att = attributes[index];
                     if(att)
                     dump(" "+att.name+"="+att.value); //如果有多个属性则输出
                     index++;
                  }
               }
               if(node.hasChildNodes()){
                  dump(">/n");  //关闭标签
                  var children = node.childNodes;  //获得子结点
                  var count = 0;
                  while(count<length){
                     child = children[count];
                     display(child); //遍历子结点
                     count++;
                  }
                  dump("</"+node.tagName+">/n");
               }
               else dump("/>/n");
            }
            else if (type==3){
               dump(node.data+"/n");
            }
         }
         //-->
   </script>
   <form id="myform" name="myform" action="#" method="get">
      <strong>XML文档</strong><br/>
      <textarea id="showxml" name="showxml" rows="10" cols="40"></textarea>
      姓名:<input type="text" name="namefield" id="namefield" size="50" /><br/>
      职务:<input type="text" name="titlefield" id="titlefield" size="30" /><br/>
      电话:<input type="text" name="phonefield" id="phonefield" size="20" /><br/>
      Email:<input type="text" name="emailfield" id="emailfield" size="20" /><br/>
      <!-- 通过onclick调用两个函数删除最后一条记录-->
      <input type="button" value="删除末条记录" onclick="deleteLastElement();
      document.myform.showxml.value=''; display(xmldoc.documentElement);"/>
     
      <!-- 通过onclick条用两个函数增加记录-->
      <input type="button" value="添加记录" onclick="addElement(); document.myform.showxml.value=''; display(xmldoc.documentElement);"/>
     
      <!-- 重新显示XML文档 -->
      <input type="button" value="重新显示 XML 文档" onclick="document.myform.showxml.value=xmldoc.xml;"/>
   </form>
  
   <script type="text/javascript">
      <!--
      /*显示初始状态的XML*/
      display(xmldoc.documentElement);
   </script>

</body>

</html>

 

——————参考网上的一段代码为：

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

//   我现在的问题是：  操作完之后如何保存XML？  

  补充关于创建XMLDom还有如下方式：

   var domDoc = new AciveXObject("Msxml.DOMDocument");

——————相关反馈：

请教楼主大人，我在使用asp页面中调用 如下的代码时：（javascript中）
<script language=javascript>
var objXML = new ActiveXObject("MSXML2.DOMDocument");
objXML.async = false;
objXML.load("data1.xml");
alert("d:"+objXML.xml);
</script>
如果 装载的 data1.xml文件的第一句是：<?xml version="1.0" encoding="utf-8" ?>
alert出来就是空的。
而如果把第一句修改成<?xml version="1.0" encoding="gb2312" ?>
alert出来的内容是data1.xml的内容。
请教一下，如何在保持<?xml version="1.0" encoding="utf-8" ?> 的情况下，在javascript中能正确装载 xml文件？ 现在是要把编码修改成 gb2312才可以。

————回答： XML文件的编码格式修改为UTF-8试试(用记事本打开,另存为,下面有选编码的格式)

2、 服务器?是服务端吧,直接doc.save(路径)或者用fso保存（客户端）,客户端得可以读出内容然后post

3、

楼主：我现在保存的xml文件有名字空间，例如：<xs:schema
xmlns:xs="http://www.w3.org/2001/XMLSchema"
targetNamespace="http://wr.example.com/2004/schemas/resSvc"
xmlns="http://wr.example.com/2004/schemas/resSvc">：</xs:schema>
我使用 var schema = doc.createNode(1,"xs：schema","");
提示未声明的名称空间前缀：“xs”引用，我用 var schema = doc.createNode(1,"schema","xs");这种方式也不行（csdn）。请问有没有方法实现啊？（我写的是wsdl）

————回答：

createNode 方法
　
　 作 用
建立一个指定型态、名称，及命名空间的新节点。 　
基本语法
xmlDocument.createNode(type, name, nameSpaceURI);
　
说 明
type 用来确认要被建立的节点型态，name 是一个字符串来确认新节点的名称，命名空间的前缀则是选择性的。nameSpaceURI 是一个定义命名空间URI 的字符串。如果前缀被包含在名称参数中，此节点会在nameSpaceURI 的内文中以指定的前缀建立。如果不包含前缀，指定的命名空间会被视为预设的命名空间。

var schema = doc.createNode(1,"schema","xs");

结果是<schema xmlns="xs"></schema>

或者你使用

var schema = doc.createNode(1,"xs:schema","你的命名空间");

谢谢楼主，我已经可以实现了。使用的是你的第一种的方法。
var schema = doc.createNode(1,"xs：schema","http://www.w3.org/2001/XMLSchema"); 已经ok了，出来的结果就是<xs：schema ></schema>这个样子的。一语点醒梦中人啊！呵呵

JAVAZHICHIZHE
关注
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值