XML与HTML交互示例-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_582/article/details/82044231

xml:

<?xml version="1.0" encoding="gb2312"?>

<books>
<book id="a002">
    <name>编译原理</name>
    <price>30</price>
    <pub>中南大学出版社</pub>
    <author>李利</author>

</book>
<book id="a003">
    <name>java大学教程</name>
    <price>80</price>
    <pub>北京大学出版社</pub>
    <author>古月</author>
</book>
</books>

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
var Dom;
function myload()
{
Dom=new ActiveXObject("Microsoft.XMLDOM");
Dom.async=false;
//var str="<A><B>bbb</B></A>";
//Dom.loadXML(str);
Dom.load("books.xml");

if(Dom.parseError.errorCode!=0)
{
  alert("错误行："+Dom.parseError.line+"\r\n"
   +"错误列："+Dom.parseError.linepos+"\r\n"
   +"错误原因："+Dom.parseError.reason+"\r\n"
   +"错误文本："+Dom.parseError.srcText);
}
else
{
  //遍历
  var root=Dom.documentElement;
  str = "----------------元素："+root.baseName+"--------------<br/>";
  var nodelist=root.childNodes;
  for(var i=0;i<nodelist.length;i++)
  {
   str += "<br/>  元素：" + nodelist[i].baseName +"<br/>";
   str += "------------------属性--------------<br/>";
   var attributes=nodelist[i].attributes;
   for(var j=0;j<attributes.length;j++)
   {
    str += "\t属性名："+attributes[j].nodeName+"的值："+attributes[j].nodeValue+"<br/>";
   }

   var nodelist1=nodelist[i].childNodes;
   str += "------------------元素--------------<br/>";
   for(var k=0;k<nodelist1.length;k++)
   {
    str +="\t元素名："+nodelist1[k].nodeName+"的文本："+nodelist1[k].firstChild.nodeValue+"<br/>";
   }

}
result.innerHTML = str;
}
}

function add()
{
    //添加
    //添加元素
    var str = "添加元素前\n";
    alert(str + Dom.documentElement.xml);
    var nodelist=Dom.documentElement.childNodes;
    for(var i=0;i<nodelist.length;i++)
    {
     var newNode=Dom.createNode(1,"address","");
     var newTextNode=Dom.createNode(3,"","");
     var newAttribute=Dom.createNode(2,"officeaddress","");
     newAttribute.nodeValue="河西";
     newTextNode.nodeValue="湖南长沙";
     newNode.appendChild(newTextNode);
     newNode.setAttributeNode(newAttribute);

     nodelist[i].appendChild(newNode);
    }
    var str1 = "添加元素后\n";
    alert(str1 + Dom.documentElement.xml);
}

function modify()
{
    //修改元素
    alert("修改元素前\n" + Dom.documentElement.xml);
    var nodelist=Dom.documentElement.childNodes;
    var newElement =Dom.createNode(1,"newNode","");
    newElement.text="新的节点";
    nodelist[1].replaceChild(newElement,nodelist[1].lastChild);
    alert("修改元素后\n"+Dom.documentElement.xml);
}
function del()
{
    alert("删除元素前\n" + Dom.documentElement.xml);
    var nodelist=Dom.documentElement.childNodes;
    var removeElements=nodelist[0].getElementsByTagName("address");
    nodelist[0].removeChild(removeElements[0]);
    alert("删除元素后\n" + Dom.documentElement.xml);
}
</script>
</HEAD>

web前端DOM操作